3.3 用豆包做网站：对话式开发的正确姿势

豆包做网站的基本路数

豆包是字节跳动旗下的 AI 助手，具备对话问答与代码生成能力。它和 WorkBuddy 走的是两条路：WorkBuddy 帮你把网站从生成做到发布；豆包则像一位随手帮你写代码的师傅——你描述需求，它把网页代码（HTML/CSS/JS）写在对话里，你把代码保存成文件，用浏览器打开就能看到效果。

完整流程是六步循环：

界面与功能以豆包当前版本为准，但这个循环是通用的。它像请师傅打了件家具：师傅出手艺，你负责搬回家、摆好、哪里硌手告诉师傅返工。

以“给一家小公司做介绍页”为例，看对话该怎么写。每一步的用户话术都可以直接照抄。

第一步，说需求：

我想做一个公司介绍网页，单个页面就行。公司叫山茶手作，卖手工陶瓷。页面从上到下四块：顶部横幅，放一句“让日子慢下来”和一张陶瓷工作台大图；中间是公司介绍，两段话；再往下是三款产品，每款一张图、一个名字、一句介绍；底部是联系方式，微信和地址。整体风格温润安静，米白色底，棕色文字。

需求里交代了栏目顺序、每块放什么、风格配色，一次到位。

第二步，要完整代码：

请给我完整的单文件网页代码，所有样式和内容都放在一个 .html 文件里，我保存后就能用浏览器打开。图片先用网上常见的免费占位图。

关键在“完整的单文件”和“保存后就能打开”这两个词——不提这个，你可能拿到几段零散代码，自己拼不起来。

第三步，反馈与迭代。 打开一看，标题歪了，你可以说：

页面能打开，但顶部横幅的文字没有居中，而且手机上看三款产品挤成一列重叠了。麻烦修复这两个问题，重新给我完整代码。

描述现象、说清在什么设备上出现，比“不好看，重做”有效十倍。反馈问题时，对照下面这张表组织语言：

你看到的现象	反馈时怎么说
中文全是乱码	页面中文显示乱码，请确认编码用 UTF-8，并重新给完整代码
布局在手机上乱掉	用手机打开后××栏目重叠，请做移动端适配
某个按钮点了没反应	点击××按钮无任何反应，请检查并修复脚本
图片不显示	页面上图片位置空白，请检查图片地址是否可用

代码到手，新手最容易在“保存”这一步摔跤。下面三个坑，提前避开：

常见问题	症状	解法
文件名没加后缀	双击打不开，或用记事本打开	保存为 `index.html`，后缀必须是 `.html`
编码不对	页面里的中文全是乱码	保存时选 `UTF-8` 编码
双击打不开或部分功能不动	页面空白、图片不显示	先换浏览器再试；涉及较复杂功能时，用本地服务器方式打开

补充两句关于编码的：Windows 上用记事本保存时，右下角有编码选项，选 UTF-8 即可；如果你发现中文显示成“æµ‹è¯•”这类天书，九成是编码选错了，重新另存一次就好。

至于双击打开和本地服务器的区别：纯展示页双击就够了；如果页面用了较复杂的脚本功能，双击可能部分失灵，需要起一个本地静态服务器再访问。前者是“直接看照片”，后者是“把照片挂进相册再看”——多数介绍页属于前者，不必一开始就折腾服务器。

豆包这条路有明确的适用边界：

适合：想顺手学点 HTML 知识的人（代码看得见摸得着，改一个数字就能看到变化）；只需要单页或几页静态内容的场景，比如公司介绍页、活动通知页、个人简历页。
不适合：需要存数据、要登录、要上传文件的网站——豆包给你的是前端代码，后端要自己再想办法；想直接上线的网站——代码在你电脑里，要让别人访问，还得自己找托管服务把文件传上去。

一句话定位：豆包适合“学习＋简单页面”，WorkBuddy 适合“一步到位上链接”。两者不冲突，完全可以先用豆包练手找感觉，再用 WorkBuddy 做正式的站。