画过草图没就是那种特别潦草、只有自己看得懂、甚至自己过两天都看不懂的方框和箭头。我干过一件更离谱的事把这么一张A4纸用手机拍了张照扔给豆包说“帮我做成网页”结果还真给了我一个能点、能跳转、能提交表单的页面。前后大概二十分钟我这辈子一行代码没写过。这事儿要从一个很真实的痛点说起。我平时会攒一些资料想整理成带导航的页面发给朋友看找现成模板吧改起来比写代码还费劲定制化需求根本没法满足。雇人做吧又觉得为一个查询页面上纲上线不值当。所以当豆包这类大模型AI对话助手能生成前端代码之后我第一反应就是那我把需求说得足够清楚是不是就不用求人了事实证明真可以。这篇文章就跟你聊聊我这套零基础操作流程怎么把脑子里的想法变成一张能被AI读懂的“草稿”怎么描述需求让它生成可用代码以及中间那些我自己踩过的坑和总结出的经验。1. 零代码搭网页的核心思路把AI当外包而不是当搜索引擎1.1 为什么画草图比纯文字描述更管用很多人用AI写网页第一步就错了。他们直接在对话框里打字帮我做一个企业官网。然后AI给了一堆特别完整但特别没用的内容看起来哪哪都对但根本不是你想要的。原因很简单AI不是人它没法替你做决定。你只说“企业官网”它不知道你的企业是做什么的、主色调是什么、导航要哪些栏目、首页放什么大图。那为什么我坚持画草图不是因为我画得多好而是因为意图传达的效率问题。文字描述网页布局是非常困难的。比如你想描述一个“左边栏是目录右边是大块内容区顶部还有一条横着的导航”的布局你用文字得写三四行AI还可能理解偏。但你拿笔画个框上面标“导航”、左边标“目录”、右边标“内容”AI看一眼图整个页面的骨架关系就全清楚了。图像包含的信息密度远大于纯文字这不是玄学是多模态模型的底层能力优势。注意别担心自己画得丑。AI看的是形状和标注不是美术作品。我那张A4纸上的方块都是歪的箭头也是随手画的这完全不影响识别。1.2 豆包这个工具选对了吗聊聊我的使用体验为啥选豆包不选别的这题我得说实话——市面上能生成网页代码的大模型工具不少国外的有V0、Claude Artifacts为代表的对话式生成国内也有豆包、DeepSeek、Kimi这些各有侧重。我最终长期用豆包核心就三个理由一是门槛真低。豆包网页版直接用不需要额外装什么环境你只需有一个浏览器。它不像某些专业前端生成工具那样输入框里全是技术术语豆包你用大白话跟它聊就行。二是多模态理解在线。它能看图也能看文档还不止是“看个大概”能根据你图上的标注逻辑来理解页面结构。这一点对我要“草图转网页”的应用场景来说是刚需。三是迭代响应快。做前端这活儿返工是常态。我改个按钮颜色、调个间距它基本几秒钟能给出新版代码完全不拖沓。选型这块我不想拉踩毕竟每个工具都有长处。但如果你跟我的情况类似——完全没有代码基础、需求偏个性化、还要快速看到效果——从豆包入手试错成本是最低的。1.3 “二十分钟拿到能点的网页”是怎么拆解的二十分钟不是噱头是我把整个流程拆成四步之后实测得出的均值。第一步画草图并拍照大概5分钟第二步用自然语言把需求描述清楚发给豆包大概3分钟第三步等AI生成代码并微调大概5到7分钟第四步把代码保存成网页文件浏览器打开测试交互大概5分钟。加起来不到二十分钟。所以整个流程的关键不是“AI真的能写代码”这早就不是新闻了。关键在于怎么在最短时间内让AI准确理解你要的东西并且让它输出的代码能直接复制粘贴跑起来。这涉及一个概念叫“提示词工程”很多人一听到这个词就头疼觉得是程序员才学的东西。实际上你把它理解为“怎么跟一个能力很强但理解力有限的实习生说清楚需求”就行了。2. 动手前的准备需求拆解比工具本身更重要2.1 画草图这步到底该怎么画我跟你说说我是怎么画那张A4纸草图的。不是说随手拿笔画两下就叫画草图画是有方法论的但别怕这个方法非常简单。先确定这个页面有几个“块”。我要做的页面是工具导航站那页面结构就是三块最顶部一个横幅区域放标题和说明中间是搜索框下面是一堆工具链接的分类区域。我把这三块在纸上从上到下画成三个大长方形。然后处理每一块内部的细节。顶部横幅我画了一行字的位置边上标注“主标题”中间搜索框我画了一个长条标注“输入框按钮”下方工具区域我预留了六到八个格子每个格子里面写了能看懂的工具缩写。不用写全称你自己知道是什么就行AI看不懂的部分你会用文字补充。最后别忘了加“页面行为”的标注。这一步很多人遗漏。草图上我用箭头和文字写了几个关键交互点搜索按钮要能跳转到百度搜索点工具格子要能打开新窗口顶部导航里“关于我”要能弹出一个提示框。这些交互在HTML里写起来也不复杂但如果你不告诉AI它默认生成的就是“死”页面点了没反应。核心经验草图的核心不是绘画技巧而是信息标注。你要让AI不仅看到布局还看到功能。2.2 自然语言描述需求的三个必写要素很多人拿到AI工具就开始口若悬河地描述描述半天发现生成的东西驴头不对马嘴。我把需求描述总结成三个必写要素你照着这个框架套就错不了。第一个要素是“角色设定”。上来第一句告诉它“你是一名资深前端开发工程师”。这句话看起来像废话但实测非常管用。因为豆包这类大模型在不同身份设定下输出的专业程度是不一样的。设定为“资深前端工程师”它给出的代码规范和交互逻辑明显会更好。第二个要素是“功能清单”。不要用形容词描述你想要什么用动词描述你能做什么。比如“点击卡片跳转到对应官网页面要在新标签页打开”、“搜索框输入内容后回车直接搜索”这样AI就能把你的需求转化成具体的JavaScript代码逻辑。第三个要素是“视觉约束”。你要什么色系、什么风格、什么尺寸。但这里有个小技巧不要只说“好看”、“高级”这种没法量化的词要用可执行的描述比如“白底卡片式布局圆角16px阴影不要太重”。AI对这样的描述能直接转化成CSS代码。2.3 工具准备清单连记事本都不用装整个流程需要的工具比你想象中少得多。除了豆包网页版之外你只需要一个浏览器和一个能保存文本文件的软件——Windows系统就自带的记事本macOS就自带的文本编辑器。对这就够了。有人会问不需要一个网页开发环境吗不需要。因为这个项目的本质是HTML页面它不像动态网站那样需要服务器、数据库、后端框架。一个HTML文件保存到电脑上双击就能在浏览器里打开所有的页面布局、样式、交互都已经封装在这个文件里了。这也是为什么AI能直接生成可运行网页的原因——HTML本身就是一种“所见即所得”的标记语言。我建议你在电脑桌面上新建一个文件夹专门用来放这个HTML页面。一方面是好找另一方面是后续如果AI生成了多版代码你可以用文件名区分版本不易混乱。3. 实操全流程实录从一张草稿到一个可交互网页3.1 第一轮对话把草图“喂”给豆包的正确方式这一步是整个流程中最关键的。你把照片上传到豆包对话框我建议照片拍得清楚一点光线充足、纸面平展、标注文字能看清。然后我的首轮提示词是这样写的请帮我将这张图片上的手绘草图实现为一个可运行的HTML页面。要求如下整体风格简洁现代主色调为白色与浅灰色卡片采用圆角设计顶部为标题区域居中显示主标题和副标题中部为搜索框支持回车搜索跳转到百度底部为工具导航卡片区每张卡片包含图标、名称和简介点击后在新的浏览器标签页中打开对应工具官网。请输出完整的HTML代码代码中包含CSS样式和JavaScript交互。这串话里包含了角色设定这个我在更早的对话里已经设定过了你也可以并进去、功能清单、视觉风格三个关键信息而且每一条都是AI能直接翻译成代码的“指令”。豆包返回的代码通常是一整块带语法高亮的代码块。我的习惯是直接点击右上角“复制代码”按钮先存到一个临时文本里不改动任何内容。为什么先不改因为你需要先看第一版的整体效果再决定从哪里改。如果上来就东改西改容易把问题的根因掩盖掉。3.2 本地运行与首批修改保存文件、查看效果、找到问题拿到代码后我打开记事本把代码粘贴进去另存为index.html。这里有一个极其重要的细节保存的时候编码格式一定要选“UTF-8”否则页面里的中文会变成乱码。Windows记事本另存为时编码选择框默认是UTF-8要注意确认一下就行。保存好之后双击这个文件浏览器就会打开这个页面。我第一次看到成品的时候说实话是有点惊喜的。布局是对的配色是对的卡片是圆角点击卡片也确实打开了百度首页。但问题也出现了第一版的卡片没有图标光秃秃的就一个文字标题搜索框按回车确实搜索了但是跳到的是一个我完全没见过的搜索页面因为AI随机选了一个搜索引擎。接下来我就把这两个问题直接丢回给豆包注意要用“继续修改”的语气而不是另起一个新对话。它会根据上下文来判断你在讨论的是同一个页面。我的修改指令是搜索跳转的URL改成百度搜索的网址格式具体是 https://www.baidu.com/s?wd关键词。另外每个工具卡片左上角加一个简单的SVG图标用不同的颜色区分不同分类。我把关键词必须替换成用户输入内容这个逻辑也顺带讲清楚了。豆包很快给了我第二版代码。再次复制、粘贴、保存、刷新浏览器这次搜索框能跳百度了卡片也有图标了整体感觉就像一个真正的导航站了。3.3 让页面“动”起来交互逻辑的逐项落地页面看起来“能点”还不够你要让它“灵”。这里说的灵是指交互反馈符合预期。我后续给这个页面追加了三个交互功能这仨功能全都是用自然语言描述实现的。第一个是搜索框的清空按钮。当你输入文字后输入框右侧出现一个小叉号点击即可清空内容。这个小功能在纯前端里需要几行JavaScript我懒得自己写直接告诉豆包“帮我加一个清空按钮的交互”。它就知道在输入框附近增加清空元素并绑定点击事件。第二个是页面的平滑滚动。工具卡片区如果特别长点击顶部导航里的分类锚点页面会瞬间跳到位体验很生硬。我跟豆包说点击导航链接时页面要平滑滚动到对应区域不要瞬间跳转。它返回的代码里加了scroll-behavior: smooth这属于典型的CSS一行代码解决的问题但如果你不说它默认是不会加的。第三个是暗色模式切换。这个算是我使唤AI的高阶玩法了。我跟豆包说页面右上角加一个按钮点击后在浅色和深色之间切换主题并且记住用户选择刷新后依然保持。这个功能涉及CSS变量和LocalStorage存储其实难度不小但豆包把整个逻辑在五分钟内写完了。你可能发现了我的模式就是“发现需求—描述需求—让AI改代码—刷新看效果”。每轮对话都很短但每轮对话都能解决一个具体的交互痛点。累计下来一个原本“只是能看”的网页渐渐变成“日常能用”的工具页。4. 常见问题与排查技巧我踩过的那些坑你大概率也会踩4.1 页面文字乱码或显示异常这是零基础玩家最容易遇上的问题代码没问题但打开页面全是黑色方块或问号。十有八九是保存文件时的编码选错了。记事本默认编码可能是ANSI必须改成UTF-8。macOS的文本编辑器也一样在偏好设置里把编码默认值设为UTF-8即可。还有一种情况AI生成的代码里包含了emoji作为图标。在HTML文件里emoji是无所谓的但如果你的系统字体较老部分emoji可能显示为方框。解决办法很简单直接让AI把图标替换成SVG图形或者用Font Awesome这类的图标库。4.2 页面布局错乱卡片叠在一起这个问题多发生在修改阶段。你让AI“把卡片加宽一点”之后它可能只是单纯改了卡片的宽度却忘记调整容器的高度和间距结果整个布局就乱了。排查思路很简单按F12打开浏览器的开发者工具点击左上角的箭头图标然后点击页面上出问题的那个元素右侧能看到它的盒模型数据——宽度、高度、内边距、外边距。你不用看懂全部代码只需要把看到的这几个数字截个图或者念给豆包听让它调整。这就是人机协作的典范人负责发现问题和传递信息AI负责提供解决方案。这个技巧对零基础用户来说是个大杀器。它让你不需要理解代码语义也能精准定位问题。就好比你肚子疼去医院你不需要懂病理学但你能准确指给医生“就是肚脐眼右边三指这个位置疼”。4.3 交互不生效点击没反应或跳转错误交互代码是AI最容易“想当然”的地方。比如点击卡片跳转网页AI可能用了错误的URL格式或者把点击事件绑定到了错误的元素上。我有一次遇到的状况是明明写了点击打开的代码但点击卡片毫无反应折腾了很久发现是某一个闭合标签错了导致整个JavaScript失效。排查这类问题有一套简单的流程先检查URL地址是不是符合目标网站的跳转格式然后在页面里随意点一个确定能用的功能比如搜索框看看它是不是也不工作了。如果都不工作大概率是JavaScript加载出错让豆包检查代码里可能存在的语法错误。我一般直接说“帮我把这个页面里的JavaScript代码重新审查一遍修复可能的语法问题”它通常能自己找出问题所在。4.4 无法复现AI生成的最新版代码这是我吃过的最亏的亏。AI对话页面上偶尔会有上下文丢失或者消息太长的情况尤其是多轮修改之后。前几轮你给的每一条指令AI都对应生成了一版新代码但如果你没有及时保存一旦对话被清理或刷新了页面前面那些中间版本可能就找不回来了。我的经验是每完成一轮修改确认浏览器里效果没问题之后立刻把最新代码复制下来另存为一个带版本号的文件。比如index_v1.html、index_v2.html。这样做还有个额外好处你可以在任意两个版本之间对比哪里变了方便回退。做任何AI生成类的项目都要养成“代码落地”的习惯AI只是生成者你才是项目资产的负责人。5. 从能用变好用让AI生成的网页更进一步5.1 挪到服务器上变成一个真正能分享的站点前面做到了“能点的网页”但如果你想把页面发给朋友看看总不能把HTML文件通过聊天软件发过去——那当然也行但显得不够正式。真正的做法是把它放到任意的网站托管服务上。现在很多国内云厂商都有静态网站托管服务甚至有的提供免费额度。你只需要注册一个账号把index.html文件打成一个压缩包上传上去系统会自动给你分配一个网址。整个操作过程通常不超过十分钟。这时候有人会问了我没有服务器能不能用网盘之类的说句实话我家里的老同学试过把HTML文件传网盘然后把链接发给别人对方点开通常是直接下载文件而不是在浏览器里渲染出来。不推荐。如果不想注册太多平台也可以在本地搭一个简单的“内网穿透”让朋友在公网上访问你电脑上的网页。这个操作稍微有一点点门槛但对好奇心强的人来说也是一种折腾的乐趣。给个提示词让AI帮你写一份内网穿透工具的配置步骤文档然后严格按步骤操作即可。5.2 接入外部API实现更“智能”的功能网页做到能点是第一步做到“有用”才是第二步。我后来又让豆包给我做了个“今日热榜”聚合页用到了它的API调用能力。原理很简单通过JavaScript向某个公开的API接口发请求拿到数据之后渲染到网页上。你可能不理解API是什么通俗的解释API就像餐厅的菜单你不进厨房也能点菜厨房做好什么服务员就端给你什么。我让豆包写的代码就是那个负责“点菜”的服务员——它定时向数据接口要数据拿到数据后塞进你页面里。跟AI说这个需求的时候你只要把目标数据来源的接口地址给它然后描述清楚“这个接口返回的数据是什么结构你想把哪个字段显示到页面的哪个位置”就行了。剩下的代码工作AI会完成。如果接口数据格式你不确定可以发一个示例数据给AI看它一样能读懂。5.3 数据化与后续扩展方向页面做出来之后真正让它有点“产品感”的是数据层面的持续迭代。我最开始那个导航页一开始工具链接是写死在代码里的。要新增一个链接就得去找AI让它改代码。后来我让豆包把工具数据改成用一个外部的JSON文件来存储。这样一来以后再要加工具我只需要在那个JSON里加一行数据页面会自动多出一张卡片。这个思路值得每一个零基础玩家记在心里。它的本质是“把数据和页面结构分离”是前端开发里非常基础但也非常核心的工程思想。你可能没有计算机科班背景但通过这个AI辅助的过程你已经切身体会到了这种思想带来的便利。后续我还计划给这个页面加一个访问统计、一个留言板、甚至做成一个可以搜索全站内容的完整小站点。这些听起来很复杂的想法在AI辅助下每一步都是“描述需求→生成代码→本地测试→部署上线”这个流程的循环只是每轮需求变得越来越具体、越来越有深度。6. 不会代码的人怎么用好AI我的方法论总结6.1 把AI当实习生分步指令比一步到位更高效我发现零基础用户最容易犯的一个错误就是试图在第一条消息里把所有需求说完。你想得越多AI输出的内容就越庞大而庞大的输出往往意味着顾此失彼。高效的做法是拆步走。第一轮说整体布局第二轮说颜色风格第三轮说交互细节第四轮说数据来源。这个过程中每一轮AI输出体量都是可控制的你可以逐步验收避免“一步到位然后满屏都要改”的挫败感。这也是为什么我说AI像实习生你不可能让实习生一天把整年的工作全部做完。但你每天给他安排一件任务让他不断在你反馈中修正最后得到的结果每次都比你亲自动手强。6.2 先模仿再超越把你的“参照页”描述给AI很多人还有个误区觉得AI只能从零开始生成东西。实际上如果你看到一个网站的布局很喜欢完全可以把这个网站的截图发给AI让它照着这个布局风格重新做一个你的版本。这便是“模仿式生成”对零基础玩家特别友好。具体操作是把截图发给豆包附上一句话“参考这个网页的整体布局和视觉风格帮我把里面的内容替换成以下这些模块和文案”。它会把截图里的布局骨架提取出来重绘成一套你的内容。你不需要授权因为你只是借鉴风格不是抄袭代码AI生成的代码属于全新内容。6.3 想清楚你要的是“好看”还是“好用”最后说个心态问题。有人第一次让AI做网页看到生成结果兴奋得不行第二天冷静下来发现这个页面除了好看没什么功能于是放弃。有人则是拿到代码就开始琢磨怎么加搜索、怎么做数据驱动越玩越深入。我个人体会是好看和好用是需要你在一开始就明确的项目目标。如果你只是想要一个发朋友圈的作品那颜色、排版、动效是最重要的如果你想要一个日常真的能提升效率的工具那交互、数据、结构化才是重点。跟AI沟通之前先在心里把这个优先级排好它会极大影响你的提示词怎么写以及AI输出代码的方向。这就像装修房子你先得决定这是用来拍照还是用来住否则请再厉害的施工队最后也会做出一个金玉其外的空壳子。做完了那个导航页之后我还做了一件事让豆包把这个页面里的所有样式单独抽出来整理成一个.css文件。这样整个项目的代码结构就变成了“内容”和“样式”分离的标准结构。虽然我依然不写代码但这种工程化思维我想是玩AI工具最好的收获之一——你不需要成为一个程序员但你会慢慢懂程序员的思考方式。以后再有任何想法你都知道怎么把它变成现实的轮廓了。