企业官网建设流程全解析

我是个写了十年PPT、画了十年原型图、却一行前端代码都不会的产品运营。上周末突发奇想，把一张A4纸手绘的网页草图拍下来发给了豆包，靠着来回对话，二十分钟后我拿到了一个能点、能跳转、能提交表单的网页文件。这事听起来像段子，但做完之后我发现它完全不是玄学，而是一套任何人只要愿意花二十分钟就能复用的工作流：画草图、喂提示词、迭代修改、本地验收、部署上线。

这篇文章我想写给所有跟我一样不会写代码、但需要快速拥有网页的人。你可以不学HTML、不学CSS、不学JavaScript，但你必须学会一件事——把需求说清楚。下面我把那个二十分钟完整拆开给你看，每一步都带实际对话和踩坑记录。

1. 一张A4草图里到底藏了多少信息？

好多人听说这件事，第一反应都是“豆包真厉害，居然能看懂手绘草图”。但我把整个流程复盘了好几遍，发现真正决定成败的，其实是我画那张A4纸时想清楚了多少事情。AI只是执行端，策划端永远是那张纸、那支笔和写在边角的注释。

我是产品运营出身，平时工作会画原型图，跟开发对接时经常要说“这里按钮大一点”“那里弹个提示”，但我自己完全没有手写过页面代码。正因为如此，这次尝试特别能代表普通人的处境：不是不会动脑子，是不懂技术词汇，只能靠图形和自然语言把想法交出去。

1.1 别画艺术，画方块图

我画的草图，艺术成分约等于零：顶部一个长条方框，里面写着“首页 关于 服务 联系”；中间一个大方块，写着“主视觉标题”；下面三个小方块，标着“卡片一、卡片二、卡片三”；最底下画一条横线当页脚。就这么一张“豆腐块图”，豆包竟然完整地接收了。

后来我琢磨了一下，大模型理解图片靠的是视觉识别加语义联想，它不需要你的草图有审美价值，它需要的是区块边界清楚、元素相对位置明确、文字说明直接可见。换句话说，AI是建筑队，草图是施工图，施工图上最重要的是标注，不是画功。

所以给手残党的第一条建议是：用尺子画线，用铅笔写字，把每个区域都框起来。不用画图标，不用填颜色，不用画阴影，那些AI会自动补全。你画得越潦草，它反而越敢发挥；但如果你把区域位置画乱了，它就彻底跑偏。

1.2 标注比画更重要

画完方块之后，我干了一件特别关键的事：在A4纸的空白处写注释。草图上那些文字，是给AI听的需求；画本身，是给AI看的结构。图示负责空间关系，文字负责行为和语义，两者缺一不可。

我当时的注释大致是这样的：顶部导航旁边写“四个菜单，点击后跳转到对应板块”；主视觉区里写“放一段欢迎语，占大屏，下面配按钮，按钮文字写‘立即体验’”；三个卡片区域上方写“三个卡片并排，每张配小标题和两行说明文字”；页面最下方写“页脚，放版权信息，加五个社交平台图标占位”。

这些注释如果单独敲成聊天框里的一段话，是一大段流水账，AI读起来容易“迷路”；写在图上，AI就能结合线条位置，把“哪句注释对应哪个区块”对应起来，信息密度一下子提高很多。我后面专门做过对比测试：同一张草图，有注释和无注释的版本，生成结果完全是两个页面。注释完整的版本，结构基本一次成型；没注释的版本，AI开始自己脑补，在我完全没画过的位置加了一个侧边栏。

AI不是故意发挥，它是信息不够只能猜。猜对了是运气，猜错了就是返工。

1.3 告诉AI一件它看不见的事：你想要什么情绪

大部分人画草图会漏掉一个信息：排版之外，这个页面到底想传达什么感觉。我在A4纸的角落写了一行小字：“科技公司官网风格，克制、干净、不需要花哨动画。”这行字不画结构，也不画交互，纯粹是审美引导，但它决定了AI之后选配色、字体、留白、圆角、阴影时的基准线。

没有这句话时，AI默认生成的是白底、蓝链接、灰正文，能看，但非常“演示稿”，跟我脑海里“科技公司官网”差了十万八千里。所以我的固定操作是：给完草图之后，一定会在对话框里再补一句视觉描述。比如有次我说“整体风格参考现代SaaS产品官网，主色调深蓝搭浅灰”，生成的页面立刻从“演示稿”升级成“可以拿出去给客户看一眼的成品”。

