画了一张A4纸上的网页草图，拍照扔给豆包，二十分钟后拿到一个能点的网页——这件事我干过，而且不止一次。先说结论：这不是玄学，是完全可以复制的操作流程。所谓“不会写代码”，其实只是不懂HTML、CSS、JavaScript这些语法，但你对一个页面该长什么样、该放什么按钮、点击之后该发生什么，心里是有数的。草图就是把你脑子里的“数”具象化，豆包负责把这张图翻译成代码。整个过程的核心关键词就三个：草图、豆包、网页，听起来简单，真正做起来有不少门道，这篇就把我从踩坑到熟练的全过程拆开讲。
这篇文章适合谁？适合那些完全没碰过代码、但日常有做页面需求的人：想给班级做个报名页、给小店做个菜单页、给项目做个演示页、甚至想给朋友做个生日祝福网页，但又不好意思每次都求人。也适合刚入门前端、想用AI工具提高效率的开发新人。我会把草图怎么画、提示词怎么给、生成后再怎么改、遇到问题怎么排查，一条龙全讲清楚，保证你看完就能上手操作。
1. 内容整体设计与思路拆解
1.1 这件事的底层逻辑：你不是在学代码，你是在提需求
很多人的误区是：想用AI做网页，是不是得先学一点代码？其实完全不用。你要做的不是“会写”，而是“会描述”。豆包这类AI大模型，本质上是一个“翻译器”：你把对页面的需求用自然语言、用图形表达出来，它把需求翻译成浏览器能读懂的HTML结构、CSS样式和JavaScript行为。
所以整条链路的第一个关键步骤，并不是打开电脑，而是把需求讲清楚。手绘的A4草图，就是你跟AI之间最直观的“需求文档”。为什么草图比直接打字描述更好用？因为页面布局、颜色分布、按钮位置这些东西，用语言描述很容易产生歧义。你说“左上角一个logo”，AI理解成的“左上角”跟你想的可能差了十万八千里；但你画出来，哪怕画得很丑，位置关系、大小比例、元素类型都是明确的。
我试过直接跟豆包说“帮我做一个这样的页面”，然后配上一大段文字描述，效果远不如“先画一张草图，拍下来上传，告诉豆包按图生成”。差别就像你跟装修师傅说“把这里弄好看一点”和“你把这张参考图里的电视墙做成这样”——哪个不容易翻车，不言而喻。
1.2 为什么选择豆包而不是其他工具
市面上的AI工具不少，ChatGPT也能写代码，但豆包的优势在于它更符合我们这批“不写代码的人”的使用习惯：
- 免费且门槛低：网页版、App版、电脑客户端都有，注册就能用，不需要额外配置环境。
- 支持图片理解：这是画草图流程最核心的功能，直接把拍好的A4草图传上去，豆包能识别出页面里的按钮、图片、文字区块。
- 中文理解强：你跟它说“帮我做得清爽一点”“这个标题要醒目”，它理解得很到位，不需要刻意用英文提示词。
- 生成速度够快：一个单页面的HTML代码，通常在十几秒到一分钟内就能生成，配合多轮对话修改，二十分钟完成不算夸张。
当然，如果你手头已经习惯用其他工具，思路完全一样，诀窍在于“草图+提示词”的组合，而不是某个特定工具。
1.3 草图到底能做什么，不能做什么
我一开始以为AI会根据草图生成一个“像素级还原”的页面，事实证明我想多了。豆包能做的，是理解草图中的布局意图：这里有一块大的头部区域、下面左边是图片右边是文字、底部有两个按钮。它不能做的，是精确还原你的线条比例、颜色深浅。
所以，草图的意义是“框定范围”，不是“精确复刻”。你在草图上画了三个方块，AI大概率会生成三个区块；你在方块里写了“产品图片”几个字，AI会知道这里放一张图；你画了一个圆圈并标注“这里点一下弹窗”，AI会给它加上点击事件。但如果你指望连圆角的弧度、字体的粗细都要一模一样，那就不现实了——那是后续细调的事。
这个认知特别重要，它决定了你对结果的预期管理和整个流程的沟通策略。把草图当成“粗草案”，而不是“施工图”，后面的一切都会顺利很多。
2. 核心细节解析：草图怎么画、提示词怎么给
2.1 一张能用的A4草图长什么样
我见过很多人倒在第一步，就是他们拿一张空白A4纸发呆，不知道画什么。别慌，画草图不需要美术功底，你只需要遵循几个原则：
第一，把页面从上到下分块画。网页是流式的，从上往下滚动。你在纸上画一个大长条代表屏幕，然后把它从上到下切成几个区域：最上面是标题栏/导航栏，中间一大块是主体内容，底部是页脚。用直尺都不用，手画就行，重点是区块边界要清楚，每个区块用虚线或框线分开。
第二，每个区块里写清楚“这是什么”。在这个区块的正中央，用文字标注。比如最上方写“标题：XX产品介绍”，中间写“这里是主打图”，下面写“这里是一段介绍文字”，再下面写“按钮：立即购买”。用铅笔写字就好，不用管字丑不丑，能认就行。
第三，用箭头和注释说明交互。比如你在页面上画了一个按钮，然后用箭头指向旁边空白处，写“点击后跳转到下单页”或“点击后弹窗显示优惠券”。这一条信息对AI来说很重要，因为在代码里，“点击之后干什么”对应的是JavaScript，没有说明，AI只会生成一个不会动的按钮。
第四，把颜色、风格的偏好写在纸的边缘。你也可以不画具体颜色，但在页面空白处补一句“整体色调偏蓝，简洁风格，圆角按钮”。这比在对话框里再打一遍要省事，因为AI在处理上传图片时，会一并识别纸面上的所有文字信息。
注意：画草图的时候尽量用A4整面纸，不要用小纸条。区块太少，AI能生成的细节也少；你画得越细，AI生成的页面越接近你想要的。但也不要画得太密，好几层内容挤在一起，AI反而识别不了，控制在五六个大区块最合适。
2.2 提示词怎么给：一个能直接套用的模板
上传草图后，跟豆包说什么？“就按这张图做”这五个字虽然没错，但效果一般。我建议你按这个模板给提示词，分四层：
第一层：总任务。
“请根据我上传的这张草图，生成一个完整的HTML网页，包含HTML、CSS、JavaScript，所有代码都放在一个.html文件中，不要用外部框架。”
第二层：布局说明。
“页面整体结构按草图布局：顶部是导航栏，中间分为左图右文两个区块，底部是两个按钮。”
第三层：交互要求。
“点击底部第一个按钮后，下方显示一段产品详情文字；点击第二个按钮后，弹出一个提示框。”
第四层：风格约束。
“整体风格简洁、现代，主色调使用蓝色系，按钮做成圆角，字体大小适中，页面适配电脑和手机。”
这个模板的精髓是让AI知道自己只需要关注这一个HTML文件，且明确交互逻辑和风格方向。很多人抱怨AI生成的页面不是自己想要的，就是因为只给了第一层总任务，AI只能凭图片里的模糊信息自由发挥。
2.3 为什么提示词要这么写？背后的原理
我说下我的理解：AI对上传图的理解是“视觉理解”，它能认出图里有哪些元素，但它不知道你心里对每个元素变态的要求。你给它一个板块，它不知道该用Flex布局还是Grid布局；你给它一个按钮，它不知道点击之后是跳转还是弹窗。所以提示词的本质，是替AI补齐它没法从图片中读取的信息。
“所有代码放在一个.html文件中”这个要求，是最容易被忽略但极其关键的。因为一旦AI把代码拆成多个文件（比如CSS单独一个、JS单独一个），非程序员根本不知道这些文件怎么放在一起才能跑起来。一个.html文件，双击就能在浏览器里打开，这才叫“拿到能点的网页”。
“不要用外部框架”也是同理。像Bootstrap、React这些框架，对程序员来说很好用，但对不会写代码的人就是个灾难：你得有Node环境、得跑构建命令、得处理一堆依赖。我见过新手被这一步劝退的，所以从一开始就堵死这条路。
“适配电脑和手机”这个要求，很多人以为无所谓，其实影响很大。AI生成的页面默认可能是固定宽度的，在手机上看会被缩放得特别小。你提前告诉它要适配手机，它就会用响应式布局（比如用Flexwrap、媒体查询），这样你发给别人的时候，不管对方用什么打开都能看。
2.4 二十分钟的时间到底是怎么分配的
标题说“二十分钟后拿到能点的网页”，很多人以为是AI生成就用了二十分钟。其实AI生成代码只需要一两分钟，剩下的大部分时间都在沟通调整。我把二十分钟拆得细一点，你就知道节奏感了：
- 0-5分钟：画草图。5分钟之内完成，不要纠结细节，画得再丑都没关系，重要的是把区块、文字注释、交互需求写全。
- 5-8分钟：拍照并上传。拍照的时候保证光线充足、纸面平整，不要斜着拍，避免阴影遮挡字迹。
- 8-10分钟：输入提示词，第一次生成。等待的时间可以顺便想一下，如果页面出来了，自己最想改的地方是哪里。
- 10-15分钟：第一轮修改。通常第一次生成的结果都会有各种问题：字太小、间距不对、颜色不符、按钮不居中。你需要逐条提出修改意见。
- 15-20分钟：第二轮修改并收尾。把修改点集中在一起，一次性提给AI，让它整体修改，最后复制代码，保存成HTML文件，双击打开，确认能点。
这个节奏不是固定的，但如果你能在前面三步做扎实，后面基本是丝滑的。反之，如果草图模糊、提示词随意，后面可能会进入“AI生成-你不满意-重新描述-再生成”的无限循环，二十分钟远远不够。
3. 实操过程：从A4草图到能点的网页，全程复现
3.1 准备工作：你需要哪些东西
工具清单非常简单：
- 一张A4白纸、一支笔（铅笔或水笔都行，但字迹要清晰）。
- 手机或平板（用来拍照和上传图片，手机装了豆包App最好）。
- 一台电脑（用来保存、打开最终的HTML文件）。没有电脑的话，手机浏览器也可以打开HTML文件，但编辑和保存不太方便。
如果你打算做的是少量内容的页面，比如个人介绍页、店铺菜单页，直接生成一个HTML文件就够了。如果后续想把这个页面发给别人看，我强烈建议以附件形式发送，或者申请一个免费的网页托管空间，这些下面会细说。
3.2 画草图、拍照上传的具体操作
画草图的时候别空想，我每次都是先问自己一个问题：“这个页面最核心的一个功能是什么？”比如我做一个小店菜单页，核心功能是“让顾客扫一眼就知道招牌菜是什么”；我做一个活动报名页，核心功能是“填写姓名和手机号然后提交”。想清楚这个之后，往页面上放的所有区块都围绕这个核心功能展开，草图的布局自然就有逻辑了。
拍照的时候有一个技巧：尽量让纸面占满屏幕，不要拍出太多桌面背景，否则AI识别时会把背景杂物也算进去。同时不要在纸面上留大面积空白，否则AI拿不准那块空白的间距应该是多少。
上传草图到豆包之后，在对话框里先发一句话：“这是一张网页草图，请帮我分析一下页面有哪些区块。”等AI回复它的分析结果之后，你再输入上面那套生成模板。为什么多这一步？因为你可以先检查一下AI有没有误读你的草图。比如我经常发现AI把“图片”识别成“地图”，把“按钮”识别成“标签”，早期直接让它生成，出来的就全错了。先让它分析一遍，你还能及时纠正。这一步多花不了三十秒，却能省下后面大改的时间。
3.3 生成、保存、预览：一个HTML文件怎么打开
豆包生成完代码之后，会给你一个很长的代码块，代码块里有一段标注为html的内容。在豆包的输出界面上，你注意到右上角会有一个“复制”按钮，直接点它，把全部代码复制下来。
然后在电脑上新建一个文件夹，名字随意，比如“my_page”，在里面右键新建文本文件，文件名改成 index.html。注意Windows很容易把后缀名隐藏，你建出来的可能是“index.html.txt”，那样双击就是打开记事本而不是浏览器。那怎么确认后缀对不对？你右键看文件属性，类型显示“HTML Document”就对了。如果你看不到后缀名，就在文件夹的“查看”选项卡里勾选“文件扩展名”。
把复制好的代码粘贴进去，Ctrl+S保存，然后双击这个index.html文件。浏览器会自动打开，你就能看到网页了。到这一步，都还没用到任何“编程工具”，全程只用了记事本。
这也暴露出一个小问题：如果豆包生成的代码很长，复制粘贴到记事本会有卡顿，尤其几千行代码时。我建议用记事本或系统自带的“轻量编辑器”，不要用Word，Word会因为格式问题往代码里塞隐形字符，导致浏览器打不开。如果你愿意，安装一个免费的“Visual Studio Code”会更舒服，但不需要科技就能通过别的方式替代——我很多项目直接用记事本也完成了。
3.4 三个高频修改场景：改文字、改图片、改交互
第一次打开生成的网页之后，你一定会觉得哪里不对劲。别慌，逐条记录，集中修改。
改文字。直接复制页面里的中文文字，在豆包对话框里说：“把页面里的‘XXXX’改成‘YYYY’”。豆包会定位到对应位置并重新输出完整代码，你只需要把旧代码替换成新代码就行。有人问能不能只让豆包给“修改后的那一段”，但对新手来说，我建议让它输出完整文件，因为只给片段，你不知道怎么替换，容易把文件改坏了。
改图片。AI默认生成的图片位置通常是它自己找的一张占位图，比如一个风景图或灰色图块。你需要把图片地址换成你自己的。最简单的方式是：把你想用的图片文件放在和index.html同一个文件夹里，然后把图片地址写为“xxx.jpg”这种相对路径。注意文件名不要用中文，不要有空格，用字母和数字组合。然后在豆包对话框里说“把图片地址改成 image.jpg，图片放在和网页同一个目录下”。它会在代码里做替换，你把最新代码复制回去即可。
改交互。比如你点击按钮后想要弹出二维码，或者点击后跳转到淘宝链接。直接在豆包对话里描述：“把第一个按钮的点击行为改成弹出二维码，二维码用这张图”，然后把二维码图片也上传给它。它会更新代码。这个过程中你不需要理解任何JavaScript语法，只需要精确描述“用户看到什么-点击什么-结果是什么”。
注意：每次修改后，记得覆盖保存index.html，然后刷新浏览器页面（按F5或Ctrl+R），这样才能看到最新效果。如果刷新半天看不到变化，检查一下是不是刚才复制粘贴的时候漏了整段代码。
3.5 怎么把网页变成一个“能发出去”的东西
本地双击就能打开的网页，严格来说还只是你电脑上能用的。如果要把网页分享给别人，一般人想到的是“把HTML文件发过去”，但在微信、QQ里传输HTML文件经常被当风险文件拦截。我的做法是：
- 方法一：压缩包发送：把index.html和所有图片文件放进一个文件夹里，右键压缩成zip，再把zip发出去。对方解压后双击index.html就能看到网页。这个方法最简单，但要求对方用电脑操作，手机上看不了。
- 方法二：FTP上传到免费空间：有一些静态网页托管平台，上传压缩包或文件后就能得到一个网址，别人用手机点网址就能直接看。这需要注册账号、建站点，流程稍长一些，但效果最好。核心好处是不用折腾服务器。
- 方法三：生成在线文档再转网页：如果你只是临时给别人看一个页面效果，可以先把页面内容做成图片或PDF发过去，但这就失去了“能点”的交互感。
我自己的习惯是：项目刚起步，就用方法一，把HTML打包发过去，快速验证对方对页面方向的反馈；等确认页面没问题、需要长期展示时，再用方法二部署上线。这个方法你不需要立刻都掌握，先学会第一个，至少你“拿到能点的网页”这个目标是100%实现了。
4. 常见问题与排查技巧实录
4.1 生成的网页一片空白，双击没反应
这是新手遇到最多的问题，九成原因不是AI代码写错了，而是文件操作层面的事。先做三个检查：
第一，确认文件后缀名是.html，不是.html.txt。打开文件夹选项，勾选“文件扩展名”，如果看到index.html.txt，直接重命名去掉.txt。
第二，确认你粘贴代码的时候，有没有贴完整。豆包如果输出很长，可能分了好几个窗口，你只复制了第一段。检查一下代码末尾有没有 ，没有就是没贴完。
第三，确认浏览器是否拦截了本地脚本。极少数情况下，浏览器会因为安全设置拦截本地HTML文件中的JavaScript。解决方法是把文件放到一个文件夹里再用浏览器打开，而不是直接在开发工具里预览，更不要用IE老古董浏览器。
4.2 页面布局乱了：图片太大、文字重叠
如果你的页面打开后，图片撑破了布局、文字叠在一起，不要尝试自己改代码。你只需要在豆包对话里描述现象，比如“页面中图片叠在了文字上面，我想让图片占左侧三分之一宽度，文字占右侧三分之二，右侧文字不要被盖住”。AI会重写CSS。你要记住，你负责描述画面，AI负责实现布局，这个分工不要乱。
我常见的一个问题是“生成之后在电脑上看着挺好，但手机上看就是乱的”。这就是没提“适配手机”的后果。补救方法也很简单，让豆包“给CSS加媒体查询，让窄屏下所有区块改为上下排列”，它会处理的。加完之后，你再从手机浏览器打开，效果通常是好的。
4.3 AI生成的“按钮能点，但没有反应”
很多人的页面是这样的：按钮看起来就是个按钮，鼠标移上去会变色，但点了之后没任何事情发生。原因就是草图和提示词里没有告诉AI“点了之后要做什么”。AI默认生成按钮只有样式、没有行为。
解决办法：在豆包对话里补指令，“点击这个按钮之后，我希望弹出一个提示框，具体内容是‘报名成功’”，或者“希望页面跳转到某某链接”。说清楚之后，AI会补上对应的JavaScript代码，你再刷新页面就能点了。
心得：我后来复盘发现，一个靠谱的交互描述，至少要包含“用户在哪里点击”和“系统怎么回应”两件事。比如“点击右下角的红色悬浮按钮，页面底部滑出联系方式区域”，这样AI就能轻松落地。
4.4 草图太丑、AI识别跑偏怎么办
“AI把我的三个按钮块识别成了三个标签页”，这种误读非常常见。遇到这种情况，不要重新画草图，直接在对话里纠正：“不是标签页，是三个等宽的圆角按钮，并排横放”。AI会按照你的文字描述去修正，效果通常比图更好。
如果你发现豆包识别出来的区块和草图差得太远，还有一个办法：先上传草图，让AI详细描述它看到的每个区块，然后你对着它的描述，像改错一样，一条条纠正。这个场景类似“对齐信息”，纠正完之后再让它生成，基本上能大幅提升准确率。
4.5 常见问题速查表
| 现象 | 可能原因 | 处理方法 |
|---|---|---|
| 双击HTML文件打开是文字代码 | 文件后缀是.html.txt | 重命名文件为index.html，开启扩展名显示 |
| 页面图片都显示成裂图 | 图片文件与HTML不在同一目录或文件名错误 | 把图片放在同目录，文件名用英文，并更新代码中的地址为文件名 |
| 按钮点了没反应 | 提示词没写交互需求 | 明确告诉豆包：点击什么按钮、期望什么结果 |
| 手机上看布局全乱了 | 没有响应式样式 | 让豆包补加媒体查询，窄屏改为上下排列 |
| 生成的页面里中文变成乱码 | 保存编码不对 | 记事本另存为时编码选UTF-8 |
| AI跑偏，元素类型识别错 | 草图信息模糊 | 文字纠正而非重画，用“不是…而是…”句式和AI确认 |
| 修改多次后页面反而坏了 | 复制粘贴漏代码 | 手动检查代码末尾是否完整，或让豆包重新输出完整文件 |
这个速查表建议截图保存，遇到问题先对号入座，而不是重新开始画图、重新生成，很多时候问题是操作层面的，不是思路层面的。
5. AI生成网页的更多玩法与边界
5.1 不只是单页：从草图到整个小网站的扩展思路
用“草图+豆包”跑通一个页面之后，你会忍不住想做第二个、第三个。这时可以尝试不止做一个index.html，而是做一个多页面的小网站。
我的建议是：先逐个页面画草图，逐个生成。比如做一个“个人作品集页面”，你有主页、作品页、关于页三代，就分别画三张草图，分别生成三个文件，命名为index.html、works.html、about.html。然后让豆包在主页的导航栏上把“作品”两个字改成指向works.html的链接，把“关于”改成指向about.html的链接。这样点击导航就可以在多页间切换，没有数据库，也不需要服务器，纯静态页面就是最快的落地方式。
这一个环节的核心提示词是：“导航栏里‘作品’两个字点击后跳到works.html，页面文件放在同一个文件夹下”。AI会帮你在 标签里写好href值，你不用知道什么叫href，只要文件名不写错就行。
5.2 用豆包做“组件”，比生成整站更稳定
如果你试过多次生成整站，会发现每改一个小地方，AI都可能重写一大段代码，导致你之前调好的样式“莫名其妙”变了。这个问题的根源在于，每次对话都是重新生成完整文件，AI并不会保留你之前的每一次修改记忆，只能根据对话上下文推断。
所以我建议，当你需要很多模块时，不要一次性做整张超复杂页面。把页面拆成几个独立组件，比如“顶部导航”“轮播图”“卡片列表”“底部表单”，每次让豆包生成其中一个组件的代码，然后你再把代码拼接到主页面里。这个过程本身对新手也友好，因为豆包会给你独立的代码块，你只要知道哪一段插在哪个位置就行。
你要是不放心，也可以在对话开头加一句：“只修改我要求的部分，其他部分保持原样不要动”，能有效降低“越改越坏”的概率。
5.3 AI生成网页的边界面
豆包再方便，也有做不了的事。先说结论，再用例子说明：
复杂后端功能做不了：比如用户注册登录、数据保存到数据库、支付功能。如果网页需要“记住用户的名字”或者“下单后后台收到数据”，这就超出纯前端静态页面的范围了。你需要的是后端服务，也就是常说的服务器、数据库、接口。这部分能力豆包不是完全没有，但对零基础的人讲，自己搭一套后端链路是不现实的。
实时数据依赖做不了：你想让页面显示“现在几点钟”、显示“今天天气”，这需要调用外部API，需要申请接口密钥，还需要处理跨域问题，新手折腾起来风险较高。
复杂动画效果的稳定实现看运气：比如做一个全屏3D效果或者复杂的粒子动画，AI能给你代码，但性能和兼容性未必好，老实说能做出来已经不错，但别期待达到专业特效水准。
我的建议是：把豆包的适用范围放在“信息展示、点击交互、表单提交、页面跳转”这些静态网页的核心能力上。超出这部分，先在需求阶段砍掉或者替换成替代方案，比如“让用户填表单”可以改成“点击按钮跳转到微信咨询链接”，实现难度直接下降三个等级。
5.4 把“AI生成的网页”变成持续迭代的产品
最后聊一个更长期的视角。你用草图和豆包做出第一个网页后，如果这个页面真的有用，后面一定会有很多次修改：文案变了、图片换了、功能多了。这个过程完全可以继续用“描述+生成”的方式来做，但有两个习惯值得培养。
第一个习惯，保留每次修改前的备份。把这几个版本按日期命名，比如index_0212.html、index_0213.html。改坏了也能回退，心里不慌。第二个习惯，学会用“在哪个位置的哪个元素要改成什么”这种句式来提需求，而不是模糊地说“帮我优化一下页面”。后者会让AI自由发挥，改完之后可能不是你想要的。
把这个思路持续用下去，一个不懂代码的人也可以成为“产品的定义者”，你只管画出想要的东西、描述期待的效果，AI负责实现。这种分工方式，在我看来，比传统上“学三个月前端再做页面”的路径要适合现在太多人了。
我自己实操中体会最深的一件事是，画草图把自己从“不知道怎么描述”的困境里捞了出来。以前跟开发同事沟通需求，我经常说到一半自己都乱了；现在拿着草图，纸上标着箭头和注释，对方一看就懂。豆包解决的不仅是代码生成，还顺手逼着我学会了“把想法画出来、说清楚”。这个技能，跟代码无关，但用在哪都吃香。
最后再分享一个小技巧：如果你想让生成出来的页面更有“人味”，可以在草图边缘写上几个关键词描述，比如“温馨”“绿植”“手写风”“奶茶店”，AI会尽量往那个方向靠。它没法做到十全十美，但你给的线索越多，它越不会交出千人一面的页面。试试看。
