企业官网建设流程全解析

我自己的主业跟编程八竿子打不着，但这两年越来越频繁地需要“一个网页”——活动报名页、个人作品展示、临时项目落地页。以前遇到这种事只能求人、等排期、或者硬着头皮找个模板改半天还改不明白。最近试了条新路：拿一张A4纸，画个粗糙到家的草图，拍张照丢给豆包，口头说几句要求，大概二十分钟还真给我端出一个能点按钮、能跳转、能展示内容的网页。整个过程没写一行代码，等于把“做网页”这件事从“求程序员”变成了“指挥AI”。这篇文章就把我用豆包从草图到成品网页的完整流程、提示词写法、踩过的坑，以及哪些事AI能干、哪些事它真干不了，一五一十说清楚。

不用怀疑，也不用担心“AI做出来的网页会不会很垃圾”。我一开始也这么想，但实操下来发现，豆包这类大模型工具对“网页”这件事的理解，比大多数不写代码的人想象中要靠谱得多。它懂得HTML、CSS、JavaScript这三者的分工，能根据你的一句话甚至一张图，还原出布局、配色、和基本交互。关键在于你会不会“提需求”。只要你把需求表达得明白，它生成的东西就真的有模有样。

1. 不写代码做网页，这事的逻辑到底是什么

1.1 豆包不是“代码生成器”，它更像一个什么都懂一点的“外包开发”

先理清一个很容易被误解的事情：豆包做网页，并不是在后台拖拽组件、拼装模板，也不像网页编辑器那样给你一堆现成的模块让你摆放。它本质上是把“自然语言（甚至是一张照片）”翻译成“前端代码”，再由你自己的电脑浏览器把这些代码渲染成网页。

你可以把这个过程理解成：豆包是那个“听得懂人话、也看得懂草图”的中间人，HTML是房子的结构，CSS是装修风格（颜色、大小、间距），JavaScript则是水电线路和开关（按钮、弹窗、跳转）。豆包做的，就是把你脑子里的想法转述成“结构、装修、水电”的施工图纸，也就是代码。你拿到代码之后，放到浏览器里一打开，就变成了能看到的网页。

这也是为什么它适合不会写代码的人：你不需要理解任何一行代码是什么意思，只需要让豆包理解你想要什么。

1.2 为什么一张草图比“纯打字描述”效率高一倍

我试过之前完全不打字描述需求：我告诉豆包“我想要一个带导航栏、产品介绍区、联系方式表单的落地页”，它会生成，但生成出来的东西总感觉“不太是我要的样子”——因为我脑子里那个页面是分左右两栏的，导航颜色是深蓝的，主按钮要在右下角。这些细节靠打字描述，得打很多字，而且一来一回好几轮才能校正。

画草图就不一样。A4纸上用粗笔画出大概的版块位置、文字说明、箭头标注，甚至旁边写“按钮放这里”“颜色深色”“图片大约占一半”，豆包通过图片识别能“看”到你的意图。它接收到的信息密度远远高于文字，而且很少误解你。我画过一张潦草到“只有自己看得懂”的草图，豆包照样能理解哪个区域是导航、哪块是图片、哪个是按钮。

所以我的建议是：如果你脑子里对页面有哪怕一丁点具体画面的想象，别偷懒，画出来。哪怕画得丑到不好意思给人看，直接拍照扔给豆包就好。

1.3 这条路线到底适合谁

• 完全没写过代码，但有明确页面想法的普通人：比如做手工艺品想展示作品、组织线下聚会需要报名页、开店需要产品介绍页。
• 需要快速出网页原型的产品经理或运营：以前画原型图丢给开发等排期，现在自己几分钟就能生成一个能点、能跳的HTML文件，拿去讨论确认需求，沟通成本低很多。
• 想学前端但迟迟没入门的人：你先让AI把“房子”搭出来，再去看它用的“砖”和“水泥”（代码），比从教科书硬啃HTML标签直观得多。

这条路线不适合的，后面第五章详细说。反正一句话：快速做展示型、信息型页面，它很能打；一旦涉及登录账号、支付、数据库存储，它就只能帮你把“壳”写出来，真功能还得靠真正的后端开发。

2. 一张能被豆包看懂的A4草图，关键是画出这几个信息

2.1 草图不需要好看，但版块边界要清楚

我见过很多朋友一听“把想法画下来”，就开始追求精美，用尺子量、拿彩色笔分区。完全没必要。豆包识别图用的是视觉理解能力，不是看你画得多规范，而是看有没有足够明确的结构线索。

画草图时，我做这几件事：

