企业官网建设流程全解析

前两天一位读者把AI生成的网页截图发给我，说“这跟我想要的完全不是一回事”。他让AI做的是小区棋牌室活动通知页，结果AI给的是带粒子背景、滚动动画、四屏营销落地页。这不是他第一次遇到AI写代码跑偏了——很多人试用AI编程时，第一轮惊喜翻车都从“帮我做个网页”这五个字开始。

AI编程跑偏这件事，乍看是工具不够聪明，实际多半是需求投喂出了问题。你想吃一碗炸酱面，却跟后厨说“来点吃的”，端上来满汉全席也不能怪厨师。第一课我不想教你怎么敲代码，而是想先解决一个更根本的问题：怎么把需求说清楚，让AI写出来的第一版网页就能用。

我自己实测下来，一份简单的需求模板，能把跑偏率至少降低六成。下面这套东西没有高深理论，都是可以直接抄走用的实战内容。

1. 为什么AI一写代码就爱自己发挥：从输入端找根源

1.1 你给AI的是“开放式作文题”，不是施工图

很多人第一次让AI写网页，输入往往是这样的：“帮我写一个网页。”如果你对面坐的是资深前端，他大概率也会愣住：什么网页？企业官网、个人博客、活动报名页、在线简历、后台管理系统？这里面的代码量和复杂度能差出几十倍。

AI也是一样的困惑，只是它不会反问你，它会硬答。基于语言模型的预测机制，当输入信息不足时，它就从训练数据里找“最常见”的网页结构来补全。最常见的是什么？是那种带导航栏、轮播图、产品介绍、价格套餐、底部备案信息的营销落地页。

于是你明明想要一张白纸黑字的通知，AI给你铺了一层炫光渐变背景，还自作主张加了滚动入场动画。

这个问题的根源在输入端：你用自然语言给了一个太宽泛的指令。自然语言本身充满歧义，但代码世界要求精确。AI没法追问，它就按自己对“网页”的平均印象去生成。这个过程用一句话总结就是：你没写的约束，AI会替你决定。

1.2 边界条件缺失，AI只能替你拍板

我把跑偏的AI输出拆开看过，发现它特别喜欢在四个维度上自行加戏：

• 视觉风格：你没说配色，它默认用蓝紫色渐变加圆角阴影。
• 页面数量：你只要一个页面，它给你做出五六个板块，硬凑成长页面。
• 交互复杂度：你没提交互，它给你加鼠标悬停、点击弹窗、平滑滚动。
• 外部依赖：它经常引用网上CDN上的字体、图标库、图片链接，哪怕你没要求。

这些自行加戏不是因为它“故意乱来”，而是因为模型在概率空间里找不到明确答案时，会选择一条看起来最合理、最完整的路径往下走。训练数据里的热门网页长什么样，它就会往那个方向靠。

你想想，哪怕让同一个AI写“一个网页”，如果你补一句“不要导航栏、不要动画、不要轮播图”，它跑偏的概率立刻小一半。这不是玄学，是约束条件起作用了。

1.3 “全能感”让脑补看起来特别自信

AI编程还有一个让人哭笑不得的特点：它不确定的时候，不会说“我不确定”，它会流畅地输出一段结构完整、注释详细、看起来非常专业的代码。新手看到这种输出很容易被带进去，觉得“这么完整肯定对”，结果一打开浏览器，要么样式崩了，要么功能不是自己要的。

这种“全能感”是语言模型的副作用。它本质上在做概率预测，追求的是“下一段文字最像什么”，而不是“这段代码能不能运行”。你要求越模糊，它的预测空间越大，输出的东西就越有可能只是“像”，而不是“是”。

我之前跟一个朋友解释这件事，用了个比喻：AI像一个话特别多、做事很积极的实习生。你把事情交代得模糊一点，它就自己编个方案去执行。你批评它两句，它下次可能改得更离谱，因为它把你批评的点和自己脑补的目标混在一起了。想让这个实习生靠谱，就得把施工图画清楚。放在AI编程里，施工图就是需求模板。

