SKILL.md到底是什么？新手图解VibeCurb的Agent设计技能文件与上下文注入机制

【免费下载链接】VibeCurbVibeCurb - Injects taste into AI workflows to stop agents from generating boring, AI slop.项目地址https://gitcode.com/gh_mirrors/vi/VibeCurb点击查看免费下载VibeCurb 是一个开源的反 AI slop设计技能集核心由一组 SKILL.md 形式的 Agent 设计技能文件构成。它通过上下文注入机制把严格的设计协议注入 Cursor、Claude Code、v0、Codex 等 AI 编程工具强制 Agent 按先读图、再选结构、再构建、最后验证的流水线干活从而停止生成紫色渐变 玻璃拟态卡片的平庸网页。本文以 VibeCurb 为例带你彻底搞懂SKILL.md 到底是什么、里面写了什么、又是如何被注入你的 Agent 上下文的。先理解为什么 AI 做的网页总是一个样AI 模型是在数百万个普通网页上训练出来的不加约束它必然输出平均值居中大标题 紫色渐变背景 玻璃拟态卡片 弹跳的向下箭头。VibeCurb 的答案不是换一套模板而是约束constraint。README.md 开篇就点明AI defaults to the mean... VibeCurb is the constraint.——它不教 Agent 把页面做得好看而是规定一套强制流程先从参考图提取设计信号过质量门禁后才能动笔再逐项对照参考图做 Visual Diff任何AI 默认味的输出当场打回。一句话讲清SKILL.md 就是写给 AI 的操作规程SKILL.md 是一份纯 Markdown 文件不是脚本、不是配置、也不是需要安装的依赖库而是 AI Agent 读取并必须遵守的一套协议。它由两部分组成前半部分Frontmatter名片每个 SKILL.md 都以---包裹的 YAML frontmatter 开头包含两个关键字段。以 skills/awwwards-hero/SKILL.md 为例--- name: awwwards-hero-section description: Hero-section pipeline for building Awwwards/FWA-tier hero sections. Extracts design direction from reference images... ---name技能的唯一标识Agent 靠它识别和引用description一段高度浓缩的何时触发、做什么、执行什么标准摘要——Agent 是否调用该技能很大程度就看这个字段。后半部分必须走通的严格流水线以 hero 区域技能为例skills/awwwards-hero/SKILL.md 定义了一条四阶段流水线每个阶段都设有质量门禁Quality Gate不通过就不许进入下一阶段阶段Agent 要做什么门禁不通过怎么办Phase 1: Read从参考图提取 8 类设计信号明暗模式、焦点元素、字体风格、色板数量等先输出一段提取摘要提取不完整 → 禁止动笔Phase 2: Architecture从 A–F 六种版式架构中只选一种禁止混搭与提取结果不符 → 禁止进入构建Phase 3: Build按排版、色板、氛围、动效、移动端逐项精确规格构建任一项不达标 → 禁止交付Phase 4: Verify用 PASS/FAIL 表格对构图、字体、色彩、组件、动效逐项打勾任何一项 FAIL → 阻断交付这种写法有三个反复出现的设计亮点Quality Gate质量门禁Agent 必须先证明自己看懂了设计方向例如写出一段 Hero Extraction 摘要才有资格写代码——直接堵死了看到需求就抄近路写代码的坏习惯Drift Warning漂移警告明确指出模型最容易翻车的模式比如警告用 Inter、Roboto 这类正文字体做大标题页面必然平庸反 AI 味黑名单验证阶段逐条列 FAIL——AI 紫色渐变、霓虹高亮、Elevate / Seamless 式文案、emoji全部一票否决。内置的 7 个技能文件分别管什么VibeCurb 在 skills/ 目录下提供 7 份 SKILL.md一个场景一份技能场景它做什么文件位置awwwards-hero前端从需求或参考图生成奖项级 Hero 区域skills/awwwards-hero/SKILL.mdawwwards-sections前端构建定价卡、Bento 网格、页脚等首屏以下区块skills/awwwards-sections/SKILL.mdpixel-perfect前端给一张截图输出像素级复刻的代码skills/pixel-perfect/SKILL.mdawwwards-motion动效滚动渐显、动态字体、有物理感的微交互skills/awwwards-motion/SKILL.mdvisual-redesign改造对现有 React 代码做视觉层手术不碰一行 JS 逻辑skills/visual-redesign/SKILL.mdimagegen-frontend图片生成生成 Awwwards 级设计参考图可反哺其他技能skills/imagegen-frontend/SKILL.mdbrandkit-gen图片生成先产出完整品牌套件与 Logo 体系再动手做 UIskills/brandkit-gen/SKILL.md其中visual-redesign最有意思它把代码严格分成SACRED状态、API 调用、事件处理器逻辑——绝对不许碰和SLOPclassName、颜色、间距——放心改两类连灰色地带比如既含逻辑又含样式的className三元表达式都给出了逐条判断规则。此外skills/llm.txt 提供了一份全部技能的快速索引清单。上下文注入机制SKILL.md 是如何住进Agent 的很多人以为 SKILL.md 需要安装其实注入的本质 把文件放到 Agent 会读的位置。VibeCurb 给了两种方式方式一一条命令注入推荐项目 package.json 提供了vibecurb命令行入口把技能文件从仓库的 skills/ 目录复制到你项目里# 查看全部可用技能 npx vibecurb-cli list # 注入指定技能 npx vibecurb-cli add visual-redesign它的实现是 index.js一个用 Node.js 写的交互式 CLI勾选需要的技能后把对应的 SKILL.md 写入你项目的.agents/skills/技能名/目录全程不改动你已有的任何代码。方式二手动放置克隆整个仓库git clone https://gitcode.com/gh_mirrors/vi/VibeCurb或单独下载需要的 SKILL.md放入你项目的.cursor/rules/或.agents/skills/文件夹在提示词中引用Based on the skill above...这种方式对任何能读取 Markdown 上下文的 Agent 都有效Cursor、Claude Code、v0、Codex、ChatGPT、Lovable、AI Studio、Gemini CLI。所以所谓上下文注入就是把技能文件变成 Agent 的长期上下文它不是建议而是 Agent 必须执行的强制协议。README 里也毫不客气地警告These skills do not ask nicely.——如果你只想拿安全的通用布局别用 VibeCurb。上手实操让技能生效的 3 个步骤第 1 步选对技能。只有需求描述 →awwwards-hero有参考截图 →pixel-perfect要改造现有代码 →visual-redesign。第 2 步注入。运行npx vibecurb-cli add 技能名或手动放置文件。第 3 步按Prompt Architecture写提示词。README.md 推荐叙述式结构先声明基于上述技能再交代交付物与业务场景给出 vibe 词汇说明布局方向构图风格、色板、明暗模式、字体规则最后再强调一次质量标准。 核心理念是——Agent 不会读心术你只说做个酷一点的落地页得到的就是紫色渐变给一张清晰的参考图能消除大部分瞎猜。翻车了怎么办拉回漂移的 Agent长对话中Agent 会慢慢漂回平均审美。README 给出了现成的回拉三句话症状回给 Agent 的指令输出像标准后台模板You ignored the skill file. Re-read it and apply the drift constraints.字体排版太保守Your typographic scale is too safe. Increase the contrast between the h1 and body text.Agent 直接开写代码Stop. Run the Design Read first. No code until the extraction passes.写在最后SKILL.md 是什么YAML frontmatter 严格流水线的纯 Markdown 技能文件是给 AI Agent 的操作规程注入机制做了什么不装程序只扩展 Agent 上下文让技能文件成为强制约束VibeCurb 的价值用 7 份技能文件把帮我做个网页变成先读、再建、再验在第一行代码写出来之前拦住 AI slop。这也是它最值得借鉴的一点给 Agent 定规矩别指望它自己有品味——把流程写成可读、可验证、可打分的文档质量就有了底线。赞分享【免费下载链接】VibeCurbVibeCurb - Injects taste into AI workflows to stop agents from generating boring, AI slop.项目地址https://gitcode.com/gh_mirrors/vi/VibeCurb点击查看免费下载相关推荐什么是 Agent Skill一文读懂 kotlin-agent-skills 的 AI 编程助手技能机制什么是 Agent Skill一文读懂 kotlin agent skills 的 AI 编程助手技能机制 kotlin agent skills 是 Jet为什么是16KLlama-3.2-1B_rai_1.8.0_npu_16K的Token Fusion与长上下文机制全解为什么是16KLlama 3.2 1B_rai_1.8.0_npu_16K的Token Fusion与长上下文机制全解 Llama 3.2 1B_rai_1.KLayout版图设计7天从新手到高手的秘诀是什么KLayout版图设计7天从新手到高手的秘诀是什么 还在为复杂的芯片版图设计而烦恼吗作为一名电子设计工程师你是否经常面临工具学习成本高、操作流程繁琐、验桌面应用硬件开发上一篇【亲测免费】 探索PixiJS的动态骨骼动画pixi-spine下一篇探索未来定位FAST-LIO-LOCALIZATION的极致体验创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考