• 用粗笔把页面分成几个大方块，每个块代表一个区域（比如顶部导航、中部主视觉、下方三个特点卡片、最底部的页脚）。
• 在每个方块里，用中文写上“这里放产品名”“这里放轮播图”“这里放三个优点”“这里放付款二维码”，反正字丑没关系，豆包认字能力比想象中强。
• 用箭头标注关键动作：比如从“立即购买”按钮画一条线指向“跳转到付款页”，豆包就能在生成交互时把这个逻辑做进去。
• 如果有特别想要的颜色，直接写在图上：“背景深蓝色”“标题用橙色”，别指望它通过黑白草图自己“猜”出颜色偏好。

我自己最得意的一张草图，实际上就是拿铅笔在快递纸箱上画了不到两分钟，然后用手机拍下来的。豆包愣是把“一个消息发布页”理解得八九不离十，发布按钮、消息列表、顶部搜索框全对了。

2.2 给豆包的“描述文字”就像开口需求，最好也写成三句话

画完草图不等于直接扔图就行，大多数情况下需要在发图的同时配一段文字描述。这不是为了凑流程，而是帮豆包抓住“重点和边界”。

我把自己的提示词固定成一个三段式：

第一句：这个网页是干什么用的，给谁看。 第二句：页面的整体风格感觉是什么。 第三句：最重要的功能和必须做到的交互是什么。

举个例子，我做过一个“家乡特产展销页”，当时的描述就是：“这是一个售卖本地土特产的展示页面，给来旅游的人看，希望有清爽自然的田园风格。最重要的功能是，游客可以点击每款产品，查看详细介绍，并跳转到微信咨询的二维码页面。”

图配文一起发过去，第一版生成的质量就比我之前纯文字描述迭代三回还高。原因很简单：草图负责空间布局，文字负责意图和调性，各干各的活，互相补漏。

2.3 关键词方向：网页搭建、交互、API，提前想好自己用在哪

顺便提一句，在跟豆包交互的时候，你有余力的话，可以顺带了解几个基础关键词：网页搭建（就是整体框架）、交互（按钮点击后的反应）、以及API接口（如果你以后想让页面自动显示天气、汇率或外部数据）。不需要背，但知道这些词，在和豆包沟通时更“对齐频道”。

我这次做草图页面，其实一开始只说了网页搭建，后来发现它生成的页面是静态的，只有展示没有交互，才补说了一句“点击发布按钮，把消息添加到下方列表里”，豆包马上就懂了，补了一段JavaScript逻辑进去。这个经历也提醒我：别怕名词不专业，只要把想要的效果描述清楚，AI从来不跟你较劲术语。

3. 从草图到能点网页：二十分钟实操全记录

3.1 前5分钟：喂图 + 提需求，让豆包先出一版粗糙框架

第一步，把草图照片上传到豆包聊天窗口。豆包支持多模态理解，图片、文字一起发它也消化得了。我会在图的基础上加上开头那段“三段式描述”，然后明确说：“先给我一版完整的HTML代码，不要跟我说原理，不要给我讲解，直接把代码发出来，我要先看整体效果。”

有人可能觉得这要求太“冲”。我的经验是：豆包默认会比较啰嗦地先解释一通，然后才给代码。既然你不写代码，那些解释对你帮助不大，不如直接要代码，节省时间。再说，你后续要修改，也需要基于“现有代码”来改，而不是基于一个抽象方案来讨论。

坐等它输出代码的间隙，可以先把另两件事做了：想清楚网页标题叫什么，以及准备2到3条备用文案（比如页面的主标题、正文、联系方式），因为第一版生成后大概率会用到这些占位文本。

3.2 第6到第10分钟：第一轮修改，像给装修师傅提意见一样提

豆包生成完第一版代码后，我一般不会直接说“好”或者“不好”，而是把代码复制保存为HTML文件，用浏览器打开看效果（具体怎么保存，见第4章）。看完之后，挑出最刺眼的几个点，一次性地反馈给豆包。

这里有个特别重要的细节：修改意见要具体到“哪里不对、怎么不对、想改成什么样”，千万别只说“感觉不太好看”。

“不太好看”是AI最难理解的表达——它不知道是颜色刺眼，是间距不对，还是字体太丑。正确示范是：“顶部导航栏的背景色太深了，跟下面的白色内容区分太明显，改成浅灰色，高度压缩一点；产品卡片之间的间距太小，加20像素左右；页脚这行字太小，放大到14像素。”

