interface-design-system

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Interface Design System

界面设计系统

Skill by ara.so — Design Skills collection.

This skill enables you to build interfaces with systematic consistency using the Interface Design framework. It provides principle-based craft, cross-session memory through

system.md

, and enforcement of design patterns for dashboards, admin panels, and application UIs.

由ara.so开发的Skill — 设计技能合集。

该Skill可让你借助界面设计框架构建具有系统化一致性的界面。它提供基于准则的设计方法、通过

system.md

实现跨会话记忆，并针对仪表盘、管理面板和应用UI强制执行设计模式。

What This Does

功能介绍

Interface Design prevents design drift across sessions by:

Craft — Applying professional design principles (spacing grids, depth strategies, surface elevation)
Memory — Persisting decisions in
```
.interface-design/system.md
```
that auto-load each session
Consistency — Ensuring every component follows the same patterns

Key difference: Without this system, button heights drift (36px, 38px, 40px...). With it, decisions are made once and applied consistently.

界面设计系统通过以下方式防止跨会话的设计偏差：

设计准则 — 应用专业设计原则（间距网格、层级策略、表面海拔）
记忆机制 — 将设计决策持久化到
```
.interface-design/system.md
```
，每次会话自动加载
一致性保障 — 确保每个组件遵循相同的设计模式

核心差异： 没有该系统时，按钮高度会出现偏差（36px、38px、40px...）。使用该系统后，设计决策只需制定一次，即可一致应用。

Installation

安装方法

Plugin Method (Recommended)

插件安装法（推荐）

bash

undefined

bash

undefined

Add the marketplace

添加插件市场

/plugin marketplace add Dammyjay93/interface-design

Install via plugin menu

通过插件菜单安装

/plugin menu

Select 'interface-design' from the menu

从菜单中选择'interface-design'


Restart Claude Code after installation.


安装后重启Claude Code。

Manual Method

手动安装法

bash

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

Restart Claude Code.

bash

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

重启Claude Code。

Core Workflow

核心工作流程

First Session (No system.md)

首次会话（无system.md）

When building UI for the first time:

1. Assess project context (data-heavy dashboard vs. consumer app)
2. Suggest design direction
3. Ask for confirmation
4. State design choices before building each component
5. Build with consistent principles
6. Offer to save system.md

Example:

User: "Build a user dashboard with metrics cards"

Agent Response:
---
This feels like a data-heavy dashboard — I'd suggest:
- Depth: Borders-only (clean, technical)
- Surfaces: Subtle elevation shifts (7% → 9% → 11%)
- Spacing: 8px base grid
- Foundation: Cool tones (slate)

Does this direction fit? (y/n)

[User: y]

Design Tokens:
- Depth: borders-only
- Surfaces: 7% → 9% → 11% lightness scale
- Borders: rgba(255,255,255,0.06)
- Spacing: 8px base (8, 16, 24, 32)
- Radius: 6px/8px

Building dashboard...
---

[Builds components consistently]

Want me to save these patterns to .interface-design/system.md? (y/n)

首次构建UI时：

1. 评估项目背景（数据密集型仪表盘 vs 消费类应用）
2. 提出设计方向建议
3. 请求确认
4. 在构建每个组件前说明设计选择
5. 遵循一致原则进行构建
6. 询问是否保存system.md

示例：

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

Agent回复：
---
这看起来是一个数据密集型仪表盘 — 我建议：
- 层级：仅使用边框（简洁、技术感）
- 表面：细微的亮度变化（7% → 9% → 11%）
- 间距：8px基础网格
- 基调：冷色调（石板灰）

这个方向是否符合需求？(y/n)

[用户：y]

设计令牌：
- 层级：仅使用边框
- 表面：7% → 9% → 11%亮度梯度
- 边框：rgba(255,255,255,0.06)
- 间距：8px基础（8、16、24、32）
- 圆角：6px/8px

正在构建仪表盘...
---

[按照一致原则构建组件]

是否要将这些模式保存到.interface-design/system.md？(y/n)

Subsequent Sessions (system.md exists)

后续会话（已存在system.md）

User: "Add a settings page"

Agent Response:
---
✓ Loaded .interface-design/system.md