这里有个小经验：“科技公司官网风”比“高级感”管用得多。因为“高级感”太主观，AI不知道你心里那个“高级”是什么；而“SaaS官网”“科技公司官网”“杂志风”这些词有明确的作品集合，AI的审美基准线会瞬间清晰。

1.4 草图上最容易被忽略的三个细节

把草图画完不等于结束，我每次还会专门扫一遍三个容易漏掉的细节。第一个，可点击的元素要专门标注。按钮、菜单、表单，AI有时候会把它们生成成“死元素”——样子在，点了没反应。我在草图上每个可交互元素旁边都写了“可点”两个字，或者更具体地写“点击后弹窗”。

第二个，文字内容别用缩写。你草图上写“欢迎语”，AI很可能会老老实实在页面上放三个大字“欢迎语”。草图上写不下的完整句子，展开写在旁边，别偷懒写“等等”两个字，AI不会自己补全。第三个，别被一张A4纸限制住页面长度。真正的网页是可以往下滚的，如果你只画了一屏，AI就默认这就是一屏高的页面。草图画不完第二屏，要在底部画一个向下的箭头，旁边写“下面还有内容”，它才会把页面做长。

这三个细节我踩过不止一次坑，现在每次画完草图都会习惯性扫一遍，直接帮我省掉了一到两轮无效对话。

2. 从草图到第一个页面：二十分钟流程的关键动作

这一章我们进入到真正跟豆包交手的环节。你可以把它看作一次“临时工入职培训”：培训做得好，交付质量就高；培训做得差，后面全是返工。所有动作都不需要写代码，但每一步都有讲究。

2.1 为什么是豆包，而不是其他路径

我原本给自己设计过两条路，但都放弃了。第一条是找开发的同事帮忙，优点是质量有保障，缺点是要排期、要沟通需求、可能要等一周才看到一个版本。第二条是自己用低代码平台，拖拽组件虽然直观，但做到最后总觉得是玩具，复杂交互完全没法实现。

豆包的优势在于：它能直接看懂我上传的手绘草图，能生成完整单文件HTML，而且可以用自然语言反复修改。整个过程没有“编译错误”这个门槛，我只需要复制代码、保存文件、打开浏览器。对我这种不会代码的人，这种体验比任何低代码编辑器都要顺畅。

我也试过其他AI助手，效果参差不齐，有的甚至拒绝直接输出完整页面代码，只说思路。豆包是那个让我一路顺畅走完的。但工具不重要，重要的是“草图+对话”这套流程，你换成任何能生成代码的AI，逻辑都成立。

2.2 喂给豆包的第一段话：你给的不是指令，是交付标准

我不会只把一张图直接扔上去。我的固定开场白是这样的：

“我上传了一张手绘网页草图，请把它实现为一个完整的HTML页面。要求：单文件，包含CSS和JavaScript，图片位置用渐变色块占位，字体用系统默认字体栈，不要依赖任何外部图片链接。生成后请把完整代码放在一个代码块里输出，并告诉我如何保存为.html文件。”

这段话我来逐句拆一下原因。“完整HTML页面”是明确定义交付物；“单文件，包含CSS和JavaScript”决定了我之后只需要管理一个文件；“图片位置用渐变色块占位”是为了不让页面出现裂图；“不依赖外部图片链接”是为了离线也能打开；“完整代码放在一个代码块里输出”让我可以无脑复制；“告诉我如何保存为.html文件”直接把最后一步也交代清楚了。

整段口令没有一个字在夸AI，全部是在约束交付标准。AI最怕的不是你话多，是你话少还得靠它猜。

2.3 第一次复制代码：保存和打开都有注意点

豆包输出完代码后，我复制到记事本，另存为index.html，双击，页面就出来了。第一次做这件事的时候我确实小小爽了一下，毕竟那是一行代码没写的“作品”。

但这里有个坑很多人会遇到：记事本另存时的默认编码很可能是ANSI，当页面里有中文时，浏览器打开就是乱码。解决办法是另存对话框里的“编码”一栏手动改成UTF-8。这个细节AI几乎不会主动提醒你，但它能决定你的第一次体验是惊喜还是疑惑。

