如何驯服 Claude Code 并告别手动调整像素

一个常见的场景：你让 AI 设计一个仪表盘界面，它给出了相当不错的结果。你让它添加第二个页面——就在这时“设计漂移”开始出现了。按钮突然向上偏移了几个像素，卡片的内边距开始“漂移”，灰色背景色也悄然改变了色调。Claude 根本不会记得它十分钟前做了什么决定。

问题不在于模型本身，而在于缺乏对设计决策的长期记忆。interface-Design 仓库正是为了解决这一问题。它是 Claude Code 的一个扩展，强制 AI 遵循一致的规则系统，更重要的是，在会话之间记住这些规则。

为什么这对开发者很重要

如果你使用 Claude 进行原型设计或构建管理后台，你就会知道项目很快就会变成一堆内联样式和随机魔数的混乱。这个工具将混乱的代码生成转变为系统化的设计。

核心价值在于 .interface-design/system.md 文件。一旦你和 Claude 就基础规则达成一致——例如使用 8 像素网格和仅 6px 的圆角——这些规则就会被写入配置。当下次启动 Claude Code 时，它会首先读取这个文件，不会建议在昨天严格的 Slate-900 旁边使用“创新”的粉色渐变。

这个扩展能做什么

该项目专为构建复杂界面而设计：监控工具、控制面板和专业软件。它不太适合落地页或营销网站，因为那里有太多视觉干扰。以下是它强调的功能：

有记忆的设计

该工具保留所有已做出的决策。如果你曾经批准按钮高度为 36px，Claude 会在所有地方使用该值。不再需要从一个聊天窗口复制样式到另一个，也不再需要问：“我们之前说的卡片圆角是多少来着？”

原则性方法

该扩展不是简单地猜测，而是为你提供选择方向（Design Directions）。例如，技术工具选择 Precision & Density（精确与密度），消费者应用选择 Warmth & Approachability（温暖与亲和力）。这为所有后续工作设定了基调：元素密度、阴影使用和调色板。

审计和模式提取

该扩展有实用的命令。/interface-design:audit 会扫描你的代码，检查你（或 AI）是否违反了自己的设计系统。如果你已有现有项目，extract 命令会尝试提取现有模式并将其格式化为系统文件。

底层原理

本质上，它是一组系统提示（skills）和 Claude Code 的插件。当你开始工作时，流程大致如下：

Claude 分析项目上下文。
提出视觉方向并等待你的“ok”。
生成组件，在每个代码块之前明确说明设计选择。
建议将成功的模式保存到 system.md。

系统文件本身极其简单——它只是纯 Markdown。如果你认为 4px 的基础间距太局促，可以轻松手动编辑。

最简单的方式是通过 Claude Code 插件市场：

安装后，你需要重启 Claude Code。如果你更喜欢手动控制一切，可以直接克隆仓库并将文件分发到 ~/.claude/ 文件夹，如说明中所述。

如何开始使用

这个项目对于那些用 AI“手动”构建界面、厌倦了视觉不一致的人来说绝对有用。它不是能画出杰作的灵丹妙药，而是一个让 Claude 守规矩的好方法。

对于需要快速组装一个像样的管理后台、而不必花数小时配置 Tailwind 或从头编写 CSS 变量的全栈开发者来说，这个工具尤其有用。该工具扮演的是一个挑剔的设计主管的角色，当你应该在 16px 的地方用了 17px 的间距时，它会拍你的手。

缺点是：该项目与 Claude Code 紧密绑定，所以在常规的 Claude.ai 网页界面中不会有太大用处。但如果你已经转向 Anthropic 的控制台界面，interface-Design 将成为你工作流程的绝佳补充。