AI 编程零基础速成系列第3讲:用豆包编程完成你的第一个web应用

新闻

作者：微信文章
AI 编程风口已至，你能抓到吗？AI 编程零基础速成系列启动！

AI 编程零基础速成系列第2讲：基础知识储备

大家好～我是骁哥

正式开始之前先唠点家常～这是某 T0 互联网大厂内部的 ㊙️ 秘密聊天记录 👇



骁哥身为某 T0 大厂资深一线研发，最有发言权。这个图不能说是胡编乱造，只能说情况完全属实 😹

这就是 AI 的时代，而AI 时代最大的红利，就是技术的壁垒无限趋近于0，比如 AI 编程。

这些原本只有高材生、拿高薪的人才能掌握的高门槛技能，现在正慢慢普及到普通人手里。既残酷、又充满希望。

抓住了，那就是红利。抓不住，那就会逐渐被淘汰。

AI 编程零基础速成系列第2讲：基础知识储备

家常就唠到这，我们言归正传。在第2讲中，我们一起为 AI 编程做了充分的储备。

而今天，我们终于要迈出我们 AI 编程的第一步！通过豆包编程，生成你的第一个Web应用！

通过这一讲，我们将学会如何与AI 沟通，如何让 AI 帮你实现一个从0到1的 Web 应用。

准备好了吗？搞起！


豆包是什么

官方介绍：豆包是字节跳动推出的一款多功能AI智能助手，旨在为用户提供全方位的智能服务，包括聊天对话、内容创作、编程辅助、情感陪伴等。它基于字节自研的大语言模型“豆包大模型”（原名云雀模型），支持文本、图像、音视频生成、数据分析以及AI驱动的在线搜索功能。



DeepSeek你一定听说过，那豆包就是字节跳动的DeepSeek🐶。

之所以选择豆包，是因为豆包最近上新了一个 AI 编程功能。 你对豆包说几句话，豆包就能给你写好一个可运行网页



那接下来，我们就通过豆包 AI 编程，来实现一个“每日好运签应用”，最终的效果如下图所示：



生成提示词

有些小伙伴看到上图中的提示词一下就不淡定了，“这提示词怎么这么复杂”



别被吓到了，有技巧的哈，提示词，我们也可以让 AI 帮我们生成！

打开豆包，新建会话，输入以下提示词：

我要用 AI 编程实现一个“今日运势生成器” 核心功能： 用户点击按钮，随机显示一条今日运势（文字 + 配图/背景色）。 吸引力： 神秘感、趣味性、结果可分享（截图）。星座、运势是永恒话题。 帮我设计一套提示词

这样，我们就得到了一套完整且系统的提示词！
豆包 AI 编程生成 Web 应用



来到 AI 编程界面，将我们刚刚生成的提示词复制粘贴。然后就可以看到豆包编程开始疯狂产出代码



等编码结束后，会自动展示效果。一个 2000行代码的 web 应用，用了1分钟，就这么水灵灵的做完了 👍



骁哥上来就来了个财运，不错哦～！就是这个颜色不太对....你抽到的是什么签呢？

点击下载到本地，就会下载html（看到那个Trae了么，那是我们下一节的主角哦～）



用浏览器，打开 html 就可以看到效果啦！



附加题：我们可以点开代码，对着上一讲的内容，看看里面的代码都是什么，html？css？还是javascript？


总结一下

AI 编程难吗？不难吧！

这是你的一小步，只是做了一个简单的网页应用，但却是你在 AI 编程路上的一大步！🎉

今天，我们通过豆包编程，从零开始构建了我们的第一个应用，实现了一个有趣且实用的“今日运势生成器”。

下期，我们要开始上家伙了！

豆包 AI 编程是启蒙，它让你快速入门并实现简单的项目。而接下来的内容，Trae 将成为你的得力助手，它会带领你深入到更高级的编程世界。通过 Trae，我们将把编程能力提升到一个新的高度，完成更复杂、更功能强大的应用。准备好了吗？我们下期见，继续深耕 AI 编程的无限可能！🚀