Active System:
- Depth: borders-only
- Surfaces: 7% → 9% → 11% scale
- Spacing: 8px base grid
- Borders: rgba(255,255,255,0.06)

Building settings page with established patterns...
---

用户："添加一个设置页面"

Agent回复：
---
✓ 已加载.interface-design/system.md

当前生效的设计系统：
- 层级：仅使用边框
- 表面：7% → 9% → 11%亮度梯度
- 间距：8px基础网格
- 边框：rgba(255,255,255,0.06)

将按照既定模式构建设置页面...
---

System File Structure

系统文件结构

After establishing direction, patterns are saved to

.interface-design/system.md

markdown

undefined

确定设计方向后，模式将保存到

.interface-design/system.md

：

markdown

undefined

Design System

设计系统

Direction

设计方向

Personality: Precision & Density Foundation: Cool (slate) Depth: Borders-only

风格：精准&密集基调：冷色调（石板灰）层级：仅使用边框

Tokens

设计令牌

Spacing

间距

Base: 4px Scale: 4, 8, 12, 16, 24, 32, 48

基础值：4px 梯度：4、8、12、16、24、32、48

Colors

颜色

--background: hsl(222, 47%, 7%) --foreground: hsl(210, 20%, 98%) --secondary: hsl(215, 16%, 65%) --accent: hsl(217, 91%, 60%) --border: rgba(255,255,255,0.06)

Surfaces

表面

Card: +2% lightness (9%) Panel: +4% lightness (11%) Elevated: +6% lightness (13%)

卡片：亮度+2%（9%）面板：亮度+4%（11%）悬浮层：亮度+6%（13%）

Typography

排版

Base: 14px Scale: 12, 14, 16, 20, 24

基础字号：14px 字号梯度：12、14、16、20、24

Depth

层级

Strategy: Borders-only Border: 0.5px solid var(--border)

策略：仅使用边框边框：0.5px solid var(--border)

Patterns

组件模式

Button Primary

主按钮

Height: 36px
Padding: 12px 16px
Radius: 6px
Font: 14px medium
Usage: Primary actions only

高度：36px
内边距：12px 16px
圆角：6px
字体：14px medium
使用场景：仅用于主要操作

Card Default

默认卡片

Border: 0.5px solid var(--border)
Padding: 16px
Radius: 8px
Background: var(--card)

边框：0.5px solid var(--border)
内边距：16px
圆角：8px
背景：var(--card)

Input Text

文本输入框

Height: 36px
Padding: 8px 12px
Radius: 6px
Border: 0.5px solid var(--border)


This file auto-loads at session start.

高度：36px
内边距：8px 12px
圆角：6px
边框：0.5px solid var(--border)


该文件会在会话启动时自动加载。

Commands

命令

Initialize Design System

初始化设计系统

bash

/interface-design:init

Starts the design process with principle assessment and direction selection.

bash

/interface-design:init

启动设计流程，包含准则评估和方向选择。

Check Current System

查看当前系统状态

bash

/interface-design:status

Displays active design tokens, patterns, and system file location.

bash

/interface-design:status

显示当前生效的设计令牌、模式和系统文件位置。

Audit Code Consistency

代码一致性审计

bash

/interface-design:audit src/components

Checks existing code against system.md for inconsistencies:

Audit Results:
✓ Button.tsx - matches pattern
✗ Card.tsx - padding 18px (expected 16px)
✗ Input.tsx - height 40px (expected 36px)

bash

/interface-design:audit src/components

检查现有代码与system.md的一致性：

审计结果：
✓ Button.tsx - 符合模式
✗ Card.tsx - 内边距为18px（预期16px）
✗ Input.tsx - 高度为40px（预期36px）

Extract Patterns from Code

从代码中提取模式

bash

/interface-design:extract

Scans existing codebase to generate system.md from patterns:

Detected Patterns:
- Spacing: 8px base (found: 8, 16, 24, 32)
- Button height: 36px (5 instances)
- Card padding: 16px (3 instances)
- Radius: 6px/8px

Generate system.md from these patterns? (y/n)

bash

/interface-design:extract

扫描现有代码库，从现有模式生成system.md：

检测到的模式：
- 间距：8px基础（已发现：8、16、24、32）
- 按钮高度：36px（5处实例）
- 卡片内边距：16px（3处实例）
- 圆角：6px/8px