我把保存HTML的步骤固化成了肌肉记忆：新建记事本、粘贴代码、另存为、编码选UTF-8、后缀改成.html。以后不管AI给我的是什么代码，我都保持这个操作，再也没翻过车。

2.4 收到代码后的冒烟测试：不点一遍等于没干

页面打开之后，第一件事不是欣赏，而是把页面上的每个元素都点一遍：导航链接能不能跳到对应板块？按钮有没有反应？三个卡片是不是真的并排？把窗口从窄拖到宽，页面会不会出现横向滚动条？

这个过程有个专业名词叫“冒烟测试”，我更愿意叫它“亲手过一遍流程”。因为AI是生成式地写代码，代码“理论上正确”不代表交互“实际可用”，它完全可能在没描述到的地方用最省事的实现方式。

实测下来，第一版页面能通过大概一半以上的测试项。剩下那些没过的东西，正好作为下一轮修改的输入。不要怕第一版不完美，就怕你不测试就直接进入“欣赏模式”，等发给别人时才发现问题。

3. 二十分钟里真正花时间的三个环节：迭代怎么聊才不累

如果只有“生成首版”这一步，二十分钟根本花不完。真正吃时间的是后面几轮修改，而修改效率的高低，完全取决于你会不会把话说到点子上。这一章我把整个迭代过程拆成三个环节来讲。

3.1 第一版最常见的“跑偏清单”

我结合自己和其他朋友的实测，总结出AI生成首版网页时最常出现的四类跑偏：导航没固定住，页面一滚动就跟着跑了；说好并排的卡片变成了竖排；出现一个你完全没提过的主题色；你画了五个区块它只生成三个。

看到这类问题，我不发火，也不会甩一句“不对，重做”过去。我会把问题写成修改需求清单，一条一条发给豆包。比如：“导航固定在页面顶部，向下滚动时不能消失；三个卡片改成水平并排，在窄屏上自动换行；按钮颜色改成深蓝色，与整体配色统一；页脚补回页面最底部。”

注意，这些描述里没有“不好看”“太乱了”这种主观词，全部是“可定位、可量化”的需求。AI按清单改起来，准确率非常高。如果你一上来就只说“整体重弄”，它反而不知道你的“重弄”和现在的版本差在哪里。

3.2 改样式：学会说“哪个区域+改成多少+想要什么效果”

不懂代码的人，最不会表达的就是样式问题，我也一样。第一轮我只会说“间距大一点”，AI改得很随意，肉眼看着反而更乱了。后来我总结出一套反馈模板：先指明“哪个区域”，再说“改成多少”，最后讲“想要什么效果”。

比如我把“两个卡片之间间距大一点”改成“第一张卡片和第二张卡片之间的间隔扩大到约32像素，并且左右两侧留白保持一致”之后，豆包的修改结果基本一步到位，不需要再返工。

这不是什么魔法，本质是信息熵的问题。你给AI的每个概念，都可能对应到某一行CSS属性；描述越精准，它在代码里定位就越稳。对我来说，我并不需要真的懂CSS，只需要学会观察页面、把看到的问题翻译成“位置加数值加效果”的句式。

3.3 修交互：把“点了没反应”背后的用户路径写出来

样式好改，交互才是我这种不会代码的人最大的难点。当时我要求做“点击卡片弹出详情”，豆包首版实现的效果是弹出一个系统级对话框，确实能点，但和我想要的“在页面内展开”完全不是一回事。

于是我的第二条指令变成了：“点击卡片后，不要使用系统弹窗，而是在卡片下方展开一段额外说明文字，同时按钮文字变为‘收起’，再次点击则收起。展开和收起的过程要有轻微的过渡动画效果。”

这就是我后来一直在用的方法：不会写标准代码词汇，就写“用户操作路径”。用户先看到什么，点击后发生什么，再点击又发生什么，把这条路径一步一步写清楚，AI会自动把它翻译成事件逻辑。你不需要会说“click”“toggle”，你只需要会说“点击”“变成”“展开”“收起”。

3.4 三轮迭代节奏：为什么每轮只改一类问题

我把二十分钟的操作拆成三个周期：第一轮用五分钟生成首版并打开测试；第二轮用八分钟做结构层面修改，处理排版、区块、导航、页脚；第三轮用七分钟做视觉细调，管间距、颜色、字号、按钮状态。

