buoy
自动检测并修复代码与设计系统之间的偏差。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：buoy。 它的用途是：自动检测并修复代码与设计系统之间的偏差。 完整的 Skill 内容见：https://321skill.com/skills/buoy/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“帮我在当前项目中运行 Buoy，检查一下最近用 AI 生成的 React 组件有没有不符合我们设计规范的地方。” 它会调用 Buoy 执行扫描，并列出所有发现的硬编码颜色、不一致的间距使用和组件命名问题，甚至提供一键修复建议。
介绍
Buoy 是一款专为应对 AI 编码工具引入的设计漂移问题而生的工具。AI 生成代码时，常常会忽略项目已有的设计系统，使用硬编码颜色值、任意间距或不一致的组件命名，导致代码与设计规范脱节。Buoy 通过自动扫描代码库，能精准识别这些“设计漂移”问题，例如将 #3b82f6 替换为 var(--color-primary)，或将 padding: 17px 修正为符合设计间距规范的值。
使用 Buoy 非常简单，无需复杂配置。只需运行 npx ahoybuoy begin 启动交互式向导，或直接运行 npx ahoybuoy show all 立即查看当前项目的设计系统概览。它会自动检测你的前端框架，并开始工作。其命令结构清晰，支持查看设计令牌、扫描漂移、自动修复以及集成到 AI 代理工作流中。
这个工具非常适合那些使用 AI 辅助编码（如 Claude、Cursor）的开发者，以及负责维护大型或多人协作前端项目的工程师。它能帮助团队在代码合并前就发现并统一设计规范，避免技术债务的积累。
建议将 Buoy 集成到你的 CI/CD 流程或预提交钩子中，通过 buoy drift check 命令在代码提交前自动检查。对于已存在的历史问题，可以先使用 ignore 命令暂时忽略，再逐步修复。注意，它主要关注前端代码（CSS、组件库）与设计系统的一致性，对于纯粹的业务逻辑错误或后端代码规范检查能力有限。
核心特点
Buoy 的核心优势在于其“零配置”启动和针对“AI 生成代码”场景的优化。它无需手动配置规则，能自动识别项目中的设计令牌和组件，并精准捕捉 AI 工具常犯的硬编码、命名不一致等问题，而同类代码质量工具往往需要手动定义规则或主要关注语法错误。
注意事项
不适合用于检查与设计系统无关的后端业务逻辑错误或复杂的算法问题。
常见问题
Buoy 支持哪些前端框架？
支持主流框架如 React、Vue 等，并能自动检测，无需手动配置。
如何将 Buoy 集成到开发流程中？
可通过 `buoy dock hooks` 命令设置 Git 钩子，或在 CI 中运行 `buoy drift check` 进行自动化检查。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/buoy/raw/index.md 读取 buoy 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/buoy/raw/index.md（查看排版版本）