展示HN：Drift-guard – 保护您的用户界面免受AI代理设计漂移的影响
AI 编码助手（Cursor、Claude Code、Copilot）速度极快，但它们常常会在你未察觉的情况下搞乱你的 UI 设计令牌或结构语义，直到 PR 合并后才会显现出来。<p>为此，我开发了 drift-guard 来防止这种情况。它是一个纯 CLI 工具（零令牌开销，无需 MCP 服务器），可以快照你的设计令牌和 DOM 结构，然后在代码级别检查“漂移”。<p>工作原理：
1. init 扫描你的 CSS/HTML，并快照所有设计令牌（颜色、字体、间距、阴影、圆角、布局、效果）以及 DOM 的结构指纹。
2. rules 为 5 个 AI 工具生成规则文件（.cursorrules、CLAUDE.md、AGENTS.md、copilot-instructions.md、.clinerules）。
3. check 将当前状态与快照进行比较，如果漂移超出阈值，则以代码 1 退出。<p>关键设计决策：
- 零令牌开销：纯 CLI。
- 静态分析：使用 css-tree 和 cheerio（无需无头浏览器，< 1 秒）。
- 陈旧快照警告：如果基线超过 7 天，则发出警告。
- 结构 + 样式：同时监控 CSS 令牌和 DOM 层次结构。
- 提交前钩子：在提交漂移的代码之前阻止其提交。<p>GitHub: https://github.com/Hwani-Net/drift-guard
npm: npm i -g @stayicon/drift-guard<p>我很想听听反馈！你是否在使用 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?