2. 一份能“治跑偏”的需求模板：七个字段内幕

2.1 先直接给你模板框架

下面这个模板是我拿十几个页面反复试出来的精简版，适合第一课的单页场景。它不是标准产品需求文档，每一条都是用来约束AI行为、减少跑偏的，你可以直接复制着用。

每个字段填的时候不用长篇大论，说人话、说清楚就行。AI需要的是“明确的约束”，不是“漂亮的文案”。

2.2 七个字段为什么能堵住跑偏

我把每个字段的作用拆开说一下，你就知道为什么缺了它容易出问题。

项目定位是最重要的一道锚。它让AI先判断“这是一个什么类型的页面”。同样是网页，报名页和营销着陆页的结构完全不同。你不说定位，AI默认往“高端大气”方向做；你说了“小区活动通知”，它至少不会给你放一个全屏视觉焦点。

目标用户直接影响字号、按钮大小和配色。给老年人用的页面，字体要大、对比要清楚；给年轻人看的技术项目页，用暗黑风也没问题。这个字段相当于让AI替用户着想，而不是替自己“炫技”。

页面结构是给AI画好的骨架。它相当于告诉AI：“我只想要这几层楼，别给我盖五十层。”AI跑偏最常见的方式就是多出板块、多出区块，你在结构里把清单列出来，它就没法自由扩编。

核心功能这个字段最容易漏。很多人上来就说“做个报名页”，但不说清楚提交按钮点了之后要干什么。AI可能会做成跳转到某个网址，也可能会自己写一个邮件发送接口，而这些都不是你想要的。你明确写“点击后页面不跳转，就地显示成功提示”，它就不会去画蛇添足。

视觉风格是给AI的审美做限制。不说配色，它就用最保险的蓝白渐变；说了配色，它至少会照着来。想进一步省事，可以在模板里写“CSS变量统一管理颜色，方便以后改主题色”，这样后续修改也会轻松很多。

技术边界对新手来说最关键。很多AI生成的网页用到了在线CDN、外部字体库、远程图片，这些资源一旦断网或者链接失效，页面就大面积空白。你在技术边界写清楚“单文件、无外部依赖”，出来的页面会更皮实，也更容易上手。

验收标准是最后一道防跑偏闸门。它不直接约束AI生成过程，但它约束你：拿到代码后你不要继续聊“再帮我加点这个、加点那个”，而是先对照验收标准检查有没有达标。这一步能拦住很多无效折腾。

2.3 进阶：加一条“负向清单”

模板里最好再加一个“负向清单”，也就是明确告诉AI“不要做什么”。AI特别擅长加戏，负向清单就是给它划上限。

举个例子，可以在技术边界里追加一句：“不要使用轮播图，不要使用弹窗，不要使用任何动画和动效，不要使用外部图片链接。”一句话就能省掉很多翻车机会。

负向清单不一定要写很长，把你最不想要的三五样东西列出来就行。我一般至少会写：“不要新增额外板块，不要自动弹窗，所有装饰性图形用纯CSS画。”然后在AI开始写代码前，直接把这句话当成最高优先级。

3. 用模板做出第一个网页：一次完整的实战记录

3.1 这次我选的案例与填好的模板

理论说再多，不如直接跑一遍。下面我以“小区二手书互换活动报名页”为例，走一遍完整流程。你可以把这个案例替换成自己的项目，比如个人介绍页、宠物领养信息页、读书笔记汇总页等。

我的模板填写如下：

