Interface Design

在使用 Claude Code 编写界面代码时，设计决策会不断产生：按钮高度、卡片内边距、颜色层级、间距单位……如果没有一套可复用、可记忆的系统，这些细节很容易在不同对话中逐渐漂移，导致最终界面杂乱无章。

Interface Design 是一个专为 仪表盘、工具类应用、管理后台 等功能性界面打造的 Claude Code 插件。它帮助你在多次对话中保持设计一致性，避免重复决策，让 AI 成为你真正可靠的 UI 协作者。

它解决了什么问题？

没有 Interface Design 时：

• 每次对话都从零开始，Claude 不记得上次用了什么间距或颜色；
• 按钮高度忽高忽低（36px、38px、40px）；
• 间距随意取值（14px、17px、22px），没有规律；
• 各组件之间缺乏统一语言，整体视觉割裂。

使用 Interface Design 后：

• 设计系统自动加载，无需重复说明；
• 所有组件遵循同一套规则（如按钮固定为 36px 高，卡片统一 16px 内边距）；
• 间距基于 4px 基准网格（4、8、12、16、24…），结构清晰；
• 深度、色彩、圆角等细节全程一致，形成可识别的界面语言。

一次决策，处处生效。

如何安装？

推荐方式：通过插件市场

/plugin marketplace add Dammyjay93/interface-design
/plugin menu

在插件菜单中选择 interface-design，然后重启 Claude Code。

安装后你将获得：

• 基于设计原则生成的 UI 组件；
• 每次会话自动加载 .interface-design/system.md；
• 每个组件生成前明确说明所用设计规则；
• 支持命令行操作：status、audit、extract。

手动安装（适用于高级用户）

git clone https://github.com/Dammyjay93/interface-design.git
cd interface-design
cp -r .claude/* ~/.claude/
cp -r .claude-plugin/* ~/.claude-plugin/

完成后重启 Claude Code 即可。

它如何工作？

场景一：已有设计系统（存在 system.md）

Claude 会：

• 自动读取 .interface-design/system.md；
• 应用已定义的间距、颜色、组件模式；
• 在生成每个组件前说明所用规则；
• 若引入新元素，会询问是否保存为新模式。

场景二：首次使用（无 system.md）

Claude 会：

1. 分析项目类型（如“数据密集型仪表盘”）；
2. 提出初步设计建议（如“仅用边框表现层级”“8px 间距基准”）；
3. 征求你的确认；
4. 基于确认后的规则构建界面；
5. 最后询问是否将当前决策保存为系统文件。

实际对话示例

你： “构建一个包含指标卡片的用户仪表盘”

Claude：
这看起来是数据密集型界面，建议：

• 深度策略：仅边框（简洁、技术感）
• 表面层级：7% → 9% → 11% 亮度梯度
• 间距基准：8px

是否采用此方向？
→ 你确认后，Claude 按此规则生成完整界面，并问：“是否保存为系统？”

下次你： “添加一个设置页面”

Claude：
✓ 已加载现有系统

• 深度：仅边框
• 间距：8px
• 边框色：rgba(255,255,255,0.06)

→ 自动生成与仪表盘风格完全一致的设置页。

设计系统文件长什么样？

所有决策最终保存在 .interface-design/system.md 中，例如：

# 设计系统

## 设计方向
个性特征：精准与紧凑  
基调：冷色（石板灰）  
深度策略：仅边框

## 设计令牌
### 间距
基准：4px  
梯度：4, 8, 12, 16, 24, 32

### 色彩
--foreground: slate-900  
--secondary: slate-600  
--accent: blue-600

## 组件模式
### 主要按钮
- 高度：36px
- 内边距：12px 16px
- 圆角：6px

### 默认卡片
- 边框：0.5px solid
- 内边距：16px
- 圆角：8px

该文件在每次会话启动时自动加载，确保 Claude 始终“记得”你的设计语言。

常用命令

• /interface-design:init —— 初始化设计会话
• /interface-design:status —— 查看当前系统配置
• /interface-design:audit <路径> —— 检查现有代码是否符合系统规范
• /interface-design:extract —— 从已有代码中提取设计模式

支持多种设计方向

Interface Design 内置六种预设风格，可根据项目自动推荐：

你也可以在初始化时手动指定方向。

从旧版迁移

该项目原名 claude-design-skill，现已更名为 interface-design。
旧链接仍可访问，但建议更新：

# 卸载旧版
rm -rf ~/.claude/skills/design-principles

# 安装新版
/plugin marketplace add Dammyjay93/interface-design
/plugin menu

若你已有 .ds-engineer/system.md，只需将目录重命名为 .interface-design/，系统即可继续使用。

核心理念

• 决策具有累积效应：一个间距值一旦被采用，就可能成为整个系统的基石。
• 一致性胜过完美：统一的“不完美”远比零散的“正确”更专业。
• 记忆使迭代成为可能：只有记住“为什么这样设计”，才能有意识地演进，而非随机漂移。

Interface Design 不追求炫技，而是让 AI 辅助开发回归工程本质：可预测、可复用、可维护。