是否根据这些模式生成system.md？(y/n)

Design Directions

设计方向预设

The system infers direction from context, but you can specify:

系统会根据上下文推断设计方向，你也可以手动指定：

Precision & Density

精准&密集

markdown

Personality: Technical, tight spacing
Foundation: Cool (slate)
Depth: Borders-only
Use: Developer tools, admin dashboards

markdown

风格：技术感、紧凑间距
基调：冷色调（石板灰）
层级：仅使用边框
适用场景：开发者工具、管理仪表盘

Warmth & Approachability

温暖&亲和

markdown

Personality: Generous spacing, soft shadows
Foundation: Warm (amber/orange)
Depth: Layered shadows
Use: Collaborative tools, consumer apps

markdown

风格：宽松间距、柔和阴影
基调：暖色调（琥珀色/橙色）
层级：分层阴影
适用场景：协作工具、消费类应用

Sophistication & Trust

精致&可信

markdown

Personality: Cool tones, refined depth
Foundation: Blue-gray
Depth: Subtle shadows + borders
Use: Finance, enterprise B2B

markdown

风格：冷色调、细腻层级
基调：蓝灰色
层级：细微阴影+边框
适用场景：金融、企业级B2B

Boldness & Clarity

醒目&清晰

markdown

Personality: High contrast, dramatic space
Foundation: Pure grayscale
Depth: Strong shadows
Use: Modern dashboards, data-heavy

markdown

风格：高对比度、夸张间距
基调：纯灰度
层级：强烈阴影
适用场景：现代仪表盘、数据密集型应用

Utility & Function

实用&功能性

markdown

Personality: GitHub-style utility
Foundation: Muted grays
Depth: Minimal borders
Use: Developer tools, technical UIs

markdown

风格：GitHub式实用风格
基调：柔和灰度
层级：极简边框
适用场景：开发者工具、技术类UI

Code Examples

代码示例

React Component with System

基于设计系统的React组件

Button.tsx (following Precision & Density system):

tsx

// Design checkpoint:
// - Height: 36px (from system)
// - Padding: 12px 16px (from system)
// - Radius: 6px (from system)
// - Spacing: 8px base grid

interface ButtonProps {
  variant?: 'primary' | 'secondary';
  children: React.ReactNode;
}

export function Button({ variant = 'primary', children }: ButtonProps) {
  return (
    <button
      className={`
        h-9 px-4
        rounded-md
        text-sm font-medium
        transition-colors
        ${variant === 'primary' 
          ? 'bg-accent text-white hover:bg-accent/90' 
          : 'border border-border bg-card hover:bg-card/80'
        }
      `}
    >
      {children}
    </button>
  );
}

// Tailwind config should use system tokens:
// theme: {
//   extend: {
//     spacing: {
//       '4': '16px', // 8px base * 2
//     },
//     borderRadius: {
//       'md': '6px',
//     }
//   }
// }

Button.tsx（遵循精准&密集系统）：

tsx

// 设计检查点：
// - 高度：36px（来自系统）
// - 内边距：12px 16px（来自系统）
// - 圆角：6px（来自系统）
// - 间距：8px基础网格

interface ButtonProps {
  variant?: 'primary' | 'secondary';
  children: React.ReactNode;
}

export function Button({ variant = 'primary', children }: ButtonProps) {
  return (
    <button
      className={`
        h-9 px-4
        rounded-md
        text-sm font-medium
        transition-colors
        ${variant === 'primary' 
          ? 'bg-accent text-white hover:bg-accent/90' 
          : 'border border-border bg-card hover:bg-card/80'
        }
      `}
    >
      {children}
    </button>
  );
}

// Tailwind配置应使用系统令牌：
// theme: {
//   extend: {
//     spacing: {
//       '4': '16px', // 8px基础值 * 2
//     },
//     borderRadius: {
//       'md': '6px',
//     }
//   }
// }

Card Component

卡片组件

Card.tsx:

tsx

// Design checkpoint:
// - Border: 0.5px solid var(--border)
// - Padding: 16px (2 * 8px base)
// - Radius: 8px
// - Surface: +2% lightness elevation

