uxskill
Star on GitHub
Language
English 简体中文 繁體中文 日本語 한국어 हिन्दी Bahasa Indonesia Tiếng Việt ไทย العربية Español Français Deutsch Português Русский Türkçe Italiano
Blog · 简体中文 · 2026-05-28

# 用「Vibe Coding」做出
真正能交付的设计,而不是 AI 默认渐变

「Vibe Coding」是 2026 年的新词,意思是用自然语言描述意图,让模型把代码写出来。速度是真的,而且回不去了。问题是输出永远看起来「像生成的」,同一种字体被拉到 90 像素当标题,同一组紫到蓝的渐变盖在白色之上,英雄区下面同样三张一样的卡片。ux-skill 是垫在「氛围」下面的规则层,在合并之前抓住这些默认值。

By the ux-skill team · 8 min read · MIT-licensed open source

## 「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 后,工作流是这样:

1. 你输 prompt。模型的上下文里已经带着设计系统(每个 IDE 都会读取 `tokens.css`、`manifest.json` 和引擎写出的 IDE 专属规则文件,`.cursorrules`、`CLAUDE.md`、`.windsurfrules` 等)。
2. 模型按你的 tokens 写代码,不再写它自己的默认值。
3. 你保存文件。pre-commit 钩子跑 lint。如果 diff 里包含 high 级别的发现,commit 会中止,并打印规则 id、行号、单行修复建议。
4. 你让模型修。规则 id 已经在它的上下文里。修复几秒钟落地。
5. 下一次 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 工具,排名。

装上护栏

## 一个包,3 条安装路径,100 条规则。

推荐器、linter、22 个命令、110 条品牌规范一起发布。lint 本体亚秒级,其它按需调用。MIT 协议,零遥测,不要账户。

$ /plugin marketplace add Laith0003/ux-skill
$ /plugin install ux@ux-skill
· 或 ·
$ pip install uxskill
· 或 ·
$ npx uxskill@alpha init

## 相关阅读

- Vibe coding + ux-skill (EN)
- AI design fingerprints
- Regex linter for AI coding
- Cursor design plugin