上周我干了一件以前绝对不敢想的事：拿一张A4纸，随手画了几块方框，拍照扔给豆包，说了一句“把这个做成能点的网页”。二十分钟后，我双击一个叫 index.html 的文件，浏览器弹出来，导航栏能点，按钮能弹窗，三张卡片各跳各的链接——一个从来没写过代码的人，真的在二十分钟里拿到了一个能用的网页。

这件事做完，我最大的感受不是“我会写代码了”，而是我终于把AI的脾气摸清了一条：草图负责表达需求，豆包负责翻译需求，我负责在中间把话说清楚。这篇就把整个过程从头到尾拆开写一遍，包括我的A4草图到底长什么样、每一步给豆包发了什么原话、中间踩了哪些坑，以及最后总结出的一套能让AI稳定产出网页的对话套路。适合所有想快速做一个落地页、活动页、展示页，又暂时不想碰代码的朋友参考。

1. 为什么一张A4草图能变成能点的网页

1.1 豆包到底看懂了什么

先解决一个很多人好奇的问题：豆包是凭什么看懂我那张潦草的A4纸的？

我画的东西非常原始，就是几个方框叠在一起，框里写了几个词：“导航栏”“主标题”“三张卡片”“底部版权”。字还歪歪扭扭。但豆包能处理图片输入，它会先识别照片里的线条、方框、文字，然后把它们翻译成网页开发里的语义——导航栏对应 HTML 的 header 区域，卡片对应一组可以循环排列的内容块，按钮对应可点击的元素。再配合我发的文字指令，它就能把这堆“图形符号”组装成一个完整的HTML文件，同时补齐样式和交互逻辑。

理解到这一层，你就能明白它并不是在“画”网页，而是在“翻译”需求。整个过程相当于你给装修师傅一张户型图，师傅能看懂哪里有墙、哪里有窗，但你要在图上标清楚哪里放沙发、哪里放餐桌，他才知道怎么干。草图是需求说明书，AI是施工队，中间那层“把想法转成实现”的翻译，AI帮你干掉了。

1.2 草图不是画给豆包看的，是画给你自己看的

这点特别反直觉，但非常重要。

我一开始也以为，草图是为了让AI看清楚才画的。所以我第一版画了一堆装饰性元素，给导航栏描了阴影，给卡片加了边框，还试图画了图标。结果豆包生成出来的页面，反而是被这些装饰带偏了，结构反而不清楚。后来我换了思路：草图只需要画出“页面分区”和“每个区域要放什么”，其他的都不画。

原因在于，AI对图片的理解是语义级的。它抓取的是一张纸上的大结构：上中下的分区、区域的相对大小、框里的文字描述。你画得越花，它反而被装饰细节绑架，把重点放错位置。一张干净的草图，等于直接告诉它：页面从上到下分五块，每块的职责是什么。这种信息是它最容易读的。

更重要的是，画草图的过程倒逼你把需求想清楚。你会被迫思考：这个页面到底有几块？从上到下怎么排？用户进来第一眼该看到什么？点哪个按钮该发生什么？等你把这些都理顺了，后面跟豆包对话时才知道怎么表达。我那二十分钟里，前五分钟在画图，后十五分钟全在和AI沟通确认，真正耗时间的不是画图，是“想清楚自己要什么”。

1.3 为什么选豆包：识别、生成、迭代一个入口全干完

市面上能生成网页的AI工具不少，但豆包这个流程是我目前用下来最顺的。原因有三点，恰好构成了完整的闭环。

第一，它能直接上传图片。这是做“草图转网页”的基础条件，没有这一步，你得把草图内容用文字重新描述一遍，信息损耗非常大。第二，它能在对话里直接产出完整可运行的HTML代码，不用切到别的工具去拼接，而且支持一键复制。第三，也是最关键的一点，它允许我把生成页面的截图再发回去，让它对着截图修改。这一点看着不起眼，实际用起来效率翻倍，后面我会专门讲。

不是说其他工具不行，而是从“草图→第一版→预览反馈→修改→交付”整个链条，我用豆包是一体完成的。对一个不懂代码的人来说，少切换一次工具，就少一次出错的机会。

2. 动手之前：草图这样画，AI读得最省力

2.1 草图的基本框架：页面分几块，先画出来

很多人拿到A4纸不知道怎么下笔。我的方法是：先把纸竖着放，想象它就是一个手机屏幕或者浏览器页面，然后在上面从上到下画几条横线，把页面切成几块大区域。

为什么要竖着画？因为绝大多数网页内容都是从上往下阅读的，顶部是导航，中间是主体，底部是页脚。AI生成的HTML也是这种从上到下的文档流结构，你草图的顺序，天然对应它代码的结构。先把“从上到下有哪些块”定下来，比纠结具体尺寸重要一百倍。