interface CardProps {
  children: React.ReactNode;
  elevated?: boolean;
}

export function Card({ children, elevated = false }: CardProps) {
  return (
    <div
      className={`
        border border-border
        rounded-lg
        p-4
        ${elevated ? 'bg-elevated' : 'bg-card'}
      `}
    >
      {children}
    </div>
  );
}

Card.tsx:

tsx

// 设计检查点：
// - 边框：0.5px solid var(--border)
// - 内边距：16px（2 * 8px基础值）
// - 圆角：8px
// - 表面：亮度+2%的层级

interface CardProps {
  children: React.ReactNode;
  elevated?: boolean;
}

export function Card({ children, elevated = false }: CardProps) {
  return (
    <div
      className={`
        border border-border
        rounded-lg
        p-4
        ${elevated ? 'bg-elevated' : 'bg-card'}
      `}
    >
      {children}
    </div>
  );
}

CSS Variables Setup

CSS变量配置

globals.css:

css

/* Design system tokens from .interface-design/system.md */

:root {
  /* Spacing base: 8px */
  --spacing-1: 0.25rem; /* 4px */
  --spacing-2: 0.5rem;  /* 8px */
  --spacing-3: 0.75rem; /* 12px */
  --spacing-4: 1rem;    /* 16px */
  --spacing-6: 1.5rem;  /* 24px */
  --spacing-8: 2rem;    /* 32px */

  /* Colors - Cool foundation */
  --background: hsl(222, 47%, 7%);
  --foreground: hsl(210, 20%, 98%);
  --secondary: hsl(215, 16%, 65%);
  --accent: hsl(217, 91%, 60%);
  
  /* Surfaces - Elevation scale */
  --card: hsl(222, 47%, 9%);      /* +2% */
  --panel: hsl(222, 47%, 11%);    /* +4% */
  --elevated: hsl(222, 47%, 13%); /* +6% */
  
  /* Borders */
  --border: rgba(255, 255, 255, 0.06);
  
  /* Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

globals.css:

css

/* 来自.interface-design/system.md的设计系统令牌 */

:root {
  /* 间距基础值：8px */
  --spacing-1: 0.25rem; /* 4px */
  --spacing-2: 0.5rem;  /* 8px */
  --spacing-3: 0.75rem; /* 12px */
  --spacing-4: 1rem;    /* 16px */
  --spacing-6: 1.5rem;  /* 24px */
  --spacing-8: 2rem;    /* 32px */

  /* 颜色 - 冷色调基调 */
  --background: hsl(222, 47%, 7%);
  --foreground: hsl(210, 20%, 98%);
  --secondary: hsl(215, 16%, 65%);
  --accent: hsl(217, 91%, 60%);
  
  /* 表面 - 亮度层级梯度 */
  --card: hsl(222, 47%, 9%);      /* +2% */
  --panel: hsl(222, 47%, 11%);    /* +4% */
  --elevated: hsl(222, 47%, 13%); /* +6% */
  
  /* 边框 */
  --border: rgba(255, 255, 255, 0.06);
  
  /* 圆角 */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

Dashboard Example

仪表盘示例

Dashboard.tsx (full implementation):

tsx

import { Card } from './Card';
import { Button } from './Button';

// Design checkpoint:
// - Grid: 24px gap (3 * 8px base)
// - Cards: 16px padding (system pattern)
// - Metrics: 32px vertical spacing (4 * 8px)

export function Dashboard() {
  return (
    <div className="min-h-screen bg-background p-6">
      {/* Header */}
      <header className="mb-8">
        <h1 className="text-2xl font-semibold text-foreground">
          Dashboard
        </h1>
        <p className="text-sm text-secondary mt-2">
          Overview of your metrics
        </p>
      </header>

      {/* Metrics Grid - 24px gap */}
      <div className="grid grid-cols-3 gap-6 mb-8">
        <Card>
          <div className="space-y-2">
            <p className="text-sm text-secondary">Total Users</p>
            <p className="text-2xl font-semibold text-foreground">
              12,549
            </p>
            <p className="text-xs text-accent">+12% from last month</p>
          </div>
        </Card>

        <Card>
          <div className="space-y-2">
            <p className="text-sm text-secondary">Revenue</p>
            <p className="text-2xl font-semibold text-foreground">
              $45,231
            </p>
            <p className="text-xs text-accent">+8% from last month</p>
          </div>
        </Card>

        <Card>
          <div className="space-y-2">
            <p className="text-sm text-secondary">Active Sessions</p>
            <p className="text-2xl font-semibold text-foreground">
              573
            </p>
            <p className="text-xs text-secondary">Currently online</p>
          </div>
        </Card>
      </div>

      {/* Data Table */}
      <Card elevated>
        <div className="flex items-center justify-between mb-4">
          <h2 className="text-lg font-semibold text-foreground">
            Recent Activity
          </h2>
          <Button variant="secondary">View All</Button>
        </div>
        
        <table className="w-full">
          <thead>
            <tr className="border-b border-border">
              <th className="text-left py-3 text-sm text-secondary font-medium">
                User
              </th>
              <th className="text-left py-3 text-sm text-secondary font-medium">
                Action
              </th>
              <th className="text-left py-3 text-sm text-secondary font-medium">
                Time
              </th>
            </tr>
          </thead>
          <tbody>
            <tr className="border-b border-border">
              <td className="py-3 text-sm text-foreground">john@example.com</td>
              <td className="py-3 text-sm text-secondary">Logged in</td>
              <td className="py-3 text-sm text-secondary">2 min ago</td>
            </tr>
          </tbody>
        </table>
      </Card>
    </div>
  );
}

Dashboard.tsx（完整实现）：

tsx

import { Card } from './Card';
import { Button } from './Button';

// 设计检查点：
// - 网格：24px间距（3 * 8px基础值）
// - 卡片：16px内边距（系统模式）
// - 指标：32px垂直间距（4 * 8px）

export function Dashboard() {
  return (
    <div className="min-h-screen bg-background p-6">
      {/* 头部 */}
      <header className="mb-8">
        <h1 className="text-2xl font-semibold text-foreground">
          Dashboard
        </h1>
        <p className="text-sm text-secondary mt-2">
          指标概览
        </p>
      </header>

      {/* 指标网格 - 24px间距 */}
      <div className="grid grid-cols-3 gap-6 mb-8">
        <Card>
          <div className="space-y-2">
            <p className="text-sm text-secondary">总用户数</p>
            <p className="text-2xl font-semibold text-foreground">
              12,549
            </p>
            <p className="text-xs text-accent">较上月增长12%</p>
          </div>
        </Card>

        <Card>
          <div className="space-y-2">
            <p className="text-sm text-secondary">营收</p>
            <p className="text-2xl font-semibold text-foreground">
              $45,231
            </p>
            <p className="text-xs text-accent">较上月增长8%</p>
          </div>
        </Card>

        <Card>
          <div className="space-y-2">
            <p className="text-sm text-secondary">活跃会话数</p>
            <p className="text-2xl font-semibold text-foreground">
              573
            </p>
            <p className="text-xs text-secondary">当前在线</p>
          </div>
        </Card>
      </div>

      {/* 数据表格 */}
      <Card elevated>
        <div className="flex items-center justify-between mb-4">
          <h2 className="text-lg font-semibold text-foreground">
            最近活动
          </h2>
          <Button variant="secondary">查看全部</Button>
        </div>
        
        <table className="w-full">
          <thead>
            <tr className="border-b border-border">
              <th className="text-left py-3 text-sm text-secondary font-medium">
                用户
              </th>
              <th className="text-left py-3 text-sm text-secondary font-medium">
                操作
              </th>
              <th className="text-left py-3 text-sm text-secondary font-medium">
                时间
              </th>
            </tr>
          </thead>
          <tbody>
            <tr className="border-b border-border">
              <td className="py-3 text-sm text-foreground">john@example.com</td>
              <td className="py-3 text-sm text-secondary">已登录</td>
              <td className="py-3 text-sm text-secondary">2分钟前</td>
            </tr>
          </tbody>
        </table>
      </Card>
    </div>
  );
}

Common Patterns

通用模式

Before Building a Component

构建组件前

Always state design choices:

Design checkpoint for FormInput:
- Height: 36px (system standard)
- Padding: 8px 12px (vertical/horizontal from 8px grid)
- Border: 0.5px solid var(--border) (system depth)
- Radius: 6px (system sm radius)
- Focus: 1px accent outline (interactive state)

始终说明设计选择：

FormInput的设计检查点：
- 高度：36px（系统标准）
- 内边距：8px 12px（基于8px网格的垂直/水平值）
- 边框：0.5px solid var(--border)（系统层级）
- 圆角：6px（系统小尺寸圆角）
- 聚焦状态：1px accent轮廓（交互状态）

After Building Components

构建组件后

Offer to persist new patterns:

Built 3 new components following system principles.

New patterns detected:
- FormInput: 36px height, 8px/12px padding
- Select: 36px height, matches FormInput
- Checkbox: 16px size (2 * 8px base)

Save these patterns to system.md? (y/n)

询问是否保存新模式：

已按照系统原则构建3个新组件。

检测到新模式：
- FormInput：36px高度，8px/12px内边距
- Select：36px高度，与FormInput匹配
- Checkbox：16px尺寸（2 * 8px基础值）

是否将这些模式保存到system.md？(y/n)

Spacing Grid Adherence

间距网格遵循规则

Always use multiples of base grid:

tsx

// ✓ Correct (8px base grid)
<div className="space-y-4">  {/* 16px = 8 * 2 */}
  <div className="p-6">       {/* 24px = 8 * 3 */}
    <div className="mb-8">    {/* 32px = 8 * 4 */}

// ✗ Incorrect (off-grid values)
<div className="space-y-5">  {/* 20px - not on 8px grid */}
  <div className="p-7">       {/* 28px - not on 8px grid */}

始终使用基础网格的倍数：

tsx

// ✓ 正确（8px基础网格）
<div className="space-y-4">  {/* 16px = 8 * 2 */}
  <div className="p-6">       {/* 24px = 8 * 3 */}
    <div className="mb-8">    {/* 32px = 8 * 4 */}

// ✗ 错误（非网格值）
<div className="space-y-5">  {/* 20px - 不在8px网格上 */}
  <div className="p-7">       {/* 28px - 不在8px网格上 */}

Surface Elevation

表面亮度层级

Use consistent lightness shifts:

css

/* Base background: 7% lightness */
--background: hsl(222, 47%, 7%);

/* +2% elevation (cards) */
--card: hsl(222, 47%, 9%);

/* +4% elevation (panels) */
--panel: hsl(222, 47%, 11%);

/* +6% elevation (modals) */
--elevated: hsl(222, 47%, 13%);

使用一致的亮度变化：

css

/* 基础背景：7%亮度 */
--background: hsl(222, 47%, 7%);

/* +2%亮度层级（卡片） */
--card: hsl(222, 47%, 9%);

/* +4%亮度层级（面板） */
--panel: hsl(222, 47%, 11%);

/* +6%亮度层级（模态框） */
--elevated: hsl(222, 47%, 13%);

Depth Strategy

层级策略

Borders-only (technical/minimal):

css

border: 0.5px solid var(--border);
box-shadow: none;

Layered shadows (consumer/warm):

css

box-shadow: 
  0 1px 2px rgba(0, 0, 0, 0.05),
  0 4px 8px rgba(0, 0, 0, 0.08);

Subtle shadows + borders (enterprise):

css

border: 0.5px solid var(--border);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);

仅使用边框（技术感/极简）：

css

border: 0.5px solid var(--border);
box-shadow: none;

分层阴影（消费类/温暖风格）：

css

box-shadow: 
  0 1px 2px rgba(0, 0, 0, 0.05),
  0 4px 8px rgba(0, 0, 0, 0.08);

细微阴影+边框（企业级）：

css

border: 0.5px solid var(--border);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);

