上周末我在客厅里干了一件以前想都不敢想的事拿一张A4纸画了个网页草图拍照发给豆包大概二十多分钟后手机里就多了一个能点的网页。全程我没敲一行代码也没有查任何教程就是像给朋友发微信一样把自己的想法说了一遍。这个体验让我意识到AI编程早就不是程序员专属的工具而是普通人表达需求的一种新方式。如果你也想做点什么但一直卡在“不会写代码”这道门槛上这篇文章就是给你写的。我会把这个过程完整拆开——草图怎么画、提示词怎么下、代码怎么变成网页、中途翻车怎么修、最后怎么在手机上看效果每一步都讲透。读完你不需要会编程只需要有一部手机、一台电脑、一张纸和一杆笔。1. 为什么一张A4草稿纸能变成一个能点的网页很多人听到“做一个网页”第一反应是学HTML、CSS、JavaScript至少也得折腾几天。但AI时代这个门槛被大幅拉低了。豆包这类大模型产品核心能力就是理解自然语言、生成代码。你把自己想要的样子描述清楚它就能输出一个完整的HTML文件——这本质上是个“需求翻译”的过程你负责说人话它负责翻译成人话的下一层也就是浏览器的语言。1.1 从“我不会写代码”到“把需求翻译成交互页面”我那个网页的缘起很简单楼下小面馆的老板娘想弄个线上菜单让客人扫码就能看到招牌菜和价格最好还能一键打电话订餐。这点需求如果找开发公司报价没个三五千下不来自己学代码又不知要学到猴年马月。我一开始也没底但意识到一件事做网页这件事80%的工作不是“写代码”而是“想清楚自己要什么”。页面放什么内容、点击某个按钮应该发生什么、颜色风格偏好是什么——这些我在纸上就能表达。A4草图的价值正是把模糊的想法固化成看得见的信息结构让AI不用猜。豆包要做的就是把我草图里的框框线线翻译成一个浏览器能渲染的HTML文件。它不需要我懂标签、属性、事件绑定只需要我描述得有头有尾。这跟给设计师提需求很像你不需要会Photoshop但你必须能说清楚“这里要一张照片、那里放一个红色按钮”。1.2 为什么选豆包零基础用户的第一选择市面上的AI助手不少我选豆包是因为几个现实原因第一网页版入口就在官网上打开浏览器就能用不用安装任何插件也不牵扯部署之类的事。第二它对中文理解到位尤其是口语化的描述直接说“弄个暖色调的菜单页”它听得懂。第三也是最重要的一点它的代码生成和调试能力对新手很友好错了直接甩给伺候行它会重写或给修改建议而不是甩一堆专业术语让你自己琢磨。后来我也试过其他几个主流AI结论是大差不差都能干这个活。但豆包的上手门槛最低适合完全零基础的第一站。等你有经验了再对比不迟第一个项目图省心最重要。1.3 二十分钟的效能账传统写法与AI写法的差距我算过一笔时间账。用传统的路数先学HTML标签大概两天学CSS布局至少一周再啃JavaScript事件写个好几天然后开始写菜单页写完调样式再修bug全套流程新人走完大概两到三周。如果中途用的编辑器、环境配置再出点问题一个月也不是没可能。AI路线的实际用时是这样的步骤传统方式AI辅助方式明确需求0.5小时0.5小时页面结构设计边写边想2小时画草图10分钟编码实现新手1~2周AI生成2~3分钟故障排查查资料1小时起描述现象让AI修5分钟上线验收需懂部署本地直接打开我那次从画草图到手机里能打开确实只用了二十多分钟。省下来的时间不是“手速快”而是把中间十几年的学习曲线直接剪断了。当然这不是说不用学习而是学习顺序变了——先在实战里做出东西再回头补原理比从原理开始啃舒服得多。2. 整个操作链路复盘从草稿纸到可点击网页接下来是完整的实操过程。我不会只说“拍照发给豆包就行”那样会坑了你——因为中间的细节决定成败。每一步的坑我都会标出来。2.1 草图怎么画AI才看得懂信息分层与文字标注不是随便画两笔AI就能懂的。我在A4纸上做得比较“笨”但事后证明非常有效把页面按从上到下的顺序拆成三个区域。最上面是头部区域我写了“老王面馆”四个字下面注明“暖色调要大居中”。中间是菜品区画了几个长方形框每个框里写了“菜名、图片、价格”三个词。最下面是三个小框分别写“电话订餐”“查看地址”“微信联系”。关键一步是在每个框旁边用一两句话写明点击后的行为。比如“电话订餐”旁边我写了“点击后弹出提示框显示电话号码”“查看地址”旁边写了“点击后打开地图搜索菜市场12号”。这一步非常重要——AI读图能力再强也读不出你脑子里的交互逻辑你必须把按钮背后的行为标注在纸面上。这段经历给我的经验是草图不是画给审美看的是画给信息结构看的。越粗糙越没关系但是信息层级越清晰越好。一个顶部标题区、一个中部内容区、一个底部操作区AI基本一眼就能理解。2.2 拍照上传的讲究清晰度决定生成质量草图画完接下来是拍照。这一步的坑点在于不要斜着拍不要有阴影更不要把A4纸以外的桌面杂物拍进去。正确做法是找个光线均匀的地方把纸平铺手机垂直于纸面拍。拍完在相册里稍微裁一下边把纸四边留出的空白裁掉。我第一张照片是晚上在台灯下斜着拍的纸上还有杯子影子AI识别出来的结构就乱了把“电话订餐”理解成了菜品名称。换了一张平拍照问题迎刃而解。豆包网页版的上传入口就在对话框旁边点一下上传图片然后直接打字提需求。这里有个使用习惯不要图片和文字一起糊里糊涂发完就等结果文字部分最好按我下面说的三段式写AI的理解会准很多。2.3 三段式提示词背景、内容、交互一次说清提示词是整件事成败的核心。我第一次就写得好第二次就翻车区别就在写法。我总结了一个三段式模板你直接套用就行背景段一句话说明这个页面给谁看、用来干什么。 内容段按草图里的区域顺序说清楚每个部分放什么。 交互段明确每个按钮点击后的期望行为越具体越好。我当时给豆包的完整提示词是“我上传了一张面馆菜单网页的草图请帮我做一个能在手机上正常打开的页面。顶部居中显示‘老王面馆’下面一行小字‘营业时间 9:00-21:00’。中间是招牌菜列表每道菜包含一张图片、菜名和价格共四道菜牛肉面18元、炸酱面15元、凉拌黄瓜8元、卤蛋3元。页面底部放三个并排的按钮电话订餐、查看地址、微信联系。点击电话订餐弹出一个提示框显示电话号码点击查看地址打开地图搜索‘平湖路菜市场12号’点击微信联系弹窗提示‘请添加微信wanglaomian’。整体用暖色调白底干净一点菜品的图片先用不占位置的灰色占位图。请输出一个完整的HTML文件CSS和JavaScript都写在文件里复制出来就能在浏览器运行。”这段提示词看起来啰嗦但每一句都有用。背景一段让AI知道受众和风格方向内容一段避免它自由发挥把菜名给你改了交互一段把三个按钮的行为钉死最后一句“单文件HTML”更是关键中的关键。2.4 把AI给的代码变成真网页保存、打开与验证豆包生成回答之后通常会给出一大段代码。这个代码就是整个网页的“底稿”后面所有步都围绕它展开。复制整段代码在电脑桌面上新建一个文本文档粘贴进去然后把文件后缀名从“txt”改成“html”文件名可以随便起比如“menu.html”。双击这个文件系统会用默认浏览器打开网页就出来了。如果你电脑上装的是Windows系统注意把文件编码保存成UTF-8否则中文会乱码。记事本另存为时编码选UTF-8就行。接着在浏览器里过一遍。点击每个按钮看有没有反应页面有没有超出屏幕宽度文字颜色和背景对比够不够明显。你第一遍看大概率会发现一些问题这很正常。问题出现不要慌也别自己动手改代码而是把问题描述给豆包让它改。3. 二十分钟里最常见的三个翻车点与排查过程我第二次做这个流程时故意不按套路出牌把提示词写得很简略结果就翻车了。这里我把最常见的三类问题完整复盘一下每个都是零基础用户一定会踩的但也都特别好修。3.1 页面摊成一锅粥布局溢出和图片尺寸问题第一版草率生成的网页打开后手机屏幕上横向多出一大块显示不完整需要左右滑动才能看全。这个现象专业术语叫“布局溢出”通俗说就是页面内容宽度超过了屏幕宽度。原因通常有三个一是某张图片设置了固定宽度比如300像素而手机屏幕不到那么宽二是某个容器元素的宽度写死了三是Flex布局里子元素按比例排布时内容过多没能换行。不用懂这些原理也能修。我把浏览器里看到的现象描述给豆包“页面在手机上打开后左右有多出的一块需要滑动才能看到完整内容图片也偏大请帮我修一下。图片宽度不要超过屏幕菜品卡片一行放一个就行。”豆包收到后会调整CSS把固定宽度改成自适应宽度比如把图片的width改成100%、加一行max-width控制上限。改完重新生成代码替换原来的文件刷新浏览器就正常了。这类问题之所以出现恰恰说明“做出来”不等于“做好了”零基础用户至少要会用一句话描述页面表现异常的现象。好在AI听得懂人话你说“看得不完整”它能推断出是布局问题不需要你说出“overflow”这个词。3.2 按钮像摆设点击事件没绑定怎么修更刺激的情况是页面渲染出来了三个按钮也好好摆在底部但点下去没有任何反应像贴上去的贴纸。这种问题一般是两种原因。第一种是AI只生成了UI的静态部分压根没写JavaScript——你提需求的时候没强调交互它就默认只做展示页第二种是它为了省事写了一个点击事件但按钮的id写错了事件绑定到了不存在的元素上。处理办法依然是“现象式反馈”我直接跟豆包说“三个按钮点了没有任何反应我需要点击电话订餐弹窗显示电话号码点击查看地址打开地图搜索点击微信联系弹窗提示微信号请补充完整的JavaScript逻辑。”第二次生成后按钮正常了。这里有个进阶小技巧让AI每次都把交互逻辑写在HTML文件内部的script标签里。这样整个页面只有一个文件不会出现JS文件没加载出来的低级错误。这个信息加进提示词能直接减少一半翻车概率。3.3 手机上打开字小得像蚂蚁响应式适配的缺失与补救零基础用户最容易忽略的一步是页面做出来后没有在手机上验证。我自己第一次在电脑浏览器里看得挺好等用手机打开同一个文件时字小得像蚂蚁布局也挤成一团。根因是HTML文件缺少响应式适配的关键设置。电脑和手机的屏幕宽度不一样浏览器默认按PC尺寸渲染网页手机上自然会被缩小。解决办法是在HTML的head标签里加一行viewport meta设置让页面宽度跟随设备宽度。具体代码不需要你背你只需对AI说一句“请帮我加上手机适配让页面在手机上显示正常”它会自动补上。这个问题的教训值得所有新手记住做网页的终端设备意识必须一开始就有。你是给手机用户看的就在提示词里写明“优先适配手机”千万别只盯着电脑浏览器看效果。我这里说的“手机适配”指的就是响应式布局的基本概念你描述一句AI会处理细节。3.4 一个省时间的习惯让AI输出完整代码并给出检查位跟AI来回对话修bug效率高不高取决于你给的反馈质量。我有一个习惯每次让豆包修改时都要求它输出“完整代码不要给省略号或部分片段”并且明确告诉它“直接替换上一版”。这样做是因为AI有时为了省字会只给改动的CSS部分你复制回去不完整反而越改越乱。另外一个习惯是让 AI 在回答末尾列出“上线前检查清单”比如“请检查页面是否适配手机、按钮是否都能点击、图片是否有占位、标题文字是否清晰”。这相当于让它自己当QA把代码的验证流程也一并完成。我在同一个项目里用过这个方法几次下来页面质量和稳定性都明显提升。4. 草图里的“交互意图”如何被翻译成代码当你把第一版网页跑起来之后会发现一个更有意思的问题怎么把草图上标注的“点击这里弹窗”“点击那里跳转”变成真正的交互效果。这一节讲透交互翻译的底层逻辑让你不用学JavaScript也能指挥AI写出想要的交互。4.1 用说人话的方式描述点击行为AI理解交互意图的方式不是读你画的箭头而是读你写的行为描述。你越是说人话它翻译得越准。举个例子我想实现“点击地址后打开地图导航”。我的描述是“点击查看地址按钮打开一个新页面地图上搜索‘平湖路菜市场12号’显示路线。”豆包把它翻译成JavaScript代码时大概会这样操作监听按钮的click事件调用浏览器的定位接口或者直接拼接一个地图搜索URL然后在新标签页打开。这里的关键认知是你不必会写事件绑定、不必知道什么是window.open你只需要把“用户点击后看到什么、跳到哪里”说清楚。豆包会自动选择合适的实现方案。如果它选的方案不是你想要的比如你希望弹个框而不是打开新页面你只需要追加一句“改成弹窗方式展示”它就会调整逻辑。实际写提示词时有三个高频表达建议零基础用户背下来“点击后弹出提示框” 对应弹窗效果适合展示电话号码、微信号、说明文字。“点击后打开新页面” 对应跳转效果适合打开地图、官网、详情页。“点击后滚动到页面底部” 对应锚点滚动适合单页长页面。这三个能力覆盖了绝大多数轻交互网页的使用场景。你会在几次操作后发现所谓编程的核心其实就是“把意图表达得无歧义”。4.2 为什么坚持要“单文件HTML”而不是复杂工程很多AI默认会生成一个包含HTML、CSS、JS三个文件的项目结构新手拿到后根本不知道文件放哪里、CSS没生效是不是路径配错了。我的建议是永远让AI输出单文件HTML就是所有样式和脚本都写在同一个.html文件里。这样做有三个好处。第一保存简单一个文件就等于一个网站。第二打开方便双击就能在浏览器里预览不需要启动任何服务器。第三分享容易你把这个HTML文件发给别人对方双击也能打开同样的效果。单文件HTML在专业开发里不是最优解但对零基础项目来说是最稳交付物。等以后你熟悉了再看多文件工程不迟。我这次的面馆菜单页、导航页、临时活动页全部用单文件HTML实测下来成熟稳定没有任何运行性能问题。4.3 调优清单把审美需求写进提示词减少来回拉扯网页做出来了接下来的重点是“好看”。审美这东西AI默认值是“能用但不惊艳”你想要效果就必须把审美偏好写进提示词像做需求分析一样做审美分析。我整理了一个调优清单每次提需求时按顺序过一遍配色给出主色调和辅助色例如“主色橙黄文字深灰背景米白按钮圆角”。字体说明风格“字要清晰圆润标题加粗正文适度小一点行间距大一点”。间距标注留白偏好“卡片之间留足空隙页边距至少15像素”。按钮规定形态“三个按钮高度一致横向铺满圆角大一点”。图片决定是否存在或占位“菜品图片先不显示用菜品名称的浅色条代替”。把这一套一次性写进去AI生成出来基本就接近你想要的样子。如果你第一版出来了再逐步提修改会很耗时而且改来改去容易越改越乱。我个人的体会是一次说全需求胜过十次补救对话。当然真出了问题也别急豆包改需求的速度依然很快。5. 零基础靠AI做网页的边界与下一步建议说实话这个随手的尝试确实改变了我对“做网站”的认知。但也要客观说清楚AI辅助做网页有它的边界知道边界在哪里才能真正用好这个工具而不是踩空了失望。5.1 能做什么、不能做什么适用场景清单经过这一通折腾我对“AI直接生成网页”的适用场景有了一本很清晰的账本。能胜任的场景信息展示类页面、活动报名页、个人名片页、课程表、相册索引页、食品/商品菜单页、公司介绍页、轻量级工具页计算器、倒计时、待办清单等。这些共同特点是内容是静态的交互是轻量级的数据量不大不需要后端服务。做不了的场景也很明确需要用户登录、支付、评论互动、数据库存储、复杂权限控制的网站单靠AI生成一个HTML文件是远远不够的。要让这类网站跑起来至少还需要服务器、数据库和接口这部分远超“画个草图发给AI”的能力范围。所以在开启任何AI页面项目前先问自己一个问题这个页面的价值是不是只在一个浏览器里展示如果是大胆做如果不是需要后台支撑那就要规划一条不同的路。5.2 从“会要页面”到“会看代码”下一步学习路线体验过AI生成的快乐之后下一步该怎么走我的建议是反向学习拿着AI生成的代码当教材先看懂大结构再抠小细节。第一步让豆包解释它生成的代码。你直接问“请给这一段HTML加上中文注释解释每个部分的作用。”它会输出带注释的版本年少时那些天书一样的标签瞬间变成有逻辑的结构。第二步只改一个变量玩一玩比如改背景颜色、改字体大小亲手改一次理解比看一百遍都深。第三步尝试让AI生成一个难度稍高的小工具页比如“一个能记录记账数据的页面”在旧功能上叠加新需求反复迭代。这样走下来你虽然没有系统学过编程但已经积累了一个直观的心智模型HTML管内容CSS管外观JavaScript管互动。到这一步你不再是“不会写代码”的人而是“能看懂和微调代码”的人这个转变是很关键的。5.3 我的真实体会最后说几句实在话。我那二十多分钟拿到的网页功能很简单也没多惊艳但这件事让我重新理解了“工具门槛”四个字。以前觉得编程是高高在上的技能真要动手做点什么总得先学三个月。现在我发现很多时候AI要的不是你多懂技术而是你多懂自己——你清楚自己想要什么能把它表达清楚剩下的翻译动作AI已经帮你完成了。后来我又做了两个页面练手完整走通了从草稿到成品的流程熟练之后平均耗时已经压到十分钟以内。虽然我依然不写代码但再有人问“这个网页要怎么做”我不是说“找人开发”而是递过去一张A4纸说“来画个草图咱用AI跑一遍”。这个过程实在的过程比任何编程教程都让人更有成就感。