具体画法可以这样拆：

• 顶部画一个横条，写“导航栏”，里面再写：Logo、首页、关于、联系、登录按钮。
• 中间画一个大方框，写“主视觉区”，里面写：一句大标题、一句副标题、两个按钮。
• 再往下画一条横着的矩形区域，里面分成三列，写“三张卡片”，每张卡片标注：标题、简介、按钮。
• 最底部画一条窄横条，写“版权信息”。

整个过程五分钟都用不到，也不需要尺子，歪一点完全没关系。关键是区域之间的相对位置要清楚，哪个在上面，哪个在下面，哪个左右并列，AI才能理解你想要的布局逻辑。

2.2 框里写注释，等于给AI发提示词

这是整个流程里性价比最高的一步：在方框里写字。

你画完一个大区块后，不要在边上另外列说明，直接把文字写进框里。比如导航栏那个框里，就写“顶部导航：Logo / 首页 / 关于 / 联系 / 登录按钮”；主视觉区那个框里，就写“主标题 + 副标题 + 两个按钮：立即咨询、查看案例”。这些文字会被豆包直接读出来，变成页面里真实的文案和结构标注。

为什么要写进框里？因为AI识别图片时，会把方框和内部的文字当成一个整体语义块。如果你把说明写在图纸角落，它不一定知道那段文字对应哪个区块。把注释直接写在框内，等于给了它一份带坐标的需求文档。

这里我还会配合一条提示词模板，上传草图后直接发给豆包：

你是一名前端工程师。我上传了一张网页草图，请严格按草图结构生成一个HTML文件。要求：使用内联CSS和JavaScript，不依赖外部库，双击可以直接在浏览器打开；布局尽量还原草图；所有按钮都要有可点击的响应，未指定链接的按钮先弹提示框；文案先用占位内容，我后续再替换。

这段提示词基本把“角色、任务、交付格式、交互要求、内容策略”都覆盖了。你不需要懂代码，只需要把这句话复制发过去，豆包就按这个标准来干活。

2.3 我的A4草图长这样

很多人想看真实草图是什么样，我用文字还原一下那天的布局（下图不是代码，只是用文字描述草图结构）：

| 顶部导航栏：Logo｜首页 关于 联系｜登录按钮 | | 主视觉区：大标题“AI×日常” + 副标题 + [立即咨询] [查看案例] | | 卡片区：卡片1：选题工具/点我试试 | 卡片2：写作助手/点我试试 | 卡片3：灵感库/点我试试 | | 底部版权：© 2025 Demo |

就是这么简单的四层结构。拍照时有一个技巧：把纸平放在桌面上，手机正对着纸拍，别斜着拍。斜拍会产生透视变形，AI会把变形当成设计的一部分，生成出来的页面就会歪。光线均匀也很重要，阴影太多会让AI把阴影识别成灰色色块。

2.4 对话前准备：说清角色和产出

上传草图之前，我建议多想一步：你要的到底是“一段参考代码”还是“一个能打开的文件”？多数情况下，后者才是我们真正想要的。

所以我在提示词里特意加了“使用内联CSS和JavaScript”“不依赖外部库”“双击可以直接打开”。这三句话是给结果兜底的。默认情况下，AI可能会生成一个需要构建工具的复杂项目，对不懂代码的人来说根本跑不起来。明确要求它输出一个自包含的HTML文件，你复制保存后双击就能看到页面，这是最稳妥的方案。

补充一个细节：告诉豆包“你是一名前端工程师”不是客套，确实有用。角色设定会改变它的输出风格，它会更倾向于按工程标准交付完整可运行的代码，而不是给你几段零散的建议。既然要它干活，就给它一个明确的职业身份。

3. 20分钟实操：从草图到可点击网页的完整流程

3.1 第一步：上传草图，一次性说清需求

实际操作比想象中简单：打开豆包网页版，在输入框左侧找到图片上传按钮，把A4草图照片传上去，然后在对话框里输入那句话：“帮我根据这张草图做一个网页，要求能直接在浏览器打开，严格还原草图布局，文字先用占位内容，按钮要有点击效果。”

这里有个很重要的习惯：一次把需求说完。不要只发一张图然后说“做吧”，AI不知道你哪个框是重点、哪些元素必须保留。你一次性说清楚“布局还原、文案占位、按钮可点”三个要求，它第一版的完成度就会高很多，后面要改的就少。

第一版生成很快，几十秒就出来了。我会在豆包的结果里找到“复制代码”或者“查看完整代码”的入口，把全部代码复制下来，在电脑上新建一个文本文件，把内容粘贴进去，然后把文件名改成 index.html。