• 项目定位：小区二手书互换活动的报名与信息展示页，静态单页。
• 目标用户：小区居民，年龄段35-60，不熟悉新技术，习惯大字号和手机浏览。
• 页面结构：顶部活动标题、活动时间地点说明、可交换书单列表、报名表单、常见问题三问。
• 核心功能：表单填写姓名、楼栋号和手机号，点击报名提交后，页面不跳转，按钮下方显示“报名成功，活动当天现场签到即可”；书单列表用表格展示，包含书名、原主人、交换条件。
• 视觉风格：绿色和米白为主，圆角卡片，字体偏大，排版宽松，避免花哨效果。
• 技术边界：只用一个HTML文件，CSS写在style标签里，JavaScript写在script标签里，不用框架，不用数据库，不引用任何CDN和外部图片。
• 验收标准：双击html文件能在Chrome正常打开；手机宽度下内容不横向溢出；没有破图或乱码；所有文字清晰可读。

3.2 第一句提示词这样写

模板填好之后，不是直接把七段文字复制给AI就行，还要加一句引导词。重点是要让AI知道：“这条需求说了算，你别发挥。”

我实际使用的提示词是这个结构：

请严格按照下面的需求模板生成一个网页。必须遵守技术边界，不要新增任何需求里没有提到的功能和板块。代码写在单个HTML文件中，包含完整的CSS和JavaScript。如果某项功能较复杂，不要自行实现，用 TODO 注释标出即可。需求如下： 【项目定位】小区二手书互换活动的报名与信息展示页，静态单页。 【目标用户】小区居民，年龄段35到60，手机浏览为主。 【页面结构】顶部活动标题、活动时间地点说明、可交换书单列表、报名表单、常见问题三问。 【核心功能】表单包含姓名、楼栋号、手机号；点击报名提交后页面不跳转，按钮下方显示“报名成功，活动当天现场签到即可”；书单表格包含书名、原主人、交换条件。 【视觉风格】绿色和米白配色，圆角卡片，大字号，排版宽松，不要动画。 【技术边界】只用一个HTML文件，CSS写在style标签里，JS写在script标签里，不使用框架、数据库，不引用CDN、外部图片。 【验收标准】双击打开显示正常，手机宽度下无横向滚动。

这段提示词的核心特点有两个：一是把“不要新增需求外功能”写在了开头，二是用“如果复杂就用 TODO 标出”替代了AI自行扩功能。后面这一点特别管用，很多AI看到复杂需求时不告诉你做不到，而是硬造一段看起来很厉害但根本不运行的代码。尽早让它学会“标TODO”，能少踩很多坑。

3.3 拿到第一版代码，先做“验收”，别急着继续改

AI生成后，把代码复制到电脑上，命名成index.html，双击用Chrome打开。这个动作一定要先做，不要着急让AI“再帮我改改”。先对照验收标准走一遍：

• 页面有没有显示完整？
• 表格有没有正常展示？
• 表单提交后有没有显示成功提示？
• 把浏览器窗口拖窄，模拟手机宽度，内容有没有溢出？

我第一次跑的时候，页面整体结构比预期好，但发现两个问题：一是手机宽度下表单输入框有点挤，二是“提交成功”提示出现后，页面滚动位置没变化，用户不容易看到。这两点属于“验收阶段”发现的典型问题，适合进入下一步修改。

3.4 两轮修改记录：每次只提一条明确指令

修改AI生成代码时，最忌讳一次提五条意见。AI会努力满足所有需求，结果常常为了某个细节把其他部分改崩。我的做法是“一轮只改一件事”。

第一轮我提的是按钮反馈问题：

请修改表单提交流程：点击报名按钮后，不要跳转页面，在按钮下方显示一行绿色文字“报名成功，活动当天现场签到即可”。其它所有布局、颜色、结构保持不变，只改JavaScript部分。

第二轮我处理的是手机端适配：

请优化手机宽度显示：所有卡片和表单中，宽度不超过屏幕的95%，输入框左右留出适当空间，不要出现横向滚动条。只调整CSS，不要动HTML结构和JavaScript逻辑。

两次修改之后，页面已经达到验收标准。整个过程我没有手写一行代码，但我全程在扮演“验收人”和“改需求的产品经理”这两个角色。这种意识，比背100条提示词都重要。

