Show HN: Drift-guard – 保护你的 UI 免受 AI 代理的设计漂移影响
1 分•作者: stayicon•5 个月前
AI 编码助手（Cursor、Claude Code、Copilot）速度极快，但它们经常会搞乱你的 UI 设计令牌或结构语义，而你直到 PR 合并后才会注意到这一点。
我构建了 drift-guard 来防止这种情况。它是一个纯 CLI 工具（零令牌开销，无 MCP 服务器），可以对你的设计令牌和 DOM 结构进行快照，然后在代码级别检查“漂移”。
工作原理：
1. init 扫描你的 CSS/HTML 并对所有设计令牌（颜色、字体、间距、阴影、圆角、布局、效果）以及你的 DOM 的结构指纹进行快照。
2. rules 为 5 个 AI 工具生成规则文件（.cursorrules, CLAUDE.md, AGENTS.md, copilot-instructions.md, .clinerules）。
3. check 将当前状态与快照进行比较，如果漂移超过阈值，则退出，代码为 1。
关键设计决策：
* 零令牌开销：纯 CLI。
* 静态分析：使用 css-tree 和 cheerio（无无头浏览器，< 1 秒）。
* 过时快照警告：如果基线超过 7 天，则发出警告。
* 结构 + 样式：同时监控 CSS 令牌和 DOM 层次结构。
* 提交前钩子：在提交落地前阻止漂移的提交。
GitHub：https://github.com/Hwani-Net/drift-guard
npm：npm i -g @stayicon/drift-guard
我很乐意收到反馈！你是否在使用 AI 编码工具时遇到过“设计漂移”问题？
查看原文
AI coding agents (Cursor, Claude Code, Copilot) are incredibly fast, but they often mess up your UI design tokens or structural semantics without you noticing until after the PR is merged.<p>I built drift-guard to prevent this. It's a pure CLI tool (zero token overhead, no MCP server) that snapshots your design tokens and DOM structure, then checks for "drift" at the code level.<p>How it works:
1. init scans your CSS/HTML and snapshots all design tokens (colors, fonts, spacing, shadows, radius, layout, effects) + a structural fingerprint of your DOM.
2. rules generates rule files for 5 AI tools (.cursorrules, CLAUDE.md, AGENTS.md, copilot-instructions.md, .clinerules).
3. check compares current state against the snapshot and exits with code 1 if drift exceeds the threshold.<p>Key design decisions:
- Zero token overhead: Pure CLI.
- Static Analysis: Uses css-tree and cheerio (no headless browser, < 1 second).
- Stale snapshot warning: Warns if baseline is older than 7 days.
- Structure + Style: Monitors both CSS tokens and DOM hierarchy.
- Pre-commit hook: Blocks drifted commits before they land.<p>GitHub: https://github.com/Hwani-Net/drift-guard
npm: npm i -g @stayicon/drift-guard<p>I'd love feedback! Is "Design Drift" something you've experienced with AI coding tools?