用「Vibe Coding」做出
真正能交付的设计 — 而不是 AI 默认渐变
「Vibe Coding」是 2026 年的新词,意思是用自然语言描述意图,让模型把代码写出来。速度是真的,而且回不去了。问题是输出永远看起来「像生成的」——同一种字体被拉到 90 像素当标题,同一组紫到蓝的渐变盖在白色之上,英雄区下面同样三张一样的卡片。ux-skill 是垫在「氛围」下面的规则层,在合并之前抓住这些默认值。
「Vibe Coding」到底是什么
这个词起源于 2026 年 2 月X(原 Twitter)上一条半开玩笑的帖子,到了 4 月已经出现在风投的长文标题里。认真版本的定义是:你用自然语言写意图,模型负责实现,你的工作从「打字」变成「审稿」。Andrej Karpathy 最初的提法说得很直白——你不写代码,你「掌舵」代码。
在前端的语境里,这种「氛围编程」非常顺手。一条 prompt 出一个能跑的 hero、能跑的导航、能跑的注册页。在 Cursor 或 Claude Code 的会话里,从想法到能跑的页面的往返时间,现在是按分钟计而不是按小时计。
代价是品味。模型有自己的偏好,这种偏好是从训练数据里烧进去的——而那批数据严重偏向 2021–2024 年那一小撮 YC 与 Vercel 风格的创业落地页。没有反向推力,氛围每次都会落在同一个位置。
那组「AI 指纹」,用一段话讲清
正文字体被拉到 88–96 像素的标题尺寸,行高 1.0。一道多色阶渐变从靛蓝穿过紫到蓝色端点,铺在白色或近白底上。英雄区下方一排三张一模一样的卡片,3 列网格,每张卡片配一个小图标、一个单词标题、一句副标题。本该写产品具体名词的地方塞着模板化的占位文案。还有 100 字重的纤体正文,在 macOS Retina 上看起来很「精致」,在 Windows ClearType 下断裂。每个 section 的每个直接子元素都套着同样的 fade-in-up。
单独看,这些没一个是错的。指纹是「组合」。看到一个你会耸耸肩,看到同一屏里出现四个,你就能猜出是哪个工具生成的。
Vibe Coding 给你速度,而默认值会让每个站点看起来都一样。
为什么靠 prompt 调教不够
本能反应是往 prompt 里多塞文字:「不要用默认渐变」「用一款衬线显示字体」「不要并排三张相同卡片」。这在第一屏奏效。下一条 prompt 就忘了,默认值又回来了。纯 prompt 的引导是概率性的,会随着上下文长度衰减。
工作流需要的是「确定性的地板」——一种在模型写完之后每次都跑、不在循环里塞 LLM 的检查。这正是 ux-skill 填补的缺口。推荐器在前期收窄模型可选项,而 linter 在默认值漏出时直接惩罚模型。
ux-skill 接入 Vibe Coding 的位置
这是一个独立的 Python 包,3 条安装路径:Claude Code 插件、pip install uxskill、或 npx uxskill。装好之后,引擎对外暴露横跨 17 个 IDE 的 22 个命令。其中最常用的 4 个就覆盖了整个氛围循环。
| 步骤 | 命令 | 做什么 | 输出 |
|---|---|---|---|
| 1. 立项 | ux discover | 10 个字段强制问询——项目类型、人群、调性、必须有、禁用清单、参考。 | .ux/last-discovery.json |
| 2. 系统 | ux recommend | 对 998 条目录并行 5 路查询——行业、风格、配色、字体、动效——合成为一个结构化系统。 | tokens.css · manifest.json |
| 3. 生成 | 任意 Vibe Coding 工具 | Cursor、Claude Code、Cline、Codex、Windsurf、Aider——发 prompt 的那一个负责按 tokens 写代码。 | 仓库内的组件代码 |
| 4. 卡门 | ux lint | 100 条确定性正则规则扫生成代码。零 LLM 成本。遇到 high 或 critical 级别立刻非零退出。 | JSON 结果 · CI 失败 |
立项 2 分钟。推荐器在 2023 款 MacBook Air 上跑完不到 3 秒。linter 本身在一个 200 文件的 Next.js 仓库上的热缓存耗时是 90 毫秒。这些步骤都不需要往第三方 API 烧 token。装好之后,整条循环可以离线跑。
立项是「强制函数」
在 Vibe Coding 里,杠杆最大的一步就是「在写第一条 prompt 之前先写立项」。模型需要约束,而人需要在「委托」之前先正面回答这些选择。
ux discover 是一个交互 prompt,顺次问 10 个字段。顺序是固定的——项目类型、人群、主目标、3–5 个词的调性、必须有、禁用清单、品牌参考、信息密度、动效预算、可访问性底线。真正做事的是「禁用清单」字段。你在这里点名你不想要的默认值。
$ ux discover [project_type] landing [audience] 国内 B2B SaaS 创业团队,10-50 人 [primary_goal] demo 预约 [tone] precise, calm, confident, technical [must_have] WCAG AA,44px 触控目标 [forbidden] 正文字体当显示字体,三张同款卡片排一排, 白底广域渐变,100 字重纤体, 全部子元素 fade-in-up [references] Stripe (clarity), Linear (density), Arc [density] comfortable [motion] subtle, scroll-triggered, no autoplay # 写入 .ux/last-discovery.json
后续所有命令都读这份文件。推荐器用「禁用清单」过滤候选配色和动效预设;linter 用「必须有」上调默认阈值。
100 条规则,一段话讲清
现在的 lint 目录里有 100 条,从 v2.0.0 发布时的 35 条增长起来。每条规则配一个正则、一个严重程度(low、medium、high、critical)、一个类别(Typography、Color、Layout、Content、Motion、A11y、Quality、Visual、Performance)、一行解释「为什么」、一行说明「怎么修」。
最高级别那批,直接对应 AI 指纹:正文字体当显示字体、白底广域渐变、三张同款卡片、占位姓名泄漏、把表情符号当图标盖章、标题里的营销动词、行内 style 属性、英雄图缺 alt、阻止双指缩放的 viewport 标签。这些都不需要调用 LLM,全部以毫秒计。
完整分类见AI 设计指纹列表,工程实现见正则 linter 文章。同一个引擎,两种切入。
编辑器里的实际变化
在 Claude Code、Cursor、Windsurf、Cline、Continue、Codex、Aider 或 Roo Code 里装好 ux-skill 后,工作流是这样:
- 你输 prompt。模型的上下文里已经带着设计系统(每个 IDE 都会读取
tokens.css、manifest.json和引擎写出的 IDE 专属规则文件——.cursorrules、CLAUDE.md、.windsurfrules等)。 - 模型按你的 tokens 写代码,不再写它自己的默认值。
- 你保存文件。pre-commit 钩子跑 lint。如果 diff 里包含 high 级别的发现,commit 会中止,并打印规则 id、行号、单行修复建议。
- 你让模型修。规则 id 已经在它的上下文里。修复几秒钟落地。
- 下一次 commit 通过。
没有那个「自己头脑里把输出和自己的品味对一遍」的手动审稿步骤了。品味住在立项、系统和 lint 里。你保持在 Vibe 模式,而护栏不让 Vibe 滚进沟里。
跟纯 prompt 调教的诚实对比
| 方式 | 规则住在哪 | 每次检查成本 | 1000 行后的漂移 |
|---|---|---|---|
| 纯 prompt | .md 指令段 | 0 | 高 · 上下文衰减 |
| CI 里跑 LLM 评审 | Claude 或 GPT 的 prompt | ~$0.04/推送 | 中 · 非确定性 |
| 自写 ESLint 插件 | JS AST 规则 | ~200ms | 低 · 但代码要你写 |
| ux-skill lint | 100 条正则 · 998 目录 | ~90ms | 低 · 确定性 |
正则抓的是结构性指纹,不是品味。
lint 永远不会判定「这一段的节奏不对」或「文案读起来太冷」。那是审稿的工作。正则确实能抓住的,是每一个有字面 token、class 名、十六进制值或 DOM 形状的指纹——这刚好覆盖了 AI 默认值里的绝大多数,因为模型每次都会伸手抓同一个产物。
如果想在 lint 之上加一层「品味检查」,同一个包里附带 /ux-critique 命令,在编辑器内按需触发。我们刻意不把它放在 CI 里——CI 是放「确定性地板」的地方。
跟 Cursor 与 Claude Code 的具体接入
Cursor 会读仓库根目录的 .cursorrules 与其下的 .cursor/rules/*.mdc。Claude Code 读根目录的 CLAUDE.md 以及项目作用域下的 ~/.claude/projects/<hash>/CLAUDE.md。ux-skill 从同一份推荐里把两种格式都写出来。真相只有一份(.ux/design-system/MASTER.md),衍生物有三份(Cursor、Claude Code、纯 tokens.css)。
操作步骤: Cursor 接入、 Windsurf 接入、 GitHub Copilot 接入、 Zed 接入。
Vibe 是速度,规则是地板
2026 年值得讨论的不是「Vibe Coding 会不会赢」——它在千行以内的任务上已经赢了。真正值得讨论的,是输出会不会一直长得跟互联网上其他所有 Vibe Coding 页面一样,还是团队愿意往下面垫一层地板。
ux-skill 就是那层地板。100 条规则、998 条目录、110 条品牌规范、22 条命令、17 个 IDE、引擎下 75 个测试。MIT 协议。零遥测。推荐器把模型的中位数抬上去,linter 把地板钉死。Vibe 还是你的。
相关阅读
- AI 设计指纹列表 — 完整分类。
- 面向 AI 编程的正则 linter — 工程实现。
- Vibe coding 是真的——但 AI 还是给你默认值 — 英文版。
- Claude Code 的反 AI slop 工具 — 排名。