这里有一个检验方法：右键点击index.html，用浏览器打开。如果页面正常显示，说明这版能用了。如果打不开，大概率是复制的代码不完整，回到豆包对话里重新复制一次即可。

3.2 第二步：让豆包先出整体结构，别急着要功能

第一版出来之后，我先不看细节，先看宏观结构：页面从上到下分几块、每块内容对不对、导航栏有没有在最顶上、卡片是不是一行三个。

我那次生成的第一版，导航栏和底部版权都对，但三张卡片挤成一行，字都快叠在一起了。这时候我没有一上来就说“好看一点”，而是给了它一个非常具体的指令：“卡片区域改成一行三个、等宽排列，间距大一点，卡片内容居中。”

注意，这一步是“小修”而不是“推倒重来”。只要整体结构方向没错，细节问题就让AI在现有代码基础上调整，这样效率最高。只有结构完全不对的时候，我才会让它重新生成一版。

3.3 第三步：截图看效果，圈出要改的地方

这是整套流程里我最想强调的一个技巧：把页面截图发回给豆包看。

豆包对话里可以继续上传图片，所以我会把浏览器里的页面截个图，直接发回去，然后配上文字反馈。比如我会说：“标题下面两行文字连在一起了，增加行距；按钮颜色换成深蓝色；卡片里的文字有点偏左，改成居中。”

为什么非要多这一步？因为如果不用截图，光靠文字描述，AI对“左边”“挤压”“不好看”这些词的理解和你完全不一致。你描述十句，不如给它看一张截图，它能直接识别视觉问题，修改的准确率大幅提升。

这一步直接决定你能不能“二十分钟搞定”。我实测下来，用截图反馈，一轮修改基本就到位；如果纯靠文字描述，至少要来回三轮以上，而且改完往往还有偏差。

3.4 第四步：优化交互细节，让“能点”真正成立

所谓“能点的网页”，不只是链接能跳转，还包括按钮点击后有反馈。这一步需要给豆包交代清楚交互逻辑。

我的原话是：“给页面里所有按钮加上点击事件，有链接的去对应链接，没有指定链接的，弹一个提示框，内容写‘功能开发中’。”

这句话里的关键在于把交互拆成“用户动作-系统反馈”的结构：用户点了某个按钮，系统应该做什么。AI对这种因果描述非常敏感，能直接生成对应的 JavaScript 事件。你不用知道代码怎么写，只要把“点了之后要发生什么”说清楚，它就能写出来。

如果网页里有导航菜单，我一般会告诉它：“导航里的‘首页’指到页面顶部，‘关于’指到页面中间某一块，先用占位符#代替，后续再改。”这是为了让页面即使没接真实业务，也不会出现点击无反应的情况。

3.5 第五步：导出文件并审查三项基本功能

代码生成且调整到满意后，最后的收尾工作有三个：导出、保存、验收。

导出就是把完整代码复制到 index.html 文件里，这一步上面已经说过。保存的时候建议在文件名里加个版本号，比如 index_v2.html，方便回滚。验收时我不看代码，只看三件事：页面打开不报错、导航能点、按钮有反馈。只要这三项通过，这个页面就已经是一个能交付的成品了。

如果后续想把这个页面发给别人看，可以考虑用免费的静态托管服务部署一下。具体操作不复杂，选一个支持静态网站的托管平台，把 index.html 传上去就能得到一个链接。但对大多数人来说，本地双击打开，已经足够解决个人使用场景的问题了。

4. 常见问题与排查技巧实录

4.1 页面布局乱、元素错位怎么办

我遇到过的第一个问题是：草图上明明把卡片画成三列，生成出来的页面却挤成一行，而且整体偏左。原因通常是两个：一是照片斜拍导致的透视变形，让AI误以为卡片区域有倾斜关系；二是草图里卡片区域太小，AI没有识别出“三个并列方块”的结构。

针对照片问题，重新拍一张正面照片最省事。针对结构识别问题，我用了一句比较高成功率的指令：“请用flex布局让这3个卡片在一行内自适应排列，卡片内容居中，间距一致。”AI对flex这类成熟的布局方案非常熟悉，只要让它用这种方案去实现，错位问题基本一轮就能解决。

还有一个通用兜底办法：直接告诉AI“页面宽度自适应，内容居中，左右留边距”。这句话会让它自动调整页面整体布局，避免所有元素都贴到浏览器边缘。

4.2 按钮点了没反应，交互失效

按钮没反应是最常见的问题，本质是AI生成的JavaScript里，事件绑定和按钮的ID或类名没有匹配上。你不懂代码也能排查，方法就是直接问它：“我点击按钮没有任何反应，请检查按钮的id和点击事件绑定是否一致，修复后输出完整代码。”