每一轮我只丢一类问题给豆包，原因在于AI的上下文能力有限，一次性堆十几个需求，前面刚改好，后面可能就忘记前面的要求。一类一类改，它能全程保持焦点，也不容易在改A的时候把B模块弄坏。

三轮之后，不管还有没有小瑕疵，我都会主动停手。因为边际收益已经很低了，再聊下去，AI表现不会有质变。剩下那些细节，等你熟练了可以单独拎出来修，但那属于“主动抠细节”，不是“被动等AI改”。这个节奏对不会写代码的人特别友好，能有效避免你在同一页面上无限消耗时间。

4. 拿到网页文件之后：从本地打开到分享出去

生成不等于交付，这个意识一定要有。网页这事，要么自己用，要么给别人用，总得有一种稳定打开的方式。这一章全部讲文件管理和部署，依然不需要写代码，但需要你按步骤点几下鼠标。

4.1 本地预览的正确姿势

一个HTML文件，理论上双击就能在浏览器里运行。但有些系统默认会拿编辑器打开它，你看到一屏英文标签，还以为出了问题。其实没坏，只是打开方式不对。右键点击HTML文件，选择“打开方式”，再选浏览器，才是稳妥操作。

如果你想改内容，用记事本其实够用，但推荐装一个免费的编辑器，比如VS Code。它不会帮你自动生成网页，但至少能高亮代码结构，让你大概区分哪些是样式、哪些是内容。更重要的是，你可以一边编辑一边按F5刷新浏览器，改一行字立刻看到效果，跟用Word改文档没什么差别。

对零基础的人来说，这一步的心理门槛比预想低很多。你不需要理解代码逻辑，只需要把HTML当成一封带格式的邮件，原文改字就行。真正要改结构的时候，把需求喂回AI就好。

4.2 不学代码也能完成的一次部署：把HTML变成网址

本地文件只能自己玩。如果要给朋友看，最笨的办法是把HTML文件发过去让他下载再打开；更体面的办法是部署成网址，对方在手机上一点就能访问。我走的路径不需要会git命令，全程网页点击操作。

具体来说：先去一个代码托管平台注册账号，国内访问推荐用Gitee，国际通用则选GitHub；新建一个仓库，名字随意；在仓库页面选“上传文件”，把index.html以及用到的图片整个拖进去；接着进仓库设置，找到“Pages”或“静态站点”选项并开启它；等一两分钟，平台会给你一个网址，点开就是你的网页。

我第一次走这个流程时卡在“仓库是什么”这个概念上，多看了两篇教程才明白，其实就是云端文件夹，不用怕。第二次再走，五分钟就完成了。这里有个细节，如果你的页面用了多张图片，要把HTML和图片放在同一个目录上传，并让AI把图片引用路径改成“相对路径”，保证页面在线上也能正常读到图片。这句话你不用理解，原样转述给豆包，它会自动改好。

4.3 验收清单：不会代码的人怎么判断“做好了”

“网页是否做好”这件事，不应该凭感觉，而要有一套不看代码就能执行的验收清单。我把清单分成四类。

功能类：每个按钮点击后有反应，每个导航链接能到达对应板块，每张卡片能触发预期效果。适配类：把浏览器窗口从宽拖到窄，页面内容不溢出，不出现横向滚动条。文字类：没有错别字，没有“Lorem ipsum”之类的示例文字，没有未替换的电话号码。内容类：图片没有裂图，没有哪个区块空着没内容，页脚信息完整。

这四条里只要有一条不过，就继续找AI改；全过了，才算阶段性完成。听起来像废话，但实际操作中，好多人不是不会验收，是根本没验收就上线，等别人点开发现按钮没反应，场面就尴尬了。

4.4 直接把HTML文件发给别人的三个坑

如果不想部署，直接发文件也可以，但有三个坑需要避开。

第一，千万别移动图片位置。如果页面引用了本机图片，你只把HTML发过去，对方看到的全是裂图。要么由AI把图片改成外部链接，要么把HTML和图片压缩成一个包再发。第二，文档编码必须是UTF-8，否则对方浏览器打开后中文全会变成乱码。第三，对方用浏览器打开本地文件时，可能会看到一条安全提示，需要点“仍然打开”，体验确实不如一个网址来得干净。

