Vibe Coding 工作系统复盘:从混乱到有序

我遇到了什么问题

用 AI 写代码(Vibe Coding)做了好几个项目之后,发现一个尴尬的事:项目做完了,但感觉自己没进步。

具体表现在:

  1. 一个会话拖太久,聊到后面 AI 开始忘掉开头说过的事,上下文压缩之后更严重

  2. 需求一开始想不清楚,做一半发现不对,又得回头改,来回好几轮

  3. 代码风格乱,特别是前端——同一个项目里按钮颜色有三种、字体大小不统一、间距靠猜、图标混用 emoji 和 SVG

  4. 权限弹框烦人,明明说了"全部允许",每次还是弹确认

  5. 裸调 AI,没用 skill/tool,也没用 hook,等于用最原始的方式跟 AI 交互

说白了就是:AI 帮你快,但你自己没建立起让 AI 稳定的那套框架。

核心思路:别靠聊天记录,靠文件

聊天记录会被压缩、会被截断、新会话里不存在。但文件不会。

所以整个方案就一句话:把任何重要的信息写到文件里。

不是 notes.md 那种散乱的笔记。而是三份各有分工的文件:

文件

放什么

更新时机

CLAUDE.md

项目状态、技术栈、编码规范、决策记录、待办

每做完一个任务就更新

settings.json

权限白名单,让 AI 可以自动执行命令

一次配置,长期有效

自定义 skill

可复用的工作流模板

写得好了就提取出来

新会话开始时,读 CLAUDE.md → 总结项目状态 → 继续干活。这样哪怕 AI "失忆",它读完文件就重建了认知。

具体做了什么

1. 权限问题:一个配置搞定

~/.claude/settings.json 里加一行:

"permissions": {
  "defaultMode": "acceptEdits"
}

这之后 AI 执行任何命令都不用我再点确认。不是"无脑放行",是"我相信它会做对"。

2. Session Boot:让 AI 每次先读项目状态

在 CLAUDE.md 里加了规则:

每次新会话开始时:先读 CLAUDE.md,了解项目现在做什么、上次做了什么决定、接下来要做什么。再回应我的要求。

这样我就不用每次重复说"我们项目是做 XXX 的,现在在 YYY 阶段"。

3. 建立了两个 Skill

vibe-coding-workflow(工作流)

一个五阶段循环:

你说"开始"  →  AI 读 CLAUDE.md 自检(Session Boot)
                ↓
你说想做什么  →  需求澄清(避免做错方向)
                ↓
            →  方案设计(确认影响范围)
                ↓
            →  TDD 执行(先写测试再写代码)
                ↓
            →  更新 CLAUDE.md(把决策写进文件)

核心原则:一个会话一个任务。做完就关。不等上下文长到需要压缩。

ui-consistency-enforcer(UI 一致性)

解决前端最烦的问题——AI 写出来的 UI 看着不专业。

它定义了一套"不要什么、要什么":

不要的:

  • style={{ color: '#333' }} → 裸色,改用语义化类名

  • 🚀 / 🎨 → emoji 当图标,改用 Lucide

  • bg-blue-500 / bg-gray-800 → Tailwind 颜色混用,改在 tailwind.config 里统一

  • gap: 7px; padding: 13px → 像素拍脑袋,改用间距规范

要的: 每种颜色、每种间距、每种字体大小都有一个名字(语义化 token),从全局设计规范中取。

同时带了几个开箱即用的功能:

  • 明暗主题切换(ThemeSwitcher)

  • 语言切换(LanguageSwitcher,含 react-i18next)

  • 表单控件库(Button/Input/Select/Textarea/Checkbox/Toggle)

  • Dialog/Drawer/DatePicker/TimePicker/Skeleton/EmptyState/ErrorState

收获的几条经验

  1. 不要依赖 AI 的记忆。把每个决策写成文件,下个会话读了就恢复全貌

  2. 一个会话一个任务。这么做有两个好处:上下文不会膨胀,而且每完成一个就有一个明确的"里程碑"

  3. 设计先于代码。让 AI 先画架构(类/函数/组件/trait),再写实现。比直接写代码少很多返工

  4. UI 问题用 checklist 解决。AI 天生不知道"什么颜色配什么颜色好看",所以给它一个"不该做什么"的清单比你告诉它"该做什么"更有效

  5. Skill 就是你的"速查手册"。把反复做的事封装成 Skill,以后点一下就进去了

最大的感受:AI 让我能专注于架构和思维

说真的,Vibe coding 最值钱的地方不是它帮你写代码有多快——而是它把那些琐碎的、机械的、不需要动脑子的事情全都接过去了。

以前写代码,60% 的时间在查文档、处理类型对齐、调 CSS 间距。真正的"业务逻辑"只有 30% 不到。

现在反过来了。AI 做执行层(写代码、修 bug、调样式、写测试),我的精力放在:

  • 架构设计:模块怎么拆?数据怎么流?

  • 设计系统:颜色/间距/字体 怎么搭配?

  • 决策:用 SQLite 还是 PostgreSQL?为什么?

简而言之:不用再消耗在"怎么写对"上,而是思考"应该怎么做"。

架构直觉不是靠死记硬背建立起来的——而是在做决策时反复追问"为什么这样做"的过程中慢慢养的。这恰好在 Vibe coding 里最有效。

现在的工作方式

新会话开始
    │
    ├─ 自动读 CLAUDE.md → 了解项目全貌
    │
    ├─ 我说"做个 XXX 功能"
    │     AI 先问:做什么/不做什么/怎么做算完成
    │     然后给方案 → 我确认
    │     接着 TDD 执行
    │
    ├─ 任务完成
    │     写入 CLAUDE.md(更新决策/状态/todo)
    │     关会话
    │
    └─ 下次继续

不再是"裸调 AI 然后修修补补"的循环了。

两个有用的skills

vibe-coding-workflow.zip

ui-consistency-enforcer.zip