你看，我没有用任何专业术语，只说“颜色太深”“间距太小”“字太小”，豆包就精准改动了。这一轮来回是整个流程里最重要的一环，改到你觉得顺眼，大概需要2到3次。

3.3 第11到第15分钟：重点验证“按钮能不能点、跳转对不对”

页面光是“摆着好看”还不够。标题里说的“能点的网页”，重点就在“点”这个字上。我第一次做的时候踩了个坑：看着页面挺像样，结果点“立即购买”按钮，没任何反应。所以我后来会在网页预览阶段专门花几分钟做“点击测试”。

测试方法很简单：一条条去点页面上所有的按钮、链接、选项卡，看有没有反应、反应是否符合预期。如果发现某个按钮点了没反应，就把那个按钮的上下文告诉豆包，比如：“页面左边有个‘查看详情’按钮，我点了没反应，帮我检查是不是没有绑定点击事件，点击后应该弹出一个商品详情窗口。”

放心，豆包听得懂“绑定点击事件”这种词，实际上你就算只说“按钮是死的，点不动”，它也能修正。这轮测试特别重要，因为AI生成代码偶尔会漏掉事件绑定，这是它目前最常犯的“小毛病”之一。

3.4 第16到第20分钟：打磨文案细节，把占位内容换成自己的真内容

形态和交互都对了，最后一步就是“换内容”。把页面里那些占位用的“XX公司简介”“这里是产品介绍”“请填写信息”换成你真实要展示的文字和联系方式。这一步完全靠嘴说就行：“把第一张卡片里的标题改成‘手工黑糖’，正文改成‘低温熬制六小时’，下面的链接换成 https://xxx。” 豆包改完，你重新打开HTML一看，这个页面就真正成了“你的”页面。

我统计过，如果需求明确、草图画得好、而且不需要太复杂的交互，从打开豆包到拿到一个自己满意的HTML文件，真的能在二十分钟内完成。这不是噱头，因为大部分时间消耗其实就是上面这几轮对话，而每一次对话等待时间就十几秒。

4. 生成之后：保存、预览、分享，一步都不能省

4.1 把一堆“代码”变成一个可以双击打开的网页

豆包输出的是一段代码文本，不是直接给你一个文件。如果你不知道这段代码怎么用，它在你手里就等于一堆天书。保存方法其实特别简单：

• 复制豆包输出的完整代码。
• 打开电脑上的记事本（Windows叫记事本，Mac打开“文本编辑”）。
• 粘贴进去，然后点击“文件-另存为”，文件名填index.html，注意编码选“UTF-8”，保存类型选“所有文件”。
• 保存后，双击这个文件，系统浏览器会自动打开，你就能看到生成的网页了。

为什么强调UTF-8编码？因为我第一次保存的时候就偷懒直接保存，结果网页里所有中文全部变成乱码。原因就是记事本默认编码不是UTF-8，豆包生成的HTML头里明确写了“charset=utf-8”，代码和保存编码对不上，中文就显示成乱码了。这是新手最容易踩的一个坑，先给你排了。

如果你有编程基础，或许还会想“那我是不是可以直接在线预览？”也行，很多代码编辑类工具都带预览功能，但对不写代码的朋友来说，记事本大法就是零门槛方案。

4.2 想让别人也能打开？把HTML文件变成一个“链接”

通过双击自己电脑上的HTML文件，只有你能看。要想发到微信群、放到简历里、给客户看，就需要把文件部署到服务器上。有很多静态托管服务，操作不复杂，核心就是把你的index.html（以及可能引用的图片文件）上传上去，平台自动给你一个公开网址。

我用过最顺手的流程是：注册一个静态托管平台的账号，新建一个项目，把index.html直接拖进去部署。几分钟后就会得到一个类似你的项目名.平台域名的网址，任何人点开就能访问。好多平台现在对个人用户做出了免费额度，个人展示类页面一般用不到额度上限。

这一步可能对纯小白来说还是会有一些“接触新平台”的陌生感，但相信我，它比注册一个社交软件账号还简单，因为整个过程中你只需要处理上传文件这一个动作。

4.3 常见问题速查表

保存、预览过程中出现的常见问题，我整理成一张表，基本覆盖了90%的“我第一次弄怎么就这样了”的疑问：

每一行都是我自己真实遇到过的状况。别怕，都不用从头来，让豆包修就行。它的最大价值就是“改错成本极低”——你永远不需要从零开始啃代码，告诉它症状、截图给它看，它出修复版的速度比你自己研究半小时快得多。

5. 小白用豆包做网页，绕不开的几条建议和边界

5.1 我踩过几次坑之后总结的五个实用心得

