【免费下载链接】VibeCurbVibeCurb - Injects taste into AI workflows to stop agents from generating boring, AI slop.项目地址https://gitcode.com/gh_mirrors/vi/VibeCurb点击查看免费下载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-L63npx 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 为例所有严格技能都共享同一套结构。组件 1YAML 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#L8This 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 Sheetvisual-redesign 则把所有代码先分类为 SacredJS 逻辑绝对不可动与 Slop视觉冗余尽管升级对照见 skills/visual-redesign/SKILL.md#L18-L49。组件 5Visual Diff——PASS/FAIL 验证表最后一阶段是一组是/否检查清单任何一项 FAIL 都禁止交付skills/awwwards-hero/SKILL.md#L505-L571Diff 类别示例检查项Composition是否只有一个主导焦点Typography标题字体是否不是 Inter / Roboto / PoppinsColor全页是否 ≤3 种色相有无 AI 紫渐变Motion入场动画是否在 800ms 内完成实操教程5 步写出你的第一个质量门控设计技能下面动手写一个严格表单 UI技能form-ui。第 1 步建目录 frontmatter新建skills/form-ui/SKILL.mdfrontmatter 写清触发条件--- 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: VerifyPASS/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它才配叫严格。赞分享【免费下载链接】VibeCurbVibeCurb - Injects taste into AI workflows to stop agents from generating boring, AI slop.项目地址https://gitcode.com/gh_mirrors/vi/VibeCurb点击查看免费下载相关推荐如何编写高质量的up-for-grabs.net开发者文档新手贡献指南如何编写高质量的up for grabs.net开发者文档新手贡献指南 在开源社区中up for grabs.net项目为新手开发者提供了绝佳的入门机会。这开发工具前端Scenario Skills 贡献者指南如何编写、测试并发布你的第一个 AI Agent 技能Scenario Skills 贡献者指南如何编写、测试并发布你的第一个 AI Agent 技能 Scenario Skills 是一个开源的 AI Agen3小时创造你的专属桌宠VPet开源虚拟桌宠模拟器完全指南 3小时创造你的专属桌宠VPet开源虚拟桌宠模拟器完全指南 想要一个会撒娇、会卖萌的桌面小伙伴吗VPet开源虚拟桌宠模拟器让你梦想成真这款完全免费的开桌面应用游戏开发上一篇终极免费英语打字训练神器Qwerty Learner让你的输入效率翻倍下一篇CVE-2015-7547 项目常见问题解决方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考