先把丑话说在前面这标题不是我吹的是真事。上周我坐在电脑前想做一个活动报名页琢磨了半天连 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-8F12 看 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 纸画几个方框写几行字标两个箭头拍照扔给豆包。二十分钟后你会和我一样收获一个能点、能跳、能弹窗的网页。