所以我的结论是：如果只是自己看看，本地文件完全够用；如果想拿出去分享，花五分钟部署成网址是最省心的路径。

5. AI生成网页的三个边界：什么时候该停手，什么时候该找专业开发

二十分钟拿到能点的网页，这个体验会让人产生一种错觉，觉得以后什么页面都能自己搞定。这是好事，但也需要认清边界。我总结成三条，都是自己试出来的底线。

5.1 演示级与产品级的差距

用草图加豆包做出来的页面，我称之为“演示级”：能展示想法，能验证流程，能拿去和同事朋友讨论需求。它和“产品级”之间，隔着数据库、登录系统、后台管理、数据安全、性能优化、兼容性测试这些真正沉重的字眼。

举个例子，我做过一个带报名表单的页面，看起来很正经，但表单提交以后，AI只是把输入内容在页面上弹出一行字，数据并没有存到任何地方。对纯展示来说这够了；对真实业务来说，这只能算一个空壳。

所以我的建议是：把AI生成页面当成“原型阶段的加速器”，而不是“项目终局的交付物”。当你需要接收真实用户的数据时，就该找专业开发来把后端补齐。这个界限越早想明白，越不会耽误事。

5.2 隐私与安全：三类信息不建议放进AI页面

这是我最想强调的部分。AI生成的代码默认没有鉴权机制，也不会主动提醒你“这个表单是裸奔的”。因此有三类信息，我强烈不建议放进这类页面。

一是密码、支付、身份验证相关的内容，比如登录框、充值入口、扫码登录区域。二是任何个人敏感信息的收集表单，比如身份证号、手机号、家庭住址。三是需要合规留存的数据业务，比如正式预约、库存管理、订单系统。

有人会问，我只是做个预约体验页面，也不行吗？页面本身可以做，但数据提交到哪里、怎么加密传输、谁来维护，必须有一个明确的接盘方。没有接盘方，就不要让真实用户往里填东西。别因为页面好看就跳过这条红线。

5.3 当维护成本超过重画成本，就选重画

用了两次之后，我的体感非常明确：AI工具适合做从0到1，不适合做无限缝缝补补。所谓“不合适”，就是你让它改一个按钮位置，它把旁边的板块弄乱了；你让它把文案从三行改成五行，整个版式塌了。

这时候不要硬修。我的习惯是“重画”：把旧页面存在的问题列成清单，告诉AI“请忽略上次的代码，按这份新需求重新生成一版”，效果往往脱胎换骨，效率也比继续打补丁高得多。

我猜测原因是，AI生成代码是概率性的，补丁式修改容易在局部引入新的不一致；整体重写可以从头规划结构，反而更干净。对不会代码的人来说，你不需要理解这个原理，只要记住“改不动就重画”这个行动准则就够了。

5.4 给不会代码的人的一条长期建议：学会用历史反馈喂AI

最后分享一个每次都能帮我省时间的技巧。第二次用豆包做网页时，我没有从零开始解释需求，而是先把上一次的评价完整复制给它：“你上次生成页面的优点是结构清楚、导航合理；缺点是整体配色偏灰暗、卡片内的文字间距太小。请继续保持前者的风格，重点优化色彩对比和阅读节奏。”

这样做的好处是，AI会带着上一轮的经验出发，生成结果直接踩在上次的肩膀上，少了一整轮的试错成本。这个方法的本质，不是你会不会代码，而是你会不会“经营一个AI队友”。

把需求、反馈、偏好整理成项目复盘，越具体，AI就越像一个真正理解你的外包同事。这大概是我这两个周末最大的收获——原来不会写代码，不代表不能造网页；你缺的从来不是天赋，而是一套把需求讲清楚的方法。

整个流程走下来，我最大的感受是，AI不是替你写代码，而是替你把脑子里的页面翻译成代码。草图是你思考的物证，豆包是执行者，你是唯一知道这页面该长什么样的人。所以别怕自己不会代码，就怕自己没想清楚。

如果你也想试，别想太多，直接拿一张A4纸开始画。我第一次画的时候，方块歪歪扭扭，注释写得到处都是，豆包照样给了我一个能点的网页。这大概是近几年我学得最快、也最有成就感的一次“技术活”。试完你会发现，真正值钱的不是那个网页，而是你终于知道怎么把一个想法讲给AI听，并且让它按你的意思动手干活。