去年有个朋友临时拉我帮忙说社区读书会要做个报名页活动三天后开始问我会不会做网页。我嘴上说行心里其实完全没底——我是真不会写代码。那阵子豆包挺火我就想试试把需求按我脑子里想的样子画在A4纸上拍照发给豆包让它直接生成一个能打开、能点击的网页。结果从画图到拿到能用的页面大概二十分钟。这个过程不涉及任何神乎其神的操作也没有要我去理解什么编程语法就是画图、拍照、说人话、跟着提示改这么一路下来的。这篇文章把完整过程拆开讲包括草图上该画什么、提示词怎么给、遇到点了没反应这类问题怎么让豆包修以及我后来反复用这招做不同页面时踩过的坑希望对和我一样不写代码、但需要快速拿到可交互网页的人有帮助。1. 为什么一个外行靠一张草图真能让豆包写出网页先说结论这件事能跑通靠的是豆包同时具备视觉理解和代码生成能力。你把一张画得歪歪扭扭的A4纸拍给豆包它能认出图里哪块是标题、哪块是按钮、哪块是表单你再补几句描述它能把这些信息翻译成HTML、CSS和JavaScript最终输出一个浏览器里能直接打开的网页文件。1.1 豆包到底看懂了什么我第一次拍草图的时候也怀疑这玩意拍过去它真的能看懂吗实际上豆包对草图的识别比我预想的要宽容得多。它不需要你画得像UI设计稿只要你把区块位置、大致形状、文字备注写清楚它就能推断出结构。比如我画了一个方框然后在里面写这里放活动海报又在下面画了几个小方框写报名按钮查看地点豆包理解这些方框是一个个模块而不是真的要去识别你的美术水平。这里有个关键认知豆包不是看懂了你的画而是把画当成一张需求草稿结合你补充的文字描述推演出一个完整的网页结构。所以草图画得丑完全没关系真正重要的是信息清晰——哪个区域是头部哪个区域是主体哪些文字可以点击哪些文字只是说明。1.2 能点的网页最简形态一个单文件就够很多人以为做个网页要装一堆工具、买服务器其实最简单的方式是把所有内容塞进一个HTML文件里。HTML负责页面结构CSS负责样式和布局JavaScript负责交互行为——比如点击按钮弹出提示、表单提交时给个反馈。这三个东西可以全部写在同一个文件里用浏览器双击就能打开不需要任何安装和依赖。我第一次让豆包生成的就是这么个单文件。它把所有CSS写在style标签里把交互脚本写在script标签里我保存为.html后缀的文件后双击就打开了一个完整页面。这对我这种零基础的人来说是最大的友好点——不需要配环境不需要跑命令行一个文件走天下。1.3 这件事的本质不是学写代码而是学会表达需求把整个流程跑通之后我才想明白我不会写代码这件事在AI时代已经不是核心障碍。障碍变成了另一件事你能不能把自己的想法清楚地描述出来。豆包不嫌弃你画图丑不嫌弃你词不达意它只是需要足够的信息来生成你满意的页面。你给的草图越具体补充的文字越明确它生成的网页就越接近你脑子里的样子。换句话说我的角色从写代码的人变成了提需求的人。这和找外包开发不一样的地方在于找外包你得等排期、付定金、来回沟通一星期找豆包它二十分钟内可以给你十几个版本的迭代不满意就继续改没有沟通成本。2. 一张A4草图上该画什么AI才看得懂我第一次失败的经历是画了一张A4纸上面随便画了几个圈和几条线拍照发给豆包说帮我做个好看的网页。结果它给了个通用模板跟我画的完全没关系。后来调整了画法效果立刻不一样。2.1 先把页面当成一个个方块区域来画不要试图画精细的界面你只需要画方块。拿我做的读书会报名页举例我在A4纸顶部画了一个横条标注标题区读书会报名;中间画了三个并列的方块标注活动时间活动地点活动介绍;方块下面画了一个大方块标注报名表单姓名、电话、参加人数;最底部画了一个按钮形状标注提交报名按钮。就这么简单整张图看起来就是一堆积木。豆包识别这种积木式草图非常准。因为网页本身就是区块化布局你的方块草图和实际网页的DOM结构天然对应。你画几个方块它就生成几个版块你标了上下位置它就按上下排布。2.2 给每个区域标注交互意图光画方块还不够你还要告诉豆包每个区域能不能点、点了之后发生什么。这个信息是决定网页是否能点的关键。我在A4纸的活动地点方块旁边写了点击后打开地图链接;在提交报名按钮旁边写了点击后弹出报名成功的提示;在标题区旁边写了点击返回首页。豆包拿到这些标注就会自动生成对应的JavaScript事件绑定点击、弹窗、跳转链接。这里有个实用技巧不要只在图上写可点击这种模糊词,要写清楚点击后的结果。比如点击按钮后弹出报名成功的提示框点击时间区域后跳转到报名表单。越具体生成的交互越准确。2.3 文字备注要做到像产品需求一样我在A4纸的空白处还用文字写了几个关键补充。比如页面主色调要偏暖黄色、标题字体要大、报名表单里的手机号需要校验11位格式。这些备注豆包都会读而且会认真执行。你写得越精确它就越不需要瞎猜。实用建议把这些文字备注集中写在草图的右侧或底部用箭头指向对应区域。拍照时确保所有文字都清晰光线均匀避免阴影遮挡。我自己吃过亏——有个备注被手指挡住了一半豆包生成的页面里那个模块就完全按它自己的理解来了。2.4 保存好原始草图它是迭代过程中的锚点第一次跑通后我把那张A4纸收好了。后面几次迭代每当豆包改得跑偏我就重新拍照发一次草图然后说重新按这张图来只改我提到的部分。这个动作看似简单实际上是在不断给AI拉回主线避免多轮对话后它忘了最初的需求。手绘图纸是整个流程里最稳定的需求基准线。3. 把草图翻译成提示词的方法草图是输入物但豆包不是只看图它需要你配一段文字说明。这段说明怎么写直接决定了第一版网页的质量。好的提示词不需要复杂的模板掌握一个逻辑就够背景放在前面、要做什么放在中间、约束和格式放在最后。3.1 一套我后来一直沿用的提示词结构我的提示词一般分四段角色设定给豆包一个身份。比如你是一名有五年经验的前端开发工程师。输入说明告诉它我上传了一张手绘的网页草图内容是某类页面。具体要求把草图上每个区域的交互、配色、尺寸要求逐条列出来。输出格式要求它生成单一HTML文件CSS和JS内联并且要在代码里加上注释方便我后续一行行问它。强调单一HTML文件很重要。如果不加这个限制豆包可能会拆出多个文件对零基础的人就是灾难——你不知道怎么把它们关联起来。3.2 第一个提示词的具体示例以我那次读书会报名页为例完整的提示词是这么写的你是一名有五年经验的前端开发工程师。我上传了一张手绘网页草图是一个读书会报名页面。请严格按照草图的分区布局生成一个完整的HTML文件具体要求如下 1. 顶部是活动标题区标题为春日读书会报名居中显示背景色用暖黄色。 2. 标题下方是三个信息卡片分别为活动时间、活动地点、活动介绍。活动地点文字是链接点击后跳转到地图页面。 3. 信息卡片下方是报名表单包含姓名输入框、手机号输入框、参加人数下拉框手机号需要校验11位数字。 4. 最底部是提交报名按钮点击后弹出提示报名成功我们会在24小时内短信通知。 5. 整体风格简洁清爽适合读书类活动字体使用系统默认字体即可。 6. CSS和JavaScript全部写在同一个HTML文件里并在关键代码处添加中文注释。这段提示词不复杂但信息密度很高。每一句都是豆包可以直接执行的指令没有好看大气这种虚词。3.3 为什么美观大方是最没用的描述我刚开始用豆包时特别喜欢写做一个美观大方的页面。后来发现这些词几乎不会对结果产生实质影响——因为美观太主观不同人理解完全不同。你让它美观它只会给你一个最普通的模板。有效做法是把审美需求翻译成可执行的特征词。不说美观说留白多一些主色用浅灰配墨绿标题用加粗大字号卡片圆角大一点。豆包对具体的样式词汇执行得极靠谱对抽象的主观词反而容易跑偏。用形容词之前问自己一句这个形容词对应的具体样式是什么说不出来就删掉。4. 二十分钟里我到底在做什么四轮迭代实录从拍草图到拿到能用的网页这二十分钟不是豆包一口气生成完就结束的。它更像是做一件手工艺品第一版出来我点一点、看一看、发现问题再发给豆包修改。整个流程大概经历了四轮迭代。4.1 第一轮拿到初稿先别急着改第一次发送草图和提示词后豆包大概用时一分多钟就返回了一大段HTML代码。我把代码复制到记事本另存为index.html双击打开。第一眼的感觉是整体布局跟草图基本对得上但细节差很多。标题文字放对了位置三个信息卡片也出现了但配色完全不是我要的暖黄色而是默认的白色而且活动地点虽然显示成蓝色链接但点下去没有任何反应。这时候我学到第一条经验第一版永远不可能完美不要慌也不要要求豆包一次性做到位。把它当成初稿你的任务是找出所有和草图不一致的地方然后用文字反馈给豆包。4.2 第二轮把点了没反应变成具体指令第一轮最突出的问题是链接点了没反应。我原本想把这个反馈给豆包说这个链接是坏的帮我修一下但转念一想这种描述不够具体。我改成了这样活动地点这四个字现在虽然显示为链接但点击之后没有任何反应。请为它加上跳转链接地址是 https://maps.example.com/readclub并且设置新窗口打开。修改后重新生成了代码。再次打开点击活动地点新标签页打开了地图。我第一次感受到能点的网页这句话的含义——它不是静态图片是真的有反应。这里有个很重要的反馈技巧指出问题时一定要包含现在实际表现和我希望达到的效果两部分。豆包看不到你屏幕上的现象你只说点了没反应它要猜但你把预期行为写清楚它改起来就精准。4.3 第三轮调布局和配色第二轮结束后页面功能基本正常了接下来是外观问题。我在手机上打开这个HTML文件发现三个信息卡片挤成了一列和电脑上看到的并排布局完全不同而且暖黄色完全没体现。这次我反馈了两件事一是要求三个卡片在手机上也能并排二是把标题区背景色调成暖黄色并给出一个具体的色值。豆包很快修改还顺带把表单输入框的样式调整得更适合手机触控。到了这一步我才意识到草图画的是电脑上的布局但真正点这个页面的人可能多半用手机所以适配问题必须提前提出来。4.4 第四轮用手机预览处理适配问题在手机预览里我发现了几个电脑上看不出来的小问题表单的提交按钮宽度太窄文字挤在中间提交成功提示弹窗样式不太协调。我把这几个问题连同截图一起发给豆包要求它调整按钮宽度占满整个卡片并优化弹窗。豆包修改完我在手机上一一点击测试输入手机号时输入非数字字符会提示格式错误;提交后弹出成功提示;按钮样式正常。到这轮结束整个页面才算真正能用。4.5 验收清单每轮迭代后都过一遍因为我不会写代码我给自己定了一个傻瓜式验收清单每轮迭代都在手机和电脑上各过一遍页面能不能正常打开标题文字是否正确。每个链接能不能点能不能跳转到预期位置。表单能不能输入手机上输入时键盘弹出是否正常。提交按钮点击后有没有反馈提示文字是否正确。手机和电脑上的布局有没有明显错位。这个清单不需要任何技术知识全靠肉眼观察。但正是靠它我一个不会写代码的人才能判断AI生成的东西到底靠不靠谱。5. 不懂代码怎么判断AI写得靠不靠谱看到这里肯定有人问我不懂代码豆包给出来的代码万一有乱七八糟的东西怎么办就算网页能打开我也看不出来啊。这个问题我一开始也面临后来摸索出一套不依赖编程知识、但足够有效的验证方法。5.1 浏览器右键检查就是照妖镜浏览器里按F12或右键选择检查会打开开发者工具。我不需要看懂里面的代码只需要看一个东西Console控制台里有没有红色报错。红色报错意味着代码里有运行时问题通常会导致交互功能失效。如果Console一片空白或者只有黄色警告说明代码基本能跑。这个方法对零基础的人极其友好。你不需要明白报错信息的具体含义只需要把界面截图发给豆包说这是浏览器控制台的报错信息请分析并修复它就能告诉你问题在哪、怎么改。5.2 让豆包解释它自己写的代码我经常干一件事让豆包把某个段落翻译成人话。比如我会问它活动地点的链接跳转逻辑是哪一段代码请用普通人能懂的话解释这段代码做了什么。豆包会指着某几行说这里定义了两个变量一个存链接地址一个存点击事件点击后调用跳转函数。这样做有双重价值一方面验证代码功能确实符合预期另一方面是很好的学习材料。几个月前我还是完全不懂HTML的人现在通过这种方式至少能看懂基本的标签结构了。这不等于学会写代码但至少别人在说标签事件函数这些词时我心里有画面了。5.3 可控的测试路径把每个可点的地方都点一遍检查完代码靠不靠谱剩下的交给手。我建议把页面上每一个可以点击的元素整理成一个测试清单然后逐个点一遍。这些元素包括所有链接、所有按钮、所有下拉框。测试时要特别关注异常输入——比如输入框里不填内容直接点提交、手机号输入字母、快速连续点两次按钮。零基础的人可能觉得这有点繁琐但恰恰是这种笨办法最能发现问题。豆包生成的页面最常见的缺陷是缺少对空值和异常输入的处理。你测试得越仔细反馈给它的信息越具体它修复得越快。5.4 让豆包给自己留后路在代码里加注释我每次让豆包生成代码时都会强调一句在关键代码处添加中文注释。这句要求带来的回报远超预期。注释本质上就是代码里的路牌它不参与功能运行但当我复制代码交给豆包修改时豆包能更快理解上下文;当我让豆包解释代码时它也更容易定位到正确的段落。更妙的是注释是一种自我说明哪怕我完全不理解代码逻辑只要滚轮划过注释就能大致知道每个模块是干什么的。这让我对整份代码有了巡航感——不需要潜入海底也能看到海面下的轮廓。6. 用豆包做网页这件事边界在哪里把流程讲完了必须诚实地说说边界。豆包不是万能的它是锤子但不是所有东西都是钉子。我用它做过几个不同的页面对它的能力圈有一些切身体会。6.1 适合做的事小、快、灵的页面我用豆包做成功过的页面包括读书会报名页、个人技能展示页、周末市集摊主的摊位介绍页、一个用来收集朋友聚餐意见的小问卷页。这些页面的共同点是单页面、功能简单、不需要登录、不需要和服务器通信通常一两个HTML文件就够。豆包做这类页面非常合适因为它们的需求上限就是打开、展示、点击跳转、表单提交反馈完全在单文件网页的能力范围内。6.2 不适合做的事要存数据、要登录、要通信的真网站我很早就做过一个失败的实验想让豆包做一个带后台的页面用户提交报名后报名数据自动发到我的邮箱。豆包确实能生成对应的代码但问题在于单靠HTML文件无法完成数据存储——需要一个后端服务器、数据库或第三方服务来处理这些数据。豆包能帮你生成一些调接口的前端代码但哪些服务稳定、请求怎么做、密钥往哪放这些已经超出了画草图扔给它的使用范畴。以我的经验判断一件事能不能交给豆包做的标准很简单你的页面需不需要记住数据如果不需要放心让它做;如果需要比如保存用户的报名信息、显示用户的历史记录那你得做好后端拼装的准备或者换一个专门的无代码数据收集服务让豆包专注于前端展示部分。6.3 不写代码的人下一步该补什么我不会劝所有人都去学编程但如果你想把这个流程用得更顺有三样东西值得稍微了解HTML标签的基本含义能认出div是分组、button是按钮、a是链接、CSS的基础属性颜色、字体、边距、宽度、以及浏览器的开发者工具里怎么看报错。这些知识不需要系统学每次让豆包解释代码时顺手记一点积累几周就够了。另外值得做的是把自己的需求整理能力提高。这里的核心不是技术而是逻辑——每次提需求时问自己四个问题这个页面给谁看?核心行动是什么?哪些信息最关键?如果用户点错了怎么办?这四个问题写清楚了配合草图豆包能给你的不仅仅是能点的网页而是一个真正符合需求的东西。6.4 把A4草图豆包沉淀成自己的套路跑了这么多次之后我最大的心得不是AI有多聪明而是这个流程本身可以固化。我现在电脑桌面上有个文件夹叫网页需求包里面每一个页面对应一个子文件夹存放拍好的草图原图、和豆包对话的提示词、最终生成的HTML文件以及连着好几轮的修改要求。下次要做类似页面时我直接把旧对话里的提示词复制出来改几个关键词就又是一版新页面。这个过程从画草图到最后拿到成品二十分钟已经不太够通常在半小时到四十分钟之间——但考虑到每次做出来的都是完全按我意图生长的页面这个成本已经低到不可思议。最后再分享一个小技巧如果你打算长期用这个流程建议给豆包指定一个你专属的页面生成偏好每次开始作图前先让它记住比如我的页面偏好是留白多、按钮圆角大、移动端优先、少用花哨动画。把这条偏好在对话一开始就发过去再配上草图它能少跑偏好几次。一次对话里反复使用也很稳定不用每次重新交代。对我来说这张A4纸和豆包的组合解决的不只是不会写代码的问题而是解决了我脑子里有想法、但无法用代码表达时的那种憋屈感。现在无论做什么活动、什么小项目我第一反应都是拿张A4纸画几笔而不是觉得我不行。这大概就是不写代码的人在AI时代能收获的最实在的东西。