4. 跑偏高发场景与急救方案：我帮你提前踩过这些坑

模板不是万能的，它在大多数情况下能把跑偏率压到很低，但AI生成的过程依然有随机性。下面三个场景是新手最容易遇到的，我把急救方法一起写出来，遇到时照着抄就行。

4.1 场景一：越改越乱，刚改好的功能转眼就没了

这是最常见的情况。你在一个对话里不断让AI追加修改，聊了七八轮之后，突然发现第一版里正常的表格变了，按钮样式也丢了。你想往回找，但聊天记录已经滚得密密麻麻。

原因在于长对话里，AI收到的信息太多，新指令和旧代码之间出现矛盾。它为了满足你最新这句话，可能偷偷丢弃了前面的某个约束。

急救办法很简单：

• 每改完一轮，就把当前代码保存成一个版本文件，比如index_v1.html、index_v2.html。
• 不要在同一个会话里连改超过三轮。三轮还改不明白，就另起新会话。
• 新会话里重新粘贴简洁版需求模板，然后把旧代码整段发过去，再说目标改动。

我自己的习惯是每轮修改前先另存旧版本。这不用什么高级工具，就是文件管理器里复制粘贴。跑偏不可怕，可怕的是没有后悔药。

4.2 场景二：图片和图标全是“空气”，打开全是破图

AI生成网页时经常引用外部图片链接。问题在于，这些链接可能是模型“编”出来的，也可能来自不可靠的第三方站点。你双击打开页面，显示出一堆破图标和空白占位，效果非常劝退。

这也是我在“技术边界”里围堵外部图片的原因。如果你已经生成的代码里出现了外链图片，不用跟AI讨论“为什么用外部链接”，直接给它下死命令：

删除所有外部图片链接。凡是原来放图片的位置，都用CSS渐变或Unicode文字符号代替，确保不依赖任何外部请求。

如果页面里确实需要真实图片，比如活动海报，那就提前把图片下载到本地，跟html文件放在同一个文件夹里，然后在需求里明确写“图片使用相对路径，例如 img/poster.jpg”。这一步看起来简单，却是很多新手完全没意识到的问题。

4.3 场景三：你说“换个颜色”，AI把整个页面重建了一遍

颜色这种需求听起来很明确，但AI的“换颜色”可能指全局色板、按钮色、背景色、文字色。它一激动，干脆把所有CSS都重构了，结果你原本满意的布局也被顺带改掉。

急救方案是在提示词里把“只改CSS”和“不动结构”一句话钉死：

把页面的主题色从蓝色改成绿色。只改CSS中变量和涉及颜色的部分，不要动HTML结构、不要新增样式类、不要改任何JavaScript逻辑。

如果你一开始就在模板里写了“用CSS变量统一管理颜色”，这时只需改一个变量值，AI的发挥空间会被压缩到最小。这也是为什么我总强调技术边界和代码规范性。

还有一个通用紧急句：让AI先列计划再动手。

先不要修改任何代码。请列出你打算调整的3个点，我确认后再执行。

这句话能拦住绝大多数“大刀阔斧式跑偏”。AI先花几秒钟输出计划，你一看不对就喊停，比让它直接改完再看结果省时得多。

4.4 生成结果忽然崩了，优先级最高的处置顺序

真遇到代码崩了、页面白屏的情况，不要慌，按这个顺序处理：

1. 把当前代码复制回AI，请求它“先解释哪一行导致报错，再给修复方案”。
2. 如果解释不清，直接回滚到最近能正常打开的版本。
3. 新会话里粘贴回滚版本代码，重新提出修改需求。
4. 修改需求必须包含一句“不要重构整体结构，只做局部修复”。

这套顺序我用了很久，很少有一次解决不了的。核心思路是：保住能用的版本，再在小范围内做手术。

