Vibe Coding 之 SDD 工作流：让 AI 按规范自动写代码

很多人把 Vibe Coding 理解成“描述一句需求，然后让 AI 一路写到底”。它确实可以快速得到一个能运行的雏形，但一旦页面、状态、数据和验收条件变多，最容易丢失的不是代码，而是共同理解。

SDD 的重点不是多写几份文档，而是把模糊感觉压缩成可执行、可检查、可追踪的约束。

为什么先写规格

规格首先回答三个问题：用户最终看见什么，系统必须保持什么，以及哪些内容本轮明确不做。它让设计、实现与验收使用同一套语言，也让 AI 在长任务中不必反复猜测意图。

一个好的规格不需要很长，但要能让另一个没有参与讨论的人，仅凭文档就知道结果是否合格。比如“页面更高级”不是规格，“桌面端首屏同时呈现个人定位、三个创作主题和一个明确主行动按钮；移动端无横向滚动；正文宽度保持在舒适阅读范围内”才接近规格。

一套最小 SDD 结构

个人项目不需要复杂流程，四份文件就足够形成闭环：

• spec.md：目标、用户、范围、功能与验收标准。
• plan.md：信息架构、设计系统、技术方案和风险处理。
• tasks.md：按可验证结果拆分的执行清单。
• review.md：实现后的核对、偏差、限制与下一步。

这四份文件分别约束“做什么”“怎么做”“做到哪一步”和“到底做得怎么样”。它们可以很短，但不能互相替代。

从规格到验收

第一步：先定义用户路径

不要一上来就讨论颜色和圆角。先确定访客进入页面后依次需要理解什么。对于个人主页，通常是：认识这个人、理解他在做什么、看到可信作品、找到继续阅读或关注的入口。

第二步：把视觉语言变成系统

视觉不应依赖单个页面里的临时数值。把背景、正文、强调色、字体、间距、圆角和内容宽度写成可复用的变量，再用少量组件组合出主页、归档页和文章页。

第三步：让任务可以逐项验收

“完成首页”太大，无法确认问题出现在哪。可以拆成“完成首屏信息层级”“完成三条主题卡片”“完成移动端导航”“验证 375px、768px、1440px 三种宽度”等更小结果。

第四步：用实际页面而不是想象验收

运行站点、截取桌面和移动端页面、检查控制台、确认没有横向滚动，并真正点击导航、筛选和文章目录。视觉任务尤其需要在真实渲染结果上判断，而不是只检查源码。

可直接复用的写法

下面是一段足够小、但可以指导实现的验收条件：

## 首页首屏验收
- 访客无需滚动即可识别站点主人、创作方向与主行动入口
- 桌面端采用双栏构图，移动端按“文案 → 视觉”排列
- 375px 宽度下不得出现横向滚动
- 导航支持键盘访问，移动菜单可通过 Escape 关闭
- 关闭动画偏好时，不依赖动画才能看到内容

这种写法让实现者知道该做什么，也让审查者知道该检查什么。规格中的每一条都应当能够在页面、代码或测试结果中找到证据。

最后的自我 Review

实现完成后，不要只写“已完成”。回到规格逐条核对，并主动记录暂时没有解决的部分。例如首版可能已经完成视觉系统与核心模板，但仍使用静态内容；正式接入时还需要对接原有内容生成流程、真实社交链接与图片资产。

这一步不是挑自己的错误，而是防止“能运行”被误认为“已经可以上线”。一个可信的 Review 应该明确区分：已验证、部分完成、尚未接入和有意留到下一轮的内容。