Configuration

配置

Custom Direction

自定义设计方向

Edit

.interface-design/system.md

to customize:

markdown

undefined

编辑

.interface-design/system.md

进行自定义：

markdown

undefined

Direction

设计方向

Personality: Custom Technical Foundation: Purple (for brand alignment) Depth: Borders + subtle glow

风格：自定义技术风格基调：紫色（符合品牌调性）层级：边框+细微光晕

Tokens

设计令牌

Colors

颜色

--accent: hsl(270, 70%, 60%) # Brand purple --glow: 0 0 8px rgba(138, 43, 226, 0.2)

undefined

--accent: hsl(270, 70%, 60%) # 品牌紫色 --glow: 0 0 8px rgba(138, 43, 226, 0.2)

undefined

Multi-Theme Support

多主题支持

Create theme variants:

markdown

undefined

创建主题变体：

markdown

undefined

Themes

主题

Light

浅色

--background: hsl(0, 0%, 98%) --foreground: hsl(222, 47%, 11%) --border: rgba(0, 0, 0, 0.08)

Dark

深色

--background: hsl(222, 47%, 7%) --foreground: hsl(210, 20%, 98%) --border: rgba(255, 255, 255, 0.06)

undefined

--background: hsl(222, 47%, 7%) --foreground: hsl(210, 20%, 98%) --border: rgba(255, 255, 255, 0.06)