5. 第一课把期待值放对：模板能兜底，但别指望全自动

5.1 模板的适用边界

这套需求模板最适合做单页、展示页、轻交互页面。如果你想做登录系统、在线支付、内容社区、实时聊天，光靠模板聊天是聊不出来的，你需要先理解后端、数据库、接口这些概念。第一课不用碰那些东西，但心里要有个边：不要拿着模板去硬啃一个复杂项目，最后让AI给你“造”一堆根本跑不起来的接口代码。

更务实的做法是：如果一个功能听起来复杂，就在需求里明确写“先不做”，或者“用按钮提示功能开发中”。一个能在浏览器里正常打开的简单页面，比一个写着“登录、分享、收藏”但全是死按钮的豪华页面有价值得多。

5.2 第一课成功的标准

第一课的“会做网页”到底指什么？我的判断标准很简单：

• 能独立把需求模板填出来。
• 能把AI给的代码保存成html文件并用浏览器打开。
• 能对照验收标准发现问题。
• 能通过一轮只改一件事的方式，把页面调成自己想要的样子。

这四条里没有一条要求你“手写代码”，但每一条都是编程思维的地基。你会开始像一个开发者那样思考：先定义问题，再确定边界，然后验收输出。比起背语法，这个思维过程才是长期有用的。

5.3 下一课可以练什么方向

如果你第一课已经走通，下一步我建议从“文字模板”升级到“图像配合”，也就是先把页面结构用线框图画出来，再让AI照着还原。你可以用纸笔画，也可以用PPT、Figma这类工具。把线框图转成一句话发给AI：

这是页面的线框结构。按这种结构生成HTML，不要新增任何线框里没有的模块。

这种做法的好处是，页面结构更稳，AI几乎不会再自由扩版。等到这一步也熟练了，你再去看基础HTML标签和CSS属性，会发现自己理解得非常快，因为你已经带着实际项目问题在学习。

6. 一份我常用的“反跑偏”句式清单：直接抄走用

6.1 单轮修改专用句式

• “只做一个修改：……。其余CSS、HTML结构、JavaScript逻辑全部保持原样。”
• “不要新增页面区块、不要新增交互、不要新增文案。”
• “对于修改效果，请先说明你打算改哪几处，我确认后再改。”

这三句能覆盖绝大多数局部调整场景。核心是给AI画一个“最小改动范围”。

6.2 兜底保护句式

• “不要使用任何外部链接资源，包括CDN、字体、图片、图标库。”
• “如果某处不确定怎么做，不要自己编造数据或功能，用TODO注释标出。”
• “如果某项改变会影响现有布局，请采用更保守的方案，并在回复第一行说明。”

兜底句作用于AI的“自信脑补”，强迫它遇到歧义时选择保守路线而不是炫技路线。我不要求它“不犯错”，只要求它“犯错时留有余地”。

6.3 记录习惯比工具更重要

最后说点实在的：我见过很多人收藏了两百个AI编程教程，最后依然做不出一个能用的页面，因为没人教他们做记录。我自己就养成了一个很笨但很有效的习惯——每个项目建一个文件夹，里面放着：

• 需求模板的md文件。
• 每一版html文件，按v1、v2、v3编号。
• 一段记录踩坑过程的文本笔记，只写日期和问题描述。

一旦发现AI这轮跑偏，我不依赖聊天记录找回老版本，而是直接打开文件夹里最近一版能用的文件。这一套方法我把很多朋友都带上了路，效果比任何提示词都稳定。

你也可以直接把上面的模板和句式复制走，第一次用的时候不需要理解太深。填需求时如果某个字段不知道怎么写，就先用一句话说“这是个展示信息的网页”，AI也会跑偏得轻一些。慢慢试上两三个页面，你就知道哪些字段对你来说最重要了。等你回头再看“AI写代码总跑偏”这个问题，大概率会笑着说一句：不是AI太能跑，是我当年真的说得太少。