1. 这件事是真的而且门槛低到离谱上周末我加班间隙用一张A4废纸画了个“部门羽毛球赛报名页”的草图拍了张照扔给豆包二十分钟后桌面上多了一个双击就能打开、能填姓名、能点按钮、能弹提示的完整网页。全程我只动嘴皮子和鼠标没写一行代码。这个操作听着像段子其实已经成为很多“非程序员”的日常生产力。核心就一句话豆包这类AI助手已经把“人的意图”翻译成“网页代码”这件事做到足够便宜、足够快、足够懂人话。我们缺的不再是编程技能而是把脑子里的画面说清楚、画清楚、迭代清楚的能力。这篇内容适合完全不想学编程、但又临时需要做网页的人比如社团报名、个人作品展示、部门活动通知、产品原型示意。也适合已经用过AI聊天、但还没试过“草图驱动开发”的朋友。我会把整条链路拆开来讲为什么一张草图就够、怎么喂给豆包、中间怎么调、踩过哪些坑以及更重要的——为什么这件事能成。2. 核心思路拆解一张草图为什么能变成网页2.1 草图是最高效的“需求说明书”很多人觉得AI生成网页应该靠打一大段文字把需求描述清楚。但真做过你就知道用文字描述页面布局有多痛苦。你要说“顶部一个大横幅底下左边是表单右边一个列表”听的人可能懂但AI理解时容易出现歧义横幅有多高表单和列表是横排还是竖排哪个占大头口头描述一个三维空间里的东西效率其实很低。但画草图就不一样了一张A4纸上方框套方框、箭头连箭头布局关系一目了然。这本质上是把“视觉语言”直接交给AI它的多模态识别能力会把方框识别成区块把箭头识别成交互关系把旁边写的字识别成文案或功能说明。我用的是手边一张打印过的A4纸背面圆珠笔画的线条歪歪扭扭还涂改过几笔。拍照前我甚至担心太潦草AI看不懂结果第一版布局就八九不离十。所以别纠结画工重点是画清楚“有哪些区块”和“区块之间什么关系”。2.2 豆包在整条链路里到底干了什么豆包在这里承担的工作本质上是一个“全栈前端团队”的压缩版。它接收图片和文字指令后会完成四件事结构规划判断页面需要哪些区块比如导航、标题、表单、列表并且规划HTML文档的层级结构。交互实现识别出哪些地方要“能点”给按钮绑定点击事件给表单设置输入校验给弹窗写显示逻辑。视觉设计根据需求描述设定配色、字号、间距、圆角把这些用CSS实现出来。兼容适配生成移动端和电脑端都能用的页面自动加入响应式布局代码。换句话说传统流程里需要设计师、前端工程师、测试干的事现在在一个对话框里就完成了。你只需要给足上下文信息剩下的它来处理。2.3 整条流水线的三个关键环节我把这条流水线总结成一个公式好看的草图 清晰的文字上下文 快速的迭代反馈 可用的网页。好看的草图不一定漂亮但必须能看到区块划分和箭头指向。清晰的文字上下文除了图片本身还要告诉AI“这是什么页面”“给谁用”“按钮点了以后要干什么”。快速的迭代反馈第一版几乎不可能完美你需要会截图、会描述问题、会说“再改一下”。三个环节每个都有坑后面我用完整的实操过程来展开。3. 二十分钟实操全记录从纸到能点的网页3.1 第一步认真画好这张A4草图很多人以为草图是随手乱涂其实有讲究。我建议按这个顺序来画先画大区块再画小组件。拿出一张纸先把页面的整体框架画出来顶部是什么区中间分几栏底部有没有按钮栏。把大的方框定下来再往每个方框里补细节。每个区块写一行字说明。光画个方框不行你需要在框边上或框里写清楚这块是什么。比如我画了顶部一个横条旁边写着“标题春季羽毛球赛报名”左边一个竖长条里面画了两个输入框的样式旁边标注“姓名部门”右边一个更大的框标注“已报名名单”底部一个长条按钮“立即报名”。写不要求好看草字都没关系AI识别的是关键词。用箭头标出交互关系。我在“立即报名”按钮旁边画了个小箭头指向一个气泡框写了“点这里 → 弹窗提示报名成功”。这一步非常关键它告诉AI这里要有交互不是静态界面。把页面标题和重要文案写在显眼位置。因为AI没办法百分百识别潦草的手写汉字所以我在纸张下方空白处又整齐写了一遍关键文案“春季羽毛球赛”“4月12日下午两点”“综合馆三楼”“姓名”“部门”“立即报名”“已报名名单”。相当于给AI留了一份“标准答案”它理解了这些词之后生成出来的文案就不会跑偏。3.2 第二步把草图喂给豆包的“正确姿势”拍照片这一步我吃了不少教训。第一张照片是站在桌子旁边俯拍的纸张倾斜阴影正好盖住了左下角的区块。豆包把阴影识别成了深色色块页面底部多了一块深色区域。第二次我学乖了把纸贴着墙面、正对着手机镜头拍的光线均匀四个角都在画面里效果立刻变好。拍好照片之后打开豆包网页版把图片拖进输入框。这里有个很容易被忽略的点图片上传后对应对话框会自动附上一段系统生成的图片描述但这段描述往往是“图中的内容可能包括……”。你要做的是继续追加文字上下文而不要直接就说“生成网页”。我用的提示词模板分享给各位你是资深前端工程师。我完全不懂代码但我有一张手绘草图图片已上传。 请严格按图里的布局帮我生成一个可直接运行的HTML网页要求 1. 输出完整的单文件HTML代码CSS和JavaScript都要写在文件内部不要引用外部文件 2. 页面标题为“春季羽毛球赛报名”主色调用青色系风格干净清爽 3. 表单包含姓名和部门两个输入框点击“立即报名”按钮后弹出成功提示并把报名信息追加到右侧“已报名名单”列表中 4. 右侧名单区域高度固定超过后显示滚动条 5. 适配手机屏幕图片和文字不要错位 6. 不要解释思路直接把完整代码给我。这段提示词看着啰嗦实际上每一句都有用。第一条限定了输出格式避免它分几段讲原理最后只给一段代码。第二条锁定了视觉方向和主题文案。第三条是交互逻辑按钮要干什么、数据往哪走。第四条是我从第一版失败中总结的首次生成的名单区域没有固定高度几个人名就撑破了版面。第五条是移动端适配现在大量场景是在手机上打开页面非响应式的老写法直接淘汰。第六条是减少废话直接干活。3.3 第三步拿到第一版页面之后的必要处理豆包生成完代码之后界面上会有“复制代码”的按钮。我通常先复制到一个空白的新建文档里然后另存为“baoming.html”注意后缀一定是.html而不是.txt。保存后双击打开页面就在浏览器里跑起来了。第一次打开我看到的页面和草图布局几乎一致。但有一个问题顶部预留的横幅区我在草图上画了一个图但网页上这块区域是空白的。原因很简单我没有提供图片文件AI只能用CSS占位。解决办法是让它做一个渐变背景加装饰性文字标题就当横幅了。这是整个流程里最常见的一类修改AI生成的是“逻辑正确”的页面但视觉细节需要你告诉它“用什么代替什么”。你把它当成一个外包的实习生就好它不会主动问你要图片也不会擅自做主放一张图上去你要主动说。3.4 第四步让网页真正“能点”的交互细节静态页面生成完重点在交互。我第一次点“立即报名”按钮发现弹窗出现了文案和我在草图里写的一样。再往输入框里输入姓名和部门点击确定右侧名单列表里多了一行数据。整个数据流转是通的但我发现了两处体验问题第一姓名输入框可以输入任意字符甚至能输一个空格就提交。第二报名成功后输入框内容没有清空还得手动删。于是我又追加了一句“请给姓名和部门增加简单校验不能为空如果为空就提示报名成功后清空输入框。”豆包自动加上了校验逻辑还顺手在名单列表顶部加了“当前报名人数”的统计这个我原本没要求但属于合理的正向发挥。这个迭代过程大概用了七八分钟。每次修改我都是把问题描述得越具体越好。不要只说“按钮不好用”要说“点击按钮后如果输入框为空需要弹出提示而不是成功弹窗”。AI对具体描述的理解能力和修改成功率远高于模糊抱怨。3.5 第五步把文件变成能分享给别人的页面本地双击能打开的网页只在你自己的电脑上存在。想发给同事点一点有几种方式把html文件直接压缩发给对方对方双击也能看或者放到网盘的分享目录里。但这些方式都无法做到“发一个链接对方在手机浏览器里打开就能用”。要拿到一个真正的网页链接可以用国内主流的静态网站托管平台操作一般是注册账号、新建项目、上传html文件几十秒就能得到一个公网地址。这类平台对个人使用通常有免费额度足够支撑一个小型活动页面。部署的时候注意文件名尽量用“index.html”很多托管平台默认把首页文件识别为根目录入口如果你把文件命名为“baoming.html”访问链接末端就要带后缀。我自己的习惯是先把本地页面调试到满意再传到托管平台。这样生成链接后分享出去基本就是最终版本不用在线上反复改。4. 关于提示词和迭代的几条独家经验4.1 提示词三段式角色、任务、边界我自己总结了一套“三段式”写法基本每次都好用。第一段定义角色和任务让豆包知道自己是“资深前端工程师”任务是“根据草图生成网页”。第二段描述具体需求包括布局、配色、交互越具体越好。第三段设定边界比如“不要引用外部库”“输出完整单文件代码”“不要解释、直接给代码”。这套写法的价值在于把模棱两可的空间压缩到最小。AI很聪明但它最怕的不是问题难而是目标分散。你把边界划得清清楚楚它反而发挥得更好。4.2 一次让AI生成完整文件不要一步步挤牙膏很多新手喜欢这样问“帮我写个网页。”AI回答“你想做什么样的页面”然后来回聊好几轮才动手。实际上前面花了十分钟还在沟通需求。更高效的做法是一次性把需求说完包括草图、布局、交互、样式、适配然后说“把完整代码给我”。第一次拿到的结果可能不够完美但没有关系。完整的一版代码出来之后你只需要在现有基础上改AI不会推倒重来。这种“先整体、后局部”的节奏是二十分钟完成的主要原因。4.3 迭代修改的“截图优先”原则迭代修改时我强烈建议直接把页面截图发给豆包再配上文字说明。比如“截图里底部按钮和名单重叠了请修复间距问题”。AI对图片的解读能力很强一行字配一张截图修改命中率远高于纯文字描述。有不少人习惯把错误的代码粘回去问“这里哪里错了”。对于不懂代码的人这种操作是灾难因为你连“哪段代码对应哪个问题”都说不清楚。截图就简单直接所见即所得你看到什么就发什么它改完你再刷新页面看效果。5. 常见问题与排查技巧实录5.1 页面做得太丑三步调成想要的样子AI默认生成的页面往往比较朴素甚至有点“模板感”。这时候不要让它“重新设计一版”而是分别提视觉细节要求“标题下方增加一条青绿色渐变分隔线”“按钮改为圆角胶囊形状”“输入框聚焦时边框变成绿色”“卡片增加浅浅的灰色阴影”。我试过最有效的办法是找一个参考图发给它说“按照这个页面的配色和风格来”。豆包看参考图的审美在线风格迁移的效果比我用文字描述十条细节都好。5.2 按钮点了没反应先看两处地方如果生成的页面点按钮没反应九成是两种情况。一种是JavaScript代码写在了按钮元素前面导致页面加载时按钮还不存在事件绑定失败。一种是按钮类型设置错误比如没有加“typebutton”点击触发了表单默认提交页面刷新了看起来就是“没反应”。遇到这类情况我仍然是截图给豆包加上一句“点击按钮后没有任何反应请检查事件监听和按钮类型”。它自己就能定位错误通常几秒就给出修复后的完整代码。不要试图自己翻代码查找你不是程序员这本来就不是你的活。5.3 手机上打开页面错乱一定是缺了关键一行代码本地电脑上看好好的页面转到手机上就乱了、字特别小、按钮挤在一起。原因大概率是HTML文件的head里缺少视图设置代码。修复方法是让AI在head部分加入适配移动端的标签并再次强调“页面必须在手机浏览器上正常显示”。我的习惯是生成第一版时就明确要求移动端适配这样后面省事。如果已经生成完了才发现也没关系单独提一句让AI补上适配代码再复制替换整个文件即可。5.4 总感觉页面“空空的”用内容细节来填充普通页面之所以看起来像模板很多时候不是布局问题是内容太干。比如名单区域如果只有空空的几行竖线观感就差。我在迭代时让豆包预置了三条示例数据“张三—产品部”“李四—设计部”“王五—运营部”并且把字体颜色、行间距调好。再加上顶部一句文案“目前已报名8人还有2个名额”整个页面瞬间有了生气。这些细节AI不会主动给你不说它默认就是最简版。所以每次生成完先看看页面有没有“空”的地方然后把它当员工一样下达具体指令。6. 我的一点真实体会第一次用草图加豆包做出能点的网页时我最大的感受不是“AI好厉害”而是“我以前为什么觉得写网页是那么难的事”。回头想想难的不是写代码是不知道代码能干什么、不知道需求怎么说。其实把一个想法变成页面的过程本质上跟“跟装修师傅描述你想要的家”一模一样——你不需要会刷墙但你需要会说清楚哪里放沙发、哪里要有灯、哪面墙要打掉。这篇操作记录里所有的步骤你都可以原样抄作业画张纸、拍张照、复制我的提示词、迭代两三轮、部署上线。等你走完一遍大概率会发现原来自己缺的从来不是技术而是一次动手的尝试。