【免费下载链接】VibeCurb
VibeCurb - Injects taste into AI workflows to stop agents from generating boring, AI slop.
VibeCurb 是一个开源的"反 AI 平庸（anti-slop）"设计引擎：它通过 SKILL.md 技能文件给 AI 代理注入严格的设计协议，强制 Agent 先完成"提取设计信号 → 质量门控（Quality Gate）→ 构建 → 视觉验证"，再写代码，从而阻止生成千篇一律的模板页面。本教程分 5 步，带你从读懂项目，到亲手编写一个带质量门控的严格设计技能，并提交给社区。
什么是 VibeCurb：给 AI 设计约束的开源技能库
AI 默认趋向平庸：模型在海量"平均网站"上训练，若不加约束，就会生成紫色渐变 + 居中卡片的老套路。VibeCurb 就是这个约束——它用严格规则和质量门控替代 Agent 的随意猜测。
⚠️ 这些技能的风格是"不讲礼貌的严格"。如果你想要安全、通用的布局，请不要使用 VibeCurb。
整个仓库非常轻：每个设计技能就是一个SKILL.md文件，按文件夹组织。官方技能一览（索引见 skills/llm.txt）：
| 技能 | 类别 | 作用 |
|---|---|---|
| awwwards-hero | 前端 | 生成获奖级 Hero 首屏 |
| pixel-perfect | 前端 | 截图 1:1 复刻成代码 |
| awwwards-motion | 动效 | 滚动渐显、动态排版 |
| visual-redesign | 重设计 | 非破坏式升级 React 样式 |
| imagegen-frontend | 图像生成 | 生成设计参考图 |
| brandkit-gen | 图像生成 | 生成品牌板 / 标识系统 |
| awwwards-sections | 前端 | 定价卡片、Bento 网格、页脚 |
快速上手：克隆 VibeCurb 并加载第一个设计技能
git clone https://gitcode.com/gh_mirrors/vi/VibeCurb加载方式有两种：
CLI（推荐）（命令见 README.md#L57-L63）：
npx vibecurb-cli list # 查看所有可用 pipeline npx vibecurb-cli add visual-redesign # 安装指定技能背后的逻辑在 index.js：交互式勾选后，脚本把skills/<name>/SKILL.md拷贝到项目下的.agents/skills/<name>/目录（拷贝逻辑见 index.js#L51-L70）。
手动放置：
- 复制所需的
SKILL.md - 放入项目的
.cursor/rules/或.agents/skills/文件夹 - 在提示词中引用："Based on the skill above..."
兼容 Cursor、Claude Code、v0、Codex、ChatGPT、Lovable、Gemini CLI 等任何能读取 markdown 上下文的 Agent。
解构 SKILL.md 解剖图：5 个核心组件
以 awwwards-hero 为例，所有"严格技能"都共享同一套结构。
组件 1：YAML frontmatter——写清触发条件
文件开头只有name和description两个字段（skills/awwwards-hero/SKILL.md#L1-L4）：
--- name: awwwards-hero-section description: ...fires when the user asks for a hero, a landing header, an above-the-fold section... ---description本质是"触发语句"：Agent 依据它判断何时启用该技能。触发条件越具体，误触发越少。
组件 2：范围声明——一句话划清边界
标题之后先声明不做什么，例如 skills/awwwards-hero/SKILL.md#L8："This skill is HERO-SECTION ONLY"——明确不管导航、页脚和整页，防止技能被滥用。
组件 3：阶段流水线 + 质量门控——严格性的核心
skills/awwwards-hero/SKILL.md#L14-L30 定义了 4 阶段流水线：
BRIEF IN → Phase 1: Read（提取设计信号） → Phase 2: Architecture（选一种架构并承诺） → Phase 3: Build（字体、配色、动效、移动端） → Phase 4: Verify（视觉 diff） Each phase has a ✓ Quality Gate. Failing a gate blocks the next.关键是最后一句：质量门控失败，就阻断下一阶段。例如 Read 门控（skills/awwwards-hero/SKILL.md#L63-L68）要求：8 个设计信号全部提取完毕、已写下 Hero Extraction 摘要、模式/焦点/配色方向明确——缺一不可才能进入 Phase 2。
组件 4：提取表格——让 Agent"测量"而不是"感觉"
严格技能不给形容词，而是让 Agent 填表。例如 pixel-perfect 按 7 层（网格、字体、颜色、间距、组件、氛围、交互）逐层提取并填写 Extraction Sheet；visual-redesign 则把所有代码先分类为 Sacred（JS 逻辑，绝对不可动）与 Slop（视觉冗余，尽管升级），对照见 skills/visual-redesign/SKILL.md#L18-L49。
组件 5：Visual Diff——PASS/FAIL 验证表
最后一阶段是一组"是/否"检查清单，任何一项 FAIL 都禁止交付（skills/awwwards-hero/SKILL.md#L505-L571）：
| Diff 类别 | 示例检查项 |
|---|---|
| Composition | 是否只有一个主导焦点？ |
| Typography | 标题字体是否不是 Inter / Roboto / Poppins？ |
| Color | 全页是否 ≤3 种色相？有无 AI 紫渐变？ |
| Motion | 入场动画是否在 800ms 内完成？ |
实操教程：5 步写出你的第一个质量门控设计技能
下面动手写一个"严格表单 UI"技能form-ui。
第 1 步：建目录 + frontmatter
新建skills/form-ui/SKILL.md，frontmatter 写清触发条件：
--- name: form-ui description: Strict form-UI pipeline. Fires when the user asks for forms, input fields, validation states, or checkout flows. Extracts fields and error states first. No code before the extraction passes its quality gate. ---第 2 步：设计阶段流水线
套用项目通用模板"Read → Decide → Build → Verify"。阶段不必多（3-4 个即可），但每个阶段必须有产出物：
| 阶段 | 产出物 |
|---|---|
| Phase 1: Read | 字段清单、错误态清单、目标语气 |
| Phase 2: Decide | 选定一种视觉模式（如深色终端风），承诺不混搭 |
| Phase 3: Build | 字号、间距、focus 环、错误色 |
| Phase 4: Verify | PASS/FAIL 验证表 |
第 3 步：编写质量门控
每阶段挂一个门控，写成可打勾的检查清单（参考 skills/awwwards-hero/SKILL.md#L484-L497）：
### ✓ Quality Gate: Build Before moving to Phase 4, confirm: - 输入框具备 focus-visible 状态 - 错误文案不是霓虹红（禁 #ff0000） - 标签与输入框左对齐 - 触控目标高度 ≥ 44px✅ 写可量化的检查项（像素值、色值、数量上限），而不是形容词——这就是"严格"的来源。
第 4 步：嵌入 Drift Warning 反默认规则
AI 有明确的"肌肉记忆"：AI 紫渐变、Inter 标题、居中卡片。VibeCurb 的技能会把这些反模式写成红线，如 skills/awwwards-hero/SKILL.md#L243 直接点名 Inter、Roboto、Poppins"是正文字体，不是标题字体"。
也可以像 skills/imagegen-frontend/SKILL.md#L12-L29 那样，在文件顶部加一条"硬输出规则"（Hard Output Rule）："每个 section 一张横版图，无例外"。
第 5 步：加上 Visual Diff 验证表
最后放一张 PASS/FAIL 表，检查项都写成是否可判定的问题，例如"CTA 是否超过 1 个？（超过即 FAIL）"。
进阶技巧：让技能真正"严格"的细节
- 技能越大、门控越多：brandkit-gen 有 8 个阶段流水线（skills/brandkit-gen/SKILL.md#L46-L87），还专设"Logo 原创性门控"检查生成标识是否抄袭参考图
- 先立"核心教义"再进流水线：awwwards-motion 先写"每个动画必须有理由""动效尊重 reduced-motion"等原则（skills/awwwards-motion/SKILL.md#L37-L55），再展开流程
- 给具体值，不给形容词：
#0a0a0a优于"深色背景"，clamp(2.5rem, 7vw, 8rem)优于"大标题" - 参数旁注释 WHY：技能内的 CSS blueprint 常带
WHY:注释解释参数取值原因，防止 Agent 随意改动
如何贡献你的技能给 VibeCurb 社区
- 把技能放进新文件夹
skills/<your-skill>/SKILL.md，结构与现有技能保持一致 - 更新技能索引 skills/llm.txt，按 Frontend / Image Generation / Animations / Redesign 分类
- 若新增类别或 CLI 选项，同步修改 index.js 与 package.json
- 按 README 的 Contribute 章节提交 PR；发现 Bug 则先开 Issue
常见问题：技能"漂移"失效时怎么办
长对话中 Agent 会漂回平庸输出。README 给出的"拉回"话术（README.md#L114-L122）同样适用于你写的技能：
| 症状 | 修复话术 |
|---|---|
| 输出像模板 | "You ignored the skill file. Re-read it and apply the drift constraints." |
| 排版乏力 | "Your typographic scale is too safe. Increase the h1/body contrast." |
| 直接跳去写代码 | "Stop. Run the Design Read first. No code until the extraction passes." |
最后一条正是 VibeCurb 的核心设计哲学：验证通过之前，不写一行代码。把质量门控按这个哲学写进你的 SKILL.md，它才配叫"严格"。
【免费下载链接】VibeCurb
VibeCurb - Injects taste into AI workflows to stop agents from generating boring, AI slop.
相关推荐
如何编写高质量的up-for-grabs.net开发者文档：新手贡献指南
如何编写高质量的up for grabs.net开发者文档：新手贡献指南 在开源社区中，up for grabs.net项目为新手开发者提供了绝佳的入门机会。这
开发工具前端Scenario Skills 贡献者指南：如何编写、测试并发布你的第一个 AI Agent 技能
Scenario Skills 贡献者指南：如何编写、测试并发布你的第一个 AI Agent 技能 Scenario Skills 是一个开源的 AI Agen
3小时创造你的专属桌宠：VPet开源虚拟桌宠模拟器完全指南 🎮
3小时创造你的专属桌宠：VPet开源虚拟桌宠模拟器完全指南 🎮 想要一个会撒娇、会卖萌的桌面小伙伴吗？VPet开源虚拟桌宠模拟器让你梦想成真！这款完全免费的开
桌面应用游戏开发
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