这里有一点很重要：不要在同一个对话里反复追问“为什么没反应”“还是没反应”。AI反复修同一段代码时，容易越修越乱。我的做法是开一个新对话，把最新的完整代码贴回去，再用上面那句话重新提一次，通常一次就能修好。

为什么开新对话有效？因为新对话上下文干净，AI是站在你提供的完整代码基础上分析，而不是在原来的长对话里“猜”哪里改坏了。

4.3 改一处崩三处，代码越改越乱

当你连续让AI修改超过三轮之后，质量会明显下降。有时候只是改个按钮颜色，结果整段样式全乱了。这是长上下文带来的问题，AI在处理大量修改历史时，容易把早期的某个片段错误地当成最新状态。

我的应对方法有三个：

• 每改完一版，就把代码保存为一个新文件，保留至少三个版本作为备份。
• 每次对话里只提一个明确的修改点，不要一次说三个以上问题。
• 修改构建在“最近一次完整版本”上，不要追问“之前不是改过这里吗”。

这样做的逻辑很简单：把AI当成一个记性不太好的同事，永远给它看最新的完整状态，而不是指望它记住历史记录。

4.4 豆包生成的文案不是我要的

AI默认会生成一套看起来很专业的营销文案，但它完全不知道你的业务背景，这些内容七成不能直接用。这时候别急着骂它，它只是缺少信息。

解决办法是把你想要的内容直接补给它。比如我会说：“把主标题改成‘零基础AI工作流实战’，副标题改成‘画一张草图，20分钟上线一个能点的网页’，第二段介绍替换成：面向内容创作者的落地页模板。”让它当打字员用，它非常擅长执行这种替换任务。

如果想要少改文案，最好的方式是在草图里就把文案写进框里，拍照上传时那些字会被直接识别成页面文字。草图上的字越接近真实文案，后期替换的活越少。

4.5 常见问题速查表

我把实操中大概率会遇到的问题整理成一张速查表，方便你对照处理：

5. 哪些页面适合这么干，哪些千万别硬试

5.1 适合用草图生成的网页类型

做完这个项目后，我又试了几个场景，基本摸清了这种方式的适用边界。最适合的是结构清楚、交互简单、没有后端逻辑的静态页面。

• 活动落地页：一张主视觉、一个报名按钮、几条流程介绍，画草图十分钟，生成二十分钟。
• 个人作品集或名片页：顶部介绍，中间作品卡片，底部联系方式，效果很干净。
• 课程详情页：课程大纲、讲师介绍、价格区间、报名按钮，AI生成的排版非常稳定。
• 内部工具小页面：比如团队里用来做配置体检的表单页，输入几个参数，点击生成结果，AI完全能搞定。

我身边有个朋友开小培训班，以前想做个课程报名页，外面找人报价一两千。后来我用这套方法帮他画了一张草图，半小时内生成了一版能打开的报名页，虽然还谈不上精致，但用于朋友圈分享和意向用户查看，完全够用。

如果你有自己的专业领域，比如你懂Python量化策略，想给别人展示一个可视化的策略参数页面，也可以让豆包先生成前端框架，后续再用真实数据对接。这种方式能把你原本不会做的“表达层”补齐。

5.2 不适合的场景：别在复杂系统上硬磕

AGI再强，也要承认边界。下面这些场景我不建议你用草图让AI硬扛，不然会浪费一下午最后放弃。

• 带账号登录和权限控制的系统：涉及用户体系、会话管理和数据库，不是单个HTML能承载的。
• 有大量数据存储和实时交互的应用：比如电商结算、实时聊天、订单管理，需要后端和数据库支持。
• 高度定制化的复杂业务逻辑：比如审批流、多角色权限、复杂表单校验，AI生成的代码很难直接达到生产要求。
• 需要原创品牌视觉设计的页面：AI做出来的是“通用好看的皮”，不是品牌差异化的设计。

遇到这些需求，我建议换个思路：让AI先生成静态原型给产品或开发看，或者先把整体视觉定下来，后端逻辑再找专业工具来接管。草图驱动适合“从0到1快速看到东西”，不适合“把一个系统从1做到100”。

最后再分享一个我个人现在一直在用的工作习惯：我把这套草图对话模板保存成了固定的一段文字，每次做新页面直接在豆包里复用，只需要改中间的内容描述。包括“你是前端工程师”“严格按草图结构”“用内联CSS和JS”“按钮要加点击事件”“截图反馈时圈出位置”这五个要点。我的体会是，和AI协作这件事，真正值钱的不是你会不会写代码，而是你懂不懂怎么把脑子里模糊的想法，一步步逼成一个它能听懂的清晰需求。而这套方法，恰恰是每个不写代码的人也能学会的。