第一，不要寄希望于一次对话生成完美成品。哪怕你草图画得再细、描述再准确，第一版顶多只能算毛坯房，装修还得靠后续几轮修改。心态放平，把它当“沟通对象”而不是“许愿机”。

第二，每轮修改只集中说三到五个问题。我试过一次噼里啪啦提了十个问题，豆包改完以后，有两处改错了，有三处漏了。不是说它能力不够，而是信息量一多，它的注意力容易被稀释。分批次处理，一轮解决布局，一轮解决配色，一轮解决文案，效率反而高。

第三，每次让它修改之前，先把当前代码保存好。豆包输出的新版本不一定比旧版本好，如果你把旧版本覆盖了，想回退就没得退。我是每次都在文件名上加版本号：index_v1.html、index_v2.html。等彻底满意了，再清理掉旧版本。

第四，让AI“只改局部”，不要每次都要求“整体重写”。有时候你只是觉得页脚颜色不顺眼，如果一句“重新改好看一点”，它可能把整个页面风格都改了。正确的说法是“只修改页脚部分，其他区域完全保持原样，将背景颜色改成深灰色，字体改成白色，并在左侧加一行版权信息”。加“只修改”“其他保持原样”这几个字，比什么都管用。

第五，重要页面上线前，自己一定要点一遍所有按钮。AI生成的代码偶尔会有逻辑错误，比如跳转地址写错、表单提交后没提示、弹窗点不开。你不是程序员，不需要会修，但你必须是那个“验收的人”。

5.2 什么情况下豆包会“失效”，趁早知道趁早避免

讲了很多它能做到的，也得说清楚它做不到的，免得你兴冲冲去试，结果卡住后觉得被坑了。

如果你做的页面需要“账号登录”，需要用户“注册并保存个人资料”，需要“在线支付”，需要实时从数据库调取数据——这些都属于后端功能，光靠豆包生成的HTML文件是没法独立完成的。“能点开”“能跳转”“能展示内容”的网页，和“可以注册、下单、付款的网站”，本质上是两个物种。

前者做完就是一个静态的HTML文件，浏览器直接能跑；后者需要服务器、数据库、接口，这些不是豆包一个聊天框能搞定的。豆包可以帮你写前端壳子，但那等于只给你建了一个好看的店面，店里的收银系统可不在它服务范围内。

还有一类需求也要注意：它生成的代码里偶尔会引用一些外部资源（比如远程字体库、图表库），如果这些资源源站有时候访问不稳定，页面就会出现偶尔打开慢或部分模块空白的情况。遇到这种情况可以换国内可用性更高的资源库，或者让豆包“把所有JS和CSS都合并到HTML文件里不要外链”。

5.3 同样这个AI，还能顺手帮你干点别的

做完网页，你会发现豆包的价值其实不只是在“网页搭建”这一个场景。它既然能听懂你的自然语言去生成代码，那很多日常任务同样可以交给它。

比如之前网上很多人讨论的“豆包清理电脑C盘指令”“豆包优化电脑的指令”，核心逻辑就是这个：你不需要记那些复杂的diskpart、cleanmgr命令，直接告诉豆包“C盘满了，想清理临时文件但怕误删，给我一套安全的命令行操作流程”，它会给你一条条列出来，你复制到终端执行就行。这和我用草图让豆包做网页的路径本质一模一样——专业能力由AI补位，你自己只负责“把需求说清楚”。

再比如我后来做的“豆包如何调用API接口”的学习笔记，也是用类似方法：让豆包先给我解释API是什么，用日常聊天的口吻讲明白之后，再让它给出一段“在HTML里调用天气接口并显示”的示例代码。这样我就从一个完全不懂API的小白，慢慢理解了自己页面上的那几段动态效果是怎么来的。

本质上，豆包这类工具正在模糊“懂技术”和“不懂技术”的边界，让想法本身成为最大的门槛，而不是代码。你不需要懂那些复杂的实现细节，但你需要更清楚自己想要什么、画出来、说清楚，然后把重复的翻译工作交给AI。

最后再分享一个小技巧：保存网页时给文件取一个和内容相关的名字，比如tea.html而不是新建文档.html。这样以后改版、备份、找到它都方便。等哪天你积攒了十几个自己做的页面，再回头看这个从一张A4纸开始的过程，会发现你已经不知不觉学会了“用代码思维看网页”——不用读懂每一行代码，但你已经知道它们为什么长得这么整齐、为什么按钮能听话地弹窗、为什么手机上打开不会挤成一团。这种掌控感，比“会写代码”本身还让人上瘾。