企业官网建设流程全解析

P.S. 无意间发现了一个巨牛的人工智能教程，非常通俗易懂，对AI感兴趣的朋友强烈推荐去看看，传送门https://blog.csdn.net/HHX_01

前言

说实话，我第一次听说"Vibe Coding"的时候，以为这是一种新型冥想。
就是那种，你坐在电脑前，闭上眼睛，感受宇宙的频率，然后代码就自己从键盘缝里长出来了。
结果试了一次，睁开眼，屏幕上只有一行字：“Hello World”——还拼错了。
后来我才知道，Vibe Coding不是" vibe 着 vibe 着就 coding 了"，它是有套路的。

先搞清一件事：Vibe Coding ≠ 乱Accept

Andrej Karpathy 原话是"fully give in to the vibes"，翻译过来不是"放弃治疗"，而是"周末搞原型的时候可以浪一点"。
就像你周末可以穿睡衣出门倒垃圾，但周一上班还穿睡衣，HR会找你谈话。
所以真要把项目做靠谱，你得换个身份——从"打字员"变成"产品经理+代码评审官"。
AI是那个手脚麻利但偶尔会焊错板的实习生，你才是车间主任。

范式总览：The Review-Driven Loop

这里有个六步循环，我管它叫"AI防坑六连拍"。

① Spec（写清楚做什么）
→ ② Context（把约束喂给AI）
→ ③ Generate（生成小步增量代码）
→ ④ Review（像审PR一样逐行看Diff）
→ ⑤ Test（跑通验证）
→ ⑥ Commit（过了才入库，永远可回退）

这六步，跳一步，技术债就偷偷累积。
技术债这玩意儿跟信用卡账单一样，你觉得"就欠一点没事"，等到还款日，你会发现AI已经给你欠了一套房。
你跳过Review，就像跳过体检——感觉省事了，但肿瘤已经长到三期了。

Phase 1：项目初始化（工程规范前置）

很多人一上来就说：“AI，帮我做个网站。”
这就像你走进一家餐厅，对厨师说：“做个菜。”
厨师可能给你端上一盘仰望星空派—— technically 是道菜，但你敢吃吗？

1. 建一个 AGENTS.md（项目"宪法"）

放在项目根目录，这叫AI的"入职手册"。
没有这玩意儿，AI就像没有KPI的实习生，今天用React，明天觉得Vue也不错，后天突然给你引入了一个叫"LeftPad 2.0"的库。
有了这个文件，你之后每句 prompt 都不用重复背景，AI会自觉对齐你的规范。

Project: MyApp — 一个SaaS/工具/游戏

Stack

Next.js 15 · TypeScript(strict) · Tailwind · Supabase(PostgreSQL)

目录约定

src/app/ → 路由页
src/components/ → 可复用UI
src/lib/ → 业务逻辑 & DB查询（DB不准在组件里查）

禁令

• 不许引入新第三方库（除非问我）
• 所有API输入走 Zod 校验
• 报错要有边界处理，不准 silent fail

2. 目录结构早定，别让AI自由生长

AI的天性和我的猫一样——眼前最优解，不管长期后果。你把毛线球放那儿，它能给你织出一张蜘蛛网。
AI写代码也一样，会把逻辑堆进一个大文件，文件名还叫"utils_final_final_v2_really.ts"。
你要在生成大量代码前先把骨架钉死，不然AI会给你盖一座"代码违章建筑"。

Phase 2：日常开发循环（增量，不要大爆炸）

我见过有人给AI下指令：“帮我做一个带登录、商品管理、购物车、支付的电商网站。”
AI听完，沉默了三秒，然后给你生成了一坨代码。这坨代码的特点是：过度设计、版本冲突、以及你看不懂。
就像你让实习生一天盖完一栋楼，他确实盖完了，但你敢住吗？

正确姿势：Micro-Commits

每个 prompt 只做一个可独立验证的小任务。
先定类型和数据库schema，再写一个路由，再写一个页面，再接auth。
一步一步来，就像吃火锅，一片一片涮，你别把整盘肉倒进去，最后得到一锅肉汤。

Prompt 的黄金公式

给AI下指令也有套路。
弱prompt：“加个用户设置页。”
AI听完，给你加了一个页面，但用的是jQuery，配色是荧光绿，还配了一首自动播放的BGM。
强prompt要包含：上下文 + 精确描述 + 约束 + 示例。
就像你点外卖，你说"来个饭"，可能收到一碗白米饭。但你说"来份黄焖鸡，不要辣，多加土豆，参考上次那份"，这就靠谱多了。

在 app/settings/page.tsx 建用户设置页，可改 displayName/email/avatarURL。
复用现有 UserForm 模式（见 app/profile/page.tsx）。
fetch user via getServerSession，update via PATCH /api/user。
加 Zod schema，success 时调 sonner toast（见 lib/toast.ts）。

Phase 3：质量底线（不做这些 = 定时炸弹）

永远看Diff。AI会偷偷import新包，就像孩子会偷偷往购物车里加零食。
你得一包一包检查，不然到家才发现，购物车里多了个无人机。
测试是护栏。理想模式是你写测试用例，AI填空让测试变绿。
这就像老师出卷学生答，但AI是那个会偷偷翻书的学生，你得盯着。
上下文管理也很重要。对话长了AI会变蠢，就像你开会开了三小时，最后大家都不知道在讨论什么。
该清上下文就清，关键信息写进文件里，别让AI在熵增里变成"人工智障"。
安全红线：绝不硬编码密钥。AI特别喜欢硬编码，它觉得"这样方便啊"。
是，方便，方便到黑客可以直接登录你的数据库，把你的用户数据打包下载，顺便给你发个勒索邮件。

成熟度自检：你在 L1/L2/L3 哪一级？

L1 新手：复制AI代码不问why。就像去餐厅吃饭，厨师说"这盘菜可能有毒"，你说"没事，我先尝尝"。风险极高。
L2 进阶：会review diff、设约束，但底层原理模糊。能跑，但维护起来像考古——你得一层一层挖，才能搞清楚当初是谁埋的雷。
L3 专家：你定架构和边界，AI当执行器。AI是杠杆，人是大脑。这时候你终于从"被AI带着跑"变成了"骑着AI跑"。

一句话总结

Vibe Coding的范式不是"不写代码"，而是：规范前置 → 意图精确 → 增量交付 → Diff审查 → 测试关门 → 频繁提交。
把AI当极快的实习生——你不会因为他敲得快就让代码直接上线，同理，别因为AI快就跳过工程纪律。
毕竟，代码可以vibe，但线上事故可不会跟你vibe。

P.S. 无意间发现了一个巨牛的人工智能教程，非常通俗易懂，对AI感兴趣的朋友强烈推荐去看看，传送门https://blog.csdn.net/HHX_01