我用skill.md约束文件对抗AI生成平庸UI

这就是问题所在。每一个 AI 编程助手（Cursor、Codex、Claude Code 诸如此类）都训练自数百万个网站，而这些网站大多平庸无奇。所以当你输入"给我做个落地页"时，模型给出的就是它所见之物的平均值：一个居中的 hero 区、一个紫色渐变、三个等宽的功能卡片、Inter 字体、ease-in-out 过渡，搞定。没坏，只是默认就平庸。

我今年 17 岁，受够了在每次对话里和这种事斗争。于是我做了 VibeCurb：一套严格的约束型 skill 文件集合，强制 AI 代理在动手写代码前真正思考设计。

每一个 skill 都遵循同样的四阶段流水线：

Design Read —— 代理读取你的参考图、现有代码库或需求简报，提取设计信号：字体排印、色板、布局、视觉焦点、间距。这里不写任何代码。

Quality Gate —— 提取结果必须通过审核，代理才被允许生成任何内容。它必须证明自己理解了设计方向，而不是只会吐出默认值。

Precise Build —— 代码生成针对提取结果进行，而非针对模型内置的"网站应该长什么样"。每个 skill 有自己的构建序列。

Visual Diff —— 用 PASS/FAIL 表格对照参考图检查输出，维度涵盖构图、字体排印、颜色、动效、响应式。如果有偏差，会被捕获。

还有一个内联漂移拒绝层。它会在已知 AI 默认项（CSS 关键字缓动如 ease-in-out、AI 紫色 #7c3aed 渐变、通用的玻璃拟态卡片、占位用的 Lorem ipsum 内容）进入输出之前将其拦截并标记。

每个 skill 约束一个具体的问题空间：

awwwards-hero —— 仅限 Hero 区。记录了六种架构（Cinematic Center、Editorial Split 等），配有实现蓝图。代理选择其一并严格执行。

awwwards-sections —— 定价表格、 Bento 网格、功能亮点、页脚。同样的流水线，不同的元素约束。

awwwards-motion —— 完整动效系统。弹簧物理、滚动联动编排、每个可见元素必须有动画映射。60fps 强制执行。prefers-reduced-motion 开关，无例外。

pixel-perfect —— 截图输入，精确代码副本输出。字体、颜色、间距值逐一匹配。

visual-redesign —— 输入丑但可用的代码，输出看起来有设计感且逻辑不变的结果。

imagegen-frontend 和 brandkit-gen —— 生成高质量参考图和品牌识别板，作为其他 skill 的输入。

每个 SKILL.md 都是一个独立的 markdown 文件，带 YAML frontmatter。无运行时依赖，无需安装 npm 包。只要把文件放入 .cursor/rules/、.agents/skills/，或直接粘贴到对话中即可。任何能读取 markdown 上下文的代理都能使用。

# CLI install
npx vibecurb-cli add awwwards-hero

# Or just copy the SKILL.md file manually

每个阶段都设有门控。代理无法跳过，因为指令明确规定在先前阶段通过之前禁止生成代码。这不是建议，是硬性协议。

支持 Cursor、Claude Code、Codex、ChatGPT、Gemini CLI、v0、Lovable、AI Studio。任何能读取 markdown 上下文的产品都可以。

为什么是约束而不是提示词

提示词说"让它看起来好看"。约束说"先提取色板，证明你理解了字体层级，然后用提取结果来构建，再用参考图做 diff。"区别在于约束是可验证的。代理要么通过了质量门，要么没通过。没有模糊地带。

AI 默认走向均值。VibeCurb 就是那个把它从均值拉走的约束。

在线演示：vibecurb.pages.dev GitHub：github.com/Yu-369/VibeCurb