先把丑话说在前面：这标题不是我吹的，是真事。上周我坐在电脑前想做一个活动报名页，琢磨了半天连 HTML 是啥都记不全。后来实在没辙，从打印机里抽了张 A4 纸，拿笔画了个粗糙的页面框架，拍成照片扔给豆包，二十分钟后我手里就多了一个能点、能跳、能弹窗的网页。
这里的“能点”不是那种截图式假页面，是真真实实的 HTML 页面：顶部有导航、中间有主标题、下方有三张卡片、按钮点击后有反馈，甚至还有一段悬停浮起的动画。整个过程我没写过一行代码，用的就是豆包的网页版入口，工具也只有一个浏览器加一个文本编辑器。
这篇文章是写给所有被代码门槛卡住的人的。不管你是产品、运营、设计、学生还是刚开始创业想验证想法，只要你会画方块、会打字，就能复刻我这套流程。我会把所有从草图到成品的细节摊开：草图怎么画才有效、提示词怎么组织才不翻车、二十分钟里每一分钟在干什么、以及我踩过的那些坑。
1. 无代码做网页，为什么先从一张 A4 草图开始
很多人一上来就想着“我告诉 AI 我要什么，它直接给我网页”。我以前也这么干过，结果非常惨：描述得越抽象，豆包生成的页面就越像模板，空有漂亮外壳，完全不是我要的东西。
后来我复盘发现，问题不在豆包，在于我没想清楚自己要什么。文字描述天然有歧义，你说“做一个产品介绍页”，它可能理解成企业官网，也可能理解成落地页广告，出来的结构自然南辕北辙。而一张草图，是把脑子里的想法物理外化，逼着你在动手前先做一轮信息架构。
1.1 草图不是画画，是在梳理信息结构
我画的那张 A4 草图，说难听点就是一堆歪歪扭扭的方框加几行潦草字。但我做了一件关键的事：每个方框都代表了页面一个区域，并且我标注了每个区域要放什么内容、以什么顺序出现。
这里有个底层逻辑：网页设计的第一层不是颜色和字体，而是区块结构。就好比装修房子，你可以纠结墙面刷什么色，但必须先决定哪边是客厅、哪边是卧室、卫生间放在什么位置。草图画的方框，就是在定这个布局骨架。
我画草图时遵守了三个原则：
- 从上到下画，和手机/电脑阅读顺序一致
- 每个模块一个方框，里面写清楚要放的文案或者内容类型
- 在按钮旁边用箭头标注点击后的行为
比如我在 Hero 区域写的是“活动报名，9月15日截止”，下面画了一个按钮，按钮里写“立即报名”，旁边用箭头指了指说“点击后弹出表单”。这种信息密度，比打一百个字描述都有用。
1.2 豆包到底替你干了什么，以及“无代码”的真相
严格来说，豆包这类 AI 帮你做的不是“无代码”，而是“AI 替你写代码，你只需负责表达”。它背后是把你的自然语言和图像理解成前端三大件：HTML 负责页面结构、CSS 负责样式、JavaScript 负责交互行为。
对不会写代码的人，我建议先把这三样东西做一个很粗的类比：
- HTML 是毛坯房：墙在哪、房间有几间、门窗开在哪
- CSS 是装修：墙漆颜色、地板材质、灯亮度
- JavaScript 是水电线路和智能家居：开关一按灯亮、门一推开铃响
豆包相当于一个什么都懂的包工头，你跟他说清楚户型需求和装修风格，他就能给你交付一个能住人的房子。但注意，包工头懂施工，不代表你不需要懂需求。你给它的信息越模糊，它只能按自己见过的“常见户型”来猜，结果当然不是你要的。
这就是我后来坚持先画草图的原因。当我把草图和一段结构化的提示词一起发过去，豆包返回的页面几乎一比一还原了我的想法。那一瞬间我意识到，AI 时代做网页的核心能力已经转移了：不再是你多会写代码，而是你能多清晰地把想法翻译成需求。
2. 草图怎么画、怎么拍、怎么喂给豆包
这一节是最能“抄作业”的部分。我把自己验证过有效的画法、拍法、提示词写法全部整理出来。你不需要画得好看，不需要任何美术基础，只要愿意花五分钟把方块框出来。
2.1 草图的三要素：版式、文案、交互标注
第一是版式。页面是电脑端用的还是手机端用的，先定下来。如果是电脑端，A4 纸横向画，把浏览器可视区域当成你的画布；如果是手机端，A4 纸竖着画，画一个窄条矩形代表手机屏幕。然后用方框切分出导航、主视觉、内容区、页脚。
第二是文案。每个方框旁边写上你实际要显示的文字，不需要写完整，写关键词就行。比如“主标题：用 AI 生成你的第一个网页”，按钮写“开始体验”。这里千万别偷懒，因为 AI 默认会自己编文案，如果你不给它明确的字，它写出来的话术往往又空又泛。
第三是交互标注。这是很多人会忽略的一步。页面里哪些地方可以点、点击后要发生什么，最好用箭头加文字标清楚。在 AI 眼里，“有按钮”和“按钮点击后有反馈”是两个完全不同的需求，只有你标注了，它才会真的生成对应的 JavaScript 代码。
2.2 拍照与上传：一张好照片能省十分钟扯皮
画完草图后，拍照这一步千万别敷衍。我试过在台灯下斜着拍，结果草图上半部分被阴影盖住，豆包把导航结构理解错了，后面改了四轮才纠正。
我的拍照经验就三条：
- 手机正对纸张，保持垂直，别斜着拍
- 保证整张纸在画面内，四个角都要露出来
- 光线均匀，别逆光，别让手指影子挡住字
拍好之后可以直接把图片拖进豆包的对话框，发一句：“请先看一下这张草图，然后用文字描述你理解的页面结构。”这一步是让 AI 先复述一遍需求，相当于确认它有没有看懂。如果它复述的内容和你画的不一致，你可以在生成代码之前及时修正，省得后面白折腾。
2.3 提示词模板：照着抄就能用的版本
我试过很多种提示词写法，最稳的是下面这个模板。你可以直接复制，把括号里的内容替换成你自己的。
我刚画了一张网页原型草图，请参考图片里的布局和文字，生成一份完整的 HTML 页面。 要求： 1. 从上到下还原草图中的模块顺序 2. 所有样式写在 <style> 标签里，不要引用外部 CSS 文件 3. 所有交互逻辑用 JavaScript 实现，写在 <script> 标签里 4. 不要使用任何第三方前端框架，不要引用外部 CDN 5. 所有文案严格按照我标注的文字，不要自己编 6. 输出完整、可直接保存成 .html 文件运行的代码 另外，请在代码最后用注释说明每个版块对应草图里的哪个区域。为什么这个模板有效？因为它做了三件重要的事：限制了依赖（不引入外部框架），明确了输出格式（单文件完整运行），锁定了文案来源（用标注文字而不是自编）。这三条正好对应了我之前踩过的坑，后面会细说。
3. 二十分钟实操：从草图到可点网页的完整流程
下面是我那一回的真实操作时间线，每一步干什么我都记得很清楚。你跟着走一遍，正常情况下二十分钟绝对够用。
3.1 第 1~5 分钟：先定页面类型，控制首版范围
很多人一开始就犯一个错误：想一口气做完整企业官网。首页要导航、轮播、产品矩阵、团队介绍、新闻动态、客户案例、联系表单……信息量太大，AI 不是做不出来，是很容易在生成过程中“顾此失彼”，比如某些模块间距错乱、文案瞎编。
我的做法是首版只做三到四个核心模块。以我那个活动报名页为例，我最终画的草图包含：顶部导航、大标题和引导语、报名按钮、三个“活动亮点”卡片、一个报名表单区域，然后页脚一行字。这些模块足够撑起一个完整的落地页，又不至于让 AI 处理不过来。
这五分钟里我还要做一个决定：这个页面是给手机看还是给电脑看。如果两者都要，我会在提示词里明确写“做成响应式，在 768px 以下自动变成单列布局”。这个技巧我在第 4 部分会展开讲。
3.2 第 5~10 分钟：让豆包生成静态页面，并做两项检查
这是动手的关键环节：上传草图，贴上提示词模板，发送。
豆包返回代码后，我不会直接复制到文本编辑器里，而是打开一个新的浏览器标签页。这一步很重要：因为很多 AI 生成的代码会包含一些你看不出来、但浏览器能看出来的问题，比如某个标签没闭合、某个样式冲突导致文字颜色和背景一样。浏览器是最诚实的裁判。
然后我做两个动作：
- 把代码另存为一个 .html 文件，文件名用英文小写加连字符，比如 activity-page.html
- 用浏览器打开这个文件，逐屏看效果，确认和草图的对应关系
看到页面顺着我画的骨架长出来，那种感觉挺奇妙的。但别高兴太早，第一版大概率只是“静态的”，也就是页面能用眼睛看，按钮点了没反应。这很正常，因为交互要靠下一步单独喂需求。
3.3 第 10~20 分钟：把“能看”变成“能点”
接下来就是加交互。这个阶段我对豆包的说话方式变了，从“描述大需求”变成“下具体指令”。原则是：一次只说一个需求，说清楚触发条件和结果状态。
举个例子。我的页面有一个“立即报名”按钮，我想要的效果是点击后在下方区域显示一行“报名成功，我们会尽快联系你”。我当时对豆包说的是：
按钮“立即报名”点击后，隐藏按钮本身，并在按钮下方显示一行文字：“报名成功，我们会尽快联系你”。请只给出需要修改的完整代码块。注意我强调了“请只给出需要修改的完整代码块”。这是我从翻车经历里总结出来的：如果让 AI 每次都输出整个 HTML 文件，对话长了之后它偶尔会漏掉之前的某段代码，导致新版本反而缺东西。只改局部，我把新代码复制过去替换，风险小很多。
替换完之后，我会立刻在浏览器里刷新页面，点一下按钮验证。验证通过就继续提下一个需求，再验证，再提下一个。我用这样的方式陆续加了几个交互：卡片悬停时向上浮起、导航菜单平滑滚动到对应区块、表单提交后弹出提示框。每加一个交互，大约花两到三分钟。
4. 豆包生成网页时常见的坑，我都帮你踩过了
这部分是文章里最值钱的内容。我这几轮实操下来，翻车的频率其实很高，尤其是前几次。下面按问题出现频率排序，每个问题我都会说说现象和怎么解决。
4.1 页面全白，最容易让人慌的一种情况
有两次我兴冲冲地双击打开 HTML 文件，结果浏览器里空空如也，一个像素都不显示。第一次我以为是豆包生成错了，重新让它做了一份，第二次认真检查才发现问题根本不在代码逻辑，而是我保存文件时编码选错了，导致中文内容全部变成乱码，浏览器识别失败。
后来我的固定操作是：保存文件时把编码设为 UTF-8。多数文本编辑器右下角都有编码选项，改成 UTF-8 再保存。如果页面还是全白，就按 F12 打开开发者工具，切到 Console 标签，看红色的报错信息。豆包生成的代码一般不会有大逻辑错误，红色报错里明明白白写着是哪一行出了问题，把这个报错原样发给豆包，让它改，通常一轮就能修好。
4.2 图片裂了，或者压根不显示
我在草图里画了一个活动海报的位置，豆包默认帮我找了一张网络图片链接塞进代码。本地打开时，那个位置的图片直接裂开了。原因很简单：它引用的图片在某个图床上，而有些图床会检查请求来源，本地文件直接打开时请求被拒绝。
解决思路是让页面自给自足。我给豆包下过这样的指令：
不要使用任何外部图片链接。图片位置用灰色占位块加文字说明代替。以后我不会让它处理真实海报图，而是让它在那个位置生成一个占位块。真实图片等我后续自己替换。这个方法能让页面在任何环境下都稳定显示，也方便我后续用设计工具做好图再贴进去。
4.3 手机上打开，布局直接乱套
电脑端看着好好的网页，一放到手机浏览器里就错位：本来横向排列的三张卡片，变成三列挤在一起，文字挤压到换行。这是因为生成代码时豆包默认按电脑屏幕的宽度来布局。
解决办法有两个层面。第一个层面是让豆包在代码里加上 viewport 声明。这个声明基本是响应式网页的标配，让浏览器知道按设备宽度来渲染页面。第二个层面是让它把容器宽度写成百分比或者 max-width，不要写死成 1200px 之类的固定值。如果已经生成完代码，也可以直接把这条样式补充进去：
* { box-sizing: border-box; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; } @media (max-width: 768px) { .cards { display: flex; flex-direction: column; } }这段代码的意思很直白：页面宽度自适应屏幕，手机宽度时卡片从上到下竖着排。其中媒体查询这部分，是一般网页在小屏上不乱套的关键。
4.4 按钮点了没反应，问题往往出在“描述歧义”
我遇到过最典型的一次：想让按钮点击后弹出提示框，豆包生成的却是点击后跳转到页面顶部。原因是我的描述里同时出现了“点击按钮”和“跳转”这两个词，它把“跳转”理解成了页面滚动。
后来我换了一种说法，效果立刻变好：
点击“提交”按钮后，当前按钮上方区域出现一段绿色文字：“提交成功”。按钮本身不变。这里的关键点是我把“点击前是什么状态、点击后变成什么状态”写得很明确。AI 对动作的理解能力虽然越来越强，但“跳转”这个词在网页语境里很容易被误读成 location.href 跳转。想精确表达交互，就别用含糊动词，直接说结果和状态。
4.5 多轮修改之后，AI 开始“失忆”
改到第八轮、第九轮的时候，豆包偶尔会忘记之前定好的某个约束，比如又把字体改成默认微软雅黑，或者把某段文案改回它自己编的版本。这不是豆包变笨了，而是对话上下文太长之后，早期信息权重下降。
我的应对方式是：每改三四轮，就让豆包输出一次当前完整代码的最新版，并明确问它“现在的文件里，第 x 个版块用的结构是什么”。这个动作相当于给 AI 做一次“记忆刷新”。同时，我自己也会把关键约束复制在一个记事本里，每次需要让它修改前，再把这一小段约束粘贴进对话，而不是指望它记得所有历史。
5. 从“能点”到“好用”：速查表与进阶玩法
页面能做出来只是第一步，真正让它变好用的是后续的打磨。这一节我整理了一个问题速查表，再聊聊把页面从“自己能看”变成“别人也能访问”时需要注意的事。
5.1 常见问题速查表
| 问题现象 | 可能原因 | 解决方法 |
|---|---|---|
| 浏览器打开全白 | 文件编码错误、CSS/JS 外部资源缺失 | 保存为 UTF-8，F12 看 Console，要求豆包内联样式 |
| 图片裂开或空白 | 引用了外部图床链接被拦截 | 图片位置改用占位块，真实图片自行替换 |
| 手机布局错乱 | 缺 viewport 声明、容器宽度固定 | 加 viewport，容器用百分比或 max-width |
| 按钮点击无响应 | JavaScript 未绑定事件、ID 不匹配 | 检查按钮 id 和事件名，事件绑定写在 window.onload 内 |
| 中文乱码 | 文件编码和浏览器解析不一致 | 统一使用 UTF-8 保存 |
| 多次修改后代码丢失某板块 | 对话上下文过长，AI 遗漏 | 让豆包刷新完整代码，复制关键约束再继续 |
这表格里的前四行，覆盖了我 80% 的翻车现场。你如果在实操里遇到了别的怪问题，可以把报错信息直接复制给豆包，它自己给出的解决办法通常比我在这写得更对症。
5.2 从单页到多页：别急着让 AI 建“网站”
页面跑通之后，大家很容易动念头：我要不要干脆做一个完整网站，加上“关于我们”“产品介绍”好几个页面？
我的建议是首版先忍住。单页滚动站是成本最低、效果最容易把控的方案：把所有内容塞进一个长长的页面，用导航锚点实现点击跳转到对应区块。你只需要告诉豆包“点击导航里的某个按钮，页面平滑滚动到对应 id 的区块”，豆包完全能实现。
如果你真的需要多个独立页面，也不要一上来就做几十个。先做两个页面试试：首页埋一个“了解更多”按钮，跳转到详情页。豆包可以帮你生成两个独立的 HTML 文件，你只需要把跳转链接写对：详情页文件放在同一个文件夹里，按钮的 href 写 details.html 即可。
5.3 发布上线与更进一步
自己电脑上的 HTML 文件，怎么让朋友也能打开？我试过最简单的方式是找一个静态网站托管服务，把 HTML 文件传上去，得到一个公网链接。这个操作和写代码无关，纯上传，豆包也能给你写一份操作说明，但我不建议盲信，步骤里涉及账号的部分，最好自己留个心眼，别把密码发给任何 AI 对话。
再往深走一步，可能有人会问：豆包能不能帮我把这个页面和一个真实的数据服务对接上？这里我多说一句，还是那句老话——静态 HTML 页面只能做“看起来能跑”的原型，它没有自己的数据存储能力。如果你想做真正能收集报名信息的页面，要么接入现成的表单服务，要么找懂后端开发的人帮你搭一个简单接口。这一层一旦涉及服务器和数据库，就不再是完全“无代码”的范围了。
不过话说回来，对绝大多数场景，比如活动宣传、个人作品集、产品概念验证，一个能点的单页已经能解决很大一部分问题了。千万不要因为追求“完整功能”而把页面越做越重。先把一个页面做好，比做十个半成品有价值得多。
最后说点个人体会
这个流程我反复玩了几天，最大的感受是：做网页这件事，难的根本不是代码，而是把“我脑子里有个想法”变成“一个可被描述、可被拆解、可被传递的形式”。画 A4 草图逼着我把模糊的想法落了地，豆包只是负责把落地的想法翻译成浏览器能读的语言。
我也越来越相信，以后“不会写代码”不再是做不出东西的借口。工具已经替我们解决了“怎么写”的问题，剩下的“做什么”“怎么做才算好”还是得靠自己。下一次你脑子里冒出一个页面想法，别急着找程序员朋友，也别急着打开建站模板。拿一张 A4 纸，画几个方框，写几行字，标两个箭头，拍照扔给豆包。二十分钟后，你会和我一样，收获一个能点、能跳、能弹窗的网页。