undefined

Troubleshooting

故障排除

System Not Loading

系统未加载

Problem: Claude doesn't acknowledge system.md at session start.

Solution:

bash

undefined

问题： Claude在会话启动时未识别system.md。

解决方案：

bash

undefined

Verify file exists

验证文件是否存在

ls -la .interface-design/system.md

Check plugin installation

检查插件安装状态

/plugin menu # Should show 'interface-design'

/plugin menu # 应显示'interface-design'

Manually load

手动加载

/interface-design:status

undefined

/interface-design:status

undefined

Inconsistent Components

组件不一致

Problem: Components built in same session have different values.

Solution:

bash

undefined

问题： 同一会话中构建的组件值不一致。

解决方案：

bash

undefined

Audit all components

审计所有组件

/interface-design:audit src/components

Re-establish tokens

重新确立令牌

/interface-design:init

undefined

/interface-design:init

undefined

Migration from Old System

从旧系统迁移

Problem: Upgrading from

claude-design-skill

Solution:

bash

undefined

问题： 从

claude-design-skill

升级。

解决方案：

bash

undefined

Rename directory

重命名目录

mv .ds-engineer .interface-design

Update system file reference

更新系统文件引用

Change any @ds-engineer mentions to @interface-design

将所有@ds-engineer提及改为@interface-design

Reinstall plugin

重新安装插件

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

undefined

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

undefined

Extract Not Finding Patterns

提取功能未找到模式

Problem:

/interface-design:extract

returns no patterns.

Solution:

bash

undefined

问题：

/interface-design:extract

未返回任何模式。

解决方案：

bash

undefined

Ensure components use consistent values

确保组件使用一致的值

Look for:

查找：

- Repeated spacing (8px, 16px, 24px)

- 重复的间距值（8px、16px、24px）

- Same button heights (36px appears 5+ times)

- 相同的按钮高度（36px出现5次以上）

- Consistent border radius (6px/8px)

- 一致的圆角（6px/8px）

If values are scattered, manually create system.md:

如果值分散，手动创建system.md：

mkdir -p .interface-design cp ~/.claude/skills/interface-design/reference/examples/system-precision.md
.interface-design/system.md

undefined

mkdir -p .interface-design cp ~/.claude/skills/interface-design/reference/examples/system-precision.md
.interface-design/system.md

undefined

Reference Examples

参考示例

Precision & Density (Admin/Dashboard)

精准&密集（管理/仪表盘）

markdown

Direction: Technical precision
Foundation: Cool slate
Depth: Borders-only
Spacing: 8px base
Components: Tight, data-dense

markdown

方向：技术精准
基调：冷色调石板灰
层级：仅使用边框
间距：8px基础
组件：紧凑、数据密集

Warmth & Approachability (Consumer)

温暖&亲和（消费类）

markdown

Direction: Friendly collaboration
Foundation: Warm amber
Depth: Soft shadows
Spacing: 12px base
Components: Generous, relaxed

See full templates in

reference/examples/

```
system-precision.md
```
```
system-warmth.md
```
```
system-trust.md
```
```
system-bold.md
```

markdown

方向：友好协作
基调：暖色调琥珀色
层级：柔和阴影
间距：12px基础
组件：宽松、舒适

完整模板请查看

reference/examples/

：

```
system-precision.md
```
```
system-warmth.md
```
```
system-trust.md
```
```
system-bold.md
```