### Install New Plugin

Source: https://github.com/dammyjay93/interface-design/blob/main/README.md

Instructions for uninstalling the old skill and installing the new plugin. Ensure you have the correct path for uninstallation.

```bash
# Uninstall old
rm -rf ~/.claude/skills/design-principles

# Install new plugin
/plugin marketplace add Dammyjay93/interface-design
/plugin menu
```

--------------------------------

### Verify Plugin Installation

Source: https://github.com/dammyjay93/interface-design/blob/main/_autodocs/getting-started.md

After installation, use this command to list all active plugins. Check the output for 'interface-design' to confirm it is active and note its version.

```bash
/plugin list
```

--------------------------------

### Design System File Example

Source: https://github.com/dammyjay93/interface-design/blob/main/_autodocs/types.md

A complete example of a design system file, including direction, tokens, patterns, and decisions.

```markdown
# Design System

## Direction

**Personality:** Precision & Density

**Foundation:** Cool (slate)

**Depth:** Borders-only

## Tokens

### Spacing
Base: 4px
Scale: 4, 8, 12, 16, 24, 32

### Colors
```
--foreground: slate-900
--secondary: slate-600
--muted: slate-400
--faint: slate-200
--border: rgba(0, 0, 0, 0.08)
--accent: blue-600
--semantic-success: green-600
--semantic-error: red-600
```

### Radius
Scale: 4px, 6px, 8px (sharp)

### Typography
Font: system-ui
Scale: 11, 12, 13, 14, 16, 18, 24, 32
Weights: 400, 500, 600
Mono: SF Mono

## Patterns

### Button Primary
- Height: 32px
- Padding: 8px 12px
- Radius: 4px
- Font: 13px, 500 weight
- Border: 1px solid
- Usage: Primary actions

### Card Default
- Border: 0.5px solid (faint)
- Padding: 12px
- Radius: 6px
- Background: white
- Usage: Content containers

### Table Cell
- Padding: 8px 12px
- Font: 13px tabular-nums
- Border-bottom: 1px solid (faint)
- Usage: Data grid cells

## Decisions

| Decision | Rationale | Date |
|----------|-----------|------|
| Borders-only depth | Information density matters more than lift. Borders keep the interface tight. | 2026-02-09 |
| 4px spacing base | Compact enough for data tables, divisible by common UI sizes (4, 8, 12, 16, 32). | 2026-02-09 |
| System fonts | Performance and native feel matter more than distinctive typography. | 2026-02-09 |
| Compact button sizing | Power users, high information density. 32px allows more screen real estate for content. | 2026-02-09 |
```

--------------------------------

### Install Interface Design Plugin

Source: https://github.com/dammyjay93/interface-design/blob/main/README.md

Add the marketplace and install the interface-design plugin via the Claude Code menu. Restart Claude Code after installation.

```bash
/plugin marketplace add Dammyjay93/interface-design

/plugin menu
```

--------------------------------

### Button Pattern Analysis Example

Source: https://github.com/dammyjay93/interface-design/blob/main/_autodocs/commands.md

This example illustrates the output for button pattern analysis, detailing counts and percentages for button heights.

```text
Found 8 buttons: Height 36px (7/8), 40px (1/8)
```

--------------------------------

### Example: First Session with Interface Design

Source: https://github.com/dammyjay93/interface-design/blob/main/README.md

Demonstrates the initial interaction where the user requests a dashboard, Claude suggests design principles, and the user confirms. The system is then saved.

```text
You: "Build a user dashboard with metrics cards"

Claude:
This feels like a data-heavy dashboard — I'd suggest:
- Depth: Borders-only (clean, technical)
- Surfaces: Subtle elevation shifts
- Spacing: 8px base

Does this direction fit?

[You: y]

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

[Builds dashboard with consistent depth, spacing, surfaces]

Want me to save these patterns to .interface-design/system.md?

[You: y]

✓ System saved
```

--------------------------------

### Manual Installation of Interface Design

Source: https://github.com/dammyjay93/interface-design/blob/main/README.md

Clone the repository and copy configuration files to the .claude and .claude-plugin directories. Restart Claude Code afterwards.

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

--------------------------------

### Example: Second Session with Interface Design

Source: https://github.com/dammyjay93/interface-design/blob/main/README.md

Shows how Interface Design loads the existing system.md in a subsequent session, applies established patterns, and asks if new patterns need saving.

```text
You: "Add a settings page"

Claude:
✓ Loaded system.md

Depth: borders-only
Surfaces: using established scale
Borders: rgba(255,255,255,0.06)
Spacing: 8px base

[Builds settings page matching existing system]

Want me to save any new patterns?
```

--------------------------------

### SKILL.md Structure Example

Source: https://github.com/dammyjay93/interface-design/blob/main/_autodocs/configuration.md

Illustrates the basic structure of the main SKILL.md file, including frontmatter and the main content section for the Interface Design skill.

```markdown
---
name: interface-design
description: Skill description
---

# Interface Design

[Skill content...]
```

--------------------------------

### Install Plugin via Marketplace

Source: https://github.com/dammyjay93/interface-design/blob/main/_autodocs/configuration.md

Use these commands to add the plugin through the marketplace and access its menu. A restart of Claude Code is required.

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

--------------------------------

### Spacing Analysis Example

Source: https://github.com/dammyjay93/interface-design/blob/main/_autodocs/commands.md

This example shows the output format for spacing analysis, including detected padding and margin values and the suggested base unit and scale.

```text
Found: 4px (12x), 8px (23x), 12px (18x), 16px (31x), 24px (8x)
Suggests: Base 4px, Scale: 4, 8, 12, 16, 24
```

--------------------------------

### Border Radius Analysis Example

Source: https://github.com/dammyjay93/interface-design/blob/main/_autodocs/commands.md

Example output for border radius analysis, indicating the suggested scale for border-radius values.

```text
Suggests: Radius scale: 6px, 8px
```

--------------------------------

### Depth Strategy Analysis Example

Source: https://github.com/dammyjay93/interface-design/blob/main/_autodocs/commands.md

Example output for depth strategy analysis, comparing the usage of borders versus box-shadows to suggest a depth strategy.

```text
34 borders, 2 shadows → Suggests: Borders-only depth
```

--------------------------------

### Example Decisions Table Entry

Source: https://github.com/dammyjay93/interface-design/blob/main/_autodocs/getting-started.md

This example shows how to document a specific design decision in the Decisions table within your system.md file. It includes the decision, rationale, and date.

```markdown
| 4px spacing base | Tight enough for data tables, divisible by common UI sizes (4, 8, 12, 16, 32). | 2026-02-09 |

```

--------------------------------

### Manually Install Interface Design Plugin

Source: https://github.com/dammyjay93/interface-design/blob/main/_autodocs/getting-started.md

This method is for advanced users or offline installations. It involves cloning the repository and copying plugin files to the appropriate Claude configuration directories, followed by a restart of 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/

# Restart Claude Code
```

--------------------------------

### Card Pattern Analysis Example

Source: https://github.com/dammyjay93/interface-design/blob/main/_autodocs/commands.md

Example output for card pattern analysis, showing the count of cards and the prevalence of specific border styles and padding.

```text
Found 12 cards: Border 1px solid (10/12), Padding 16px (9/12)
```

--------------------------------

### Audit Results Example

Source: https://github.com/dammyjay93/interface-design/blob/main/_autodocs/commands.md

An example output format for the audit command, detailing violations found in code files and suggesting fixes based on the design system.

```text
Audit Results: src/components/

Violations:
  Button.tsx:12 - Height 38px (pattern: 36px)
  Card.tsx:8 - Shadow used (system: borders-only)
  Input.tsx:20 - Spacing 14px (grid: 4px, nearest: 12px or 16px)

Suggestions:
  - Update Button height to match pattern
  - Replace shadow with border
  - Adjust spacing to grid
```

--------------------------------

### Initialize UI Design Session

Source: https://github.com/dammyjay93/interface-design/blob/main/_autodocs/commands.md

Starts a new interface design workflow by establishing design direction through intent-based questions. It can load existing patterns or explore new ones, and optionally save decisions to a system file.

```bash
/interface-design:init
```

--------------------------------

### Critique UI for Quality and Consistency

Source: https://github.com/dammyjay93/interface-design/blob/main/_autodocs/getting-started.md

Get a quality critique of your built UI, analyzing composition, craft, content, and structure to identify areas for improvement.

```bash
/interface-design:critique

```

--------------------------------

### Upgrade from Old Skill

Source: https://github.com/dammyjay93/interface-design/blob/main/_autodocs/getting-started.md

Instructions for upgrading from a previous skill named 'claude-design-skill'. This involves removing the old skill directory and then installing the new plugin via the marketplace.

```bash
# Remove old skill
rm -rf ~/.claude/skills/design-principles

# Install new plugin via marketplace
/plugin marketplace add Dammyjay93/interface-design
/plugin menu
```

--------------------------------

### Color Palette Example for Utility & Function

Source: https://github.com/dammyjay93/interface-design/blob/main/_autodocs/design-directions.md

Defines CSS variables for a neutral color foundation with a standard blue accent, suitable for functional and developer-oriented interfaces.

```css
--foreground: gray-900
--secondary: gray-600
--muted: gray-400
--faint: gray-200
--border: rgba(0, 0, 0, 0.06)
--accent: blue-500
```

--------------------------------

### Subtle Elevation Example in Dark Mode

Source: https://github.com/dammyjay93/interface-design/blob/main/_autodocs/principles.md

Illustrates the subtle differences in lightness for elevation levels in dark mode. The small percentage differences are designed to be felt rather than explicitly seen in isolation, creating a quiet hierarchy when surfaces stack.

```text
Example in dark mode:
- Base: rgb(20, 20, 20)
- Surface-1: 7% lighter
- Surface-2: 9% lighter
- Surface-3: 12% lighter
```

--------------------------------

### Color Palette Example for Data & Analysis

Source: https://github.com/dammyjay93/interface-design/blob/main/_autodocs/design-directions.md

Provides CSS variables for a data-centric design, featuring a neutral background with semantic colors for trends and distinct chart accents.

```css
--foreground: gray-900
--secondary: gray-700
--muted: gray-500
--faint: gray-300
--border: rgba(0, 0, 0, 0.08)
--semantic-positive: green-600 (growth, up)
--semantic-negative: red-600 (decline, down)
--semantic-neutral: gray-500 (flat, equal)
--chart-primary: blue-600
--chart-secondary: purple-600
--chart-accent: orange-600
```

--------------------------------

### Color Palette Example (Sophistication & Trust)

Source: https://github.com/dammyjay93/interface-design/blob/main/_autodocs/design-directions.md

Defines CSS variables for a cool, desaturated color palette suitable for finance and enterprise applications. Use these variables to establish a premium and trustworthy aesthetic.

```css
--foreground: slate-900
--secondary: slate-700
--muted: slate-500
--faint: slate-300
--border: rgba(15, 23, 42, 0.08)
--accent: indigo-600
--surface-0: white (base)
--surface-1: slate-50 (elevated +1)
--surface-2: slate-100 (elevated +2)
--semantic-success: emerald-600
--semantic-warning: amber-600
--semantic-error: red-600
```

--------------------------------

### Color Palette Example (Boldness & Clarity)

Source: https://github.com/dammyjay93/interface-design/blob/main/_autodocs/design-directions.md

Defines CSS variables for a high-contrast color palette with saturated, energetic accents. Ideal for modern data dashboards and creative tools where clarity and impact are key.

```css
--foreground: gray-900
--secondary: gray-700
--muted: gray-500
--faint: gray-300
--border: rgba(0, 0, 0, 0.1)
--accent-primary: magenta-600
--accent-secondary: cyan-500
--accent-tertiary: lime-500
--semantic-success: green-600
--semantic-warning: orange-600
--semantic-error: red-600
```

--------------------------------

### No Design System Audit Message

Source: https://github.com/dammyjay93/interface-design/blob/main/_autodocs/commands.md

Example message displayed when the audit command is run without an existing design system, guiding the user on how to create one.

```text
No design system to audit against.

Create a system first:
1. Build UI → establish system automatically
2. Run /interface-design:extract → create system from existing code
```

--------------------------------

### Add to Existing Project Workflow

Source: https://github.com/dammyjay93/interface-design/blob/main/_autodocs/quick-reference.md

Steps to build additional UI matching an existing system. System is automatically loaded.

```bash
1. Run: /interface-design:init
2. System loads: system.md automatically detected
3. Build: New UI with loaded patterns
4. Confirm: Save new patterns? (additive to existing)
```

--------------------------------

### New Project Workflow

Source: https://github.com/dammyjay93/interface-design/blob/main/_autodocs/quick-reference.md

Steps to build UI with a new design system. Requires answering three intent questions.

```bash
1. Run: /interface-design:init
2. Answer: Three intent questions (specific, not generic)
3. Provide: Confirmation that direction feels right
4. Done: UI built, patterns saved to .interface-design/system.md
```

--------------------------------

### New Project with Direction Workflow

Source: https://github.com/dammyjay93/interface-design/blob/main/_autodocs/README.md

Steps to initiate a new project with a defined design direction using the interface-design plugin.

```bash
1. Install plugin (getting-started.md)
2. Read principles (principles.md)
3. Run /interface-design:init
4. Answer intent questions
5. Review domain exploration
6. Approve direction (design-directions.md reference)
7. Build UI
8. Save system.md
```

--------------------------------

### Extract System from Code Workflow

Source: https://github.com/dammyjay93/interface-design/blob/main/_autodocs/quick-reference.md

Steps to create a system.md file from existing UI code. Review and customize extracted patterns.

```bash
1. Run: /interface-design:extract
2. Review: Extracted pattern proposals
3. Customize: Adjust if needed
4. Confirm: Create .interface-design/system.md
```

--------------------------------

### Project Directory Structure

Source: https://github.com/dammyjay93/interface-design/blob/main/_autodocs/configuration.md

Illustrates a typical project directory structure including the .interface-design directory for the system.md file, alongside standard source code directories.

```text
project-root/
├── .interface-design/
│   └── system.md              # Design system (created by user)
├── src/
│   ├── components/
│   ├── pages/
│   └── styles/
└── ...
```

--------------------------------

### Command Defaults: Init

Source: https://github.com/dammyjay93/interface-design/blob/main/_autodocs/configuration.md

The default behavior for the `/interface-design:init` command when no system.md file exists. It prompts the user for intent and suggests a direction for building a new system.

```bash
/interface-design:init — Asks user for intent, suggests direction, builds with new system
```

--------------------------------

### Add to Existing Project Workflow

Source: https://github.com/dammyjay93/interface-design/blob/main/_autodocs/README.md

Steps for integrating the interface-design plugin into an existing project to add new UI elements.

```bash
1. Run /interface-design:init
2. System loads automatically (types.md for format)
3. Build new UI with loaded patterns
4. Save new patterns
```

--------------------------------

### System File Creation Confirmation

Source: https://github.com/dammyjay93/interface-design/blob/main/_autodocs/configuration.md

The prompt shown to the user after the first UI build when using the `/interface-design:init` command, asking for confirmation to save the generated patterns into a system file.

```text
Want me to save these patterns?
```

--------------------------------

### Review Extracted Design System Suggestions

Source: https://github.com/dammyjay93/interface-design/blob/main/_autodocs/getting-started.md

View the plugin's proposed design system based on extracted patterns, including spacing scales and component definitions.

```bash
Extracted patterns:

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

Patterns:
  Button: 36px h, 12px 16px pad, 6px radius
  Card: 1px border, 16px pad

Create .interface-design/system.md with these?

```

--------------------------------

### Command Definitions Directory Structure

Source: https://github.com/dammyjay93/interface-design/blob/main/_autodocs/configuration.md

Shows the directory structure for command definitions, listing the .md files that correspond to specific plugin commands like init, status, audit, extract, and critique.

```text
.claude/commands/
├── init.md       # /interface-design:init
├── status.md     # /interface-design:status
├── audit.md      # /interface-design:audit
├── extract.md    # /interface-design:extract
└── critique.md   # /interface-design:critique
```

--------------------------------

### Extract from Existing Code Workflow

Source: https://github.com/dammyjay93/interface-design/blob/main/_autodocs/README.md

Steps to extract UI patterns from existing code into a system.md file using the interface-design plugin.

```bash
1. Run /interface-design:extract
2. Review proposals (commands.md)
3. Customize if needed (types.md)
4. Save system.md
```

--------------------------------

### Plugin File Organization

Source: https://github.com/dammyjay93/interface-design/blob/main/_autodocs/README.md

Illustrates the directory structure for the interface-design plugin and its associated files.

```tree
.interface-design/
└── system.md                  Design system (created by plugin)

.claude/
├── commands/
│   ├── init.md
│   ├── status.md
│   ├── audit.md
│   ├── extract.md
│   └── critique.md
└── skills/interface-design/
    ├── SKILL.md
    └── references/
        ├── principles.md
        ├── validation.md
        ├── example.md
        └── critique.md

.claude-plugin/
├── plugin.json
└── marketplace.json
```

--------------------------------

### Interface Design Flow: No System File

Source: https://github.com/dammyjay93/interface-design/blob/main/README.md

If no system.md exists, Interface Design assesses context, suggests direction, states choices, builds consistently, and offers to save the system.

```text
1. Reads skill files and principles
2. Assesses project context
3. Suggests direction, asks for confirmation
4. States design choices before each component
5. Builds with consistent principles
6. Offers to save system
```

--------------------------------

### Interface Design Flow: System Exists

Source: https://github.com/dammyjay93/interface-design/blob/main/README.md

When a system.md file exists, Interface Design reads skill files, loads the system, applies patterns, states choices, and offers to save new patterns.

```text
✓ Reads skill files and principles
✓ Loads .interface-design/system.md
✓ Applies established patterns
✓ States design choices before each component
✓ Offers to save new patterns
```

--------------------------------

### Extract Patterns to System

Source: https://github.com/dammyjay93/interface-design/blob/main/_autodocs/getting-started.md

Use this command to update your system.md file based on the current UI code. This is useful when code represents a better approach than the existing system.

```bash
/interface-design:extract
```

--------------------------------

### Interface Design Plugin Commands

Source: https://github.com/dammyjay93/interface-design/blob/main/_autodocs/quick-reference.md

List of available commands for the interface-design plugin.

```bash
/interface-design:init       Initialize UI design with intent first approach
/interface-design:status     Show current design system state
/interface-design:audit      Check code against design system
/interface-design:extract    Extract patterns from existing code
/interface-design:critique   Critique build for craft and rebuild defaulted sections
```

--------------------------------

### Command File Format

Source: https://github.com/dammyjay93/interface-design/blob/main/_autodocs/configuration.md

Defines the frontmatter format for command definition files, specifying the 'name' and 'description' fields required for each command.

```markdown
---
name: interface-design:<command-name>
description: <command description>
---


```

--------------------------------

### Extract Patterns from Existing Codebase

Source: https://github.com/dammyjay93/interface-design/blob/main/_autodocs/getting-started.md

Scan existing UI files to extract common design patterns such as spacing, border radius, and component styles.

```bash
/interface-design:extract

```

--------------------------------

### Validation Rules for System.md

Source: https://github.com/dammyjay93/interface-design/blob/main/_autodocs/types.md

Lists the validation rules to be applied when a system.md file is loaded.

```markdown
## Validation Rules

When a system.md file is loaded:

1. **Spacing:** All spacing values in code must be multiples of the defined base unit
2. **Radius:** All border-radius values should use values from the defined scale
3. **Colors:** All colors should reference variables defined in the Colors section
4. **Depth:** If `borders-only` is specified, box-shadow should not be used (except for focus rings: `0 0 0 1px`)
5. **Patterns:** Components should follow pattern specifications or document variations
```

--------------------------------

### Interface Design CLI Commands

Source: https://github.com/dammyjay93/interface-design/blob/main/README.md

Lists the available command-line interface commands for managing the Interface Design system, including initialization, status check, auditing, and pattern extraction.

```bash
/interface-design:init           # Start building with design principles
/interface-design:status         # Show current system
/interface-design:audit <path>   # Check code against system
/interface-design:extract        # Extract patterns from existing code
```

--------------------------------

### Save Design System Patterns

Source: https://github.com/dammyjay93/interface-design/blob/main/_autodocs/getting-started.md

Save your design system patterns to a local file. This file acts as the memory for your design system and is version-controlled.

```bash
/interface-design:init

```

--------------------------------

### Critique and Refine Workflow

Source: https://github.com/dammyjay93/interface-design/blob/main/_autodocs/quick-reference.md

Steps to improve the craft quality of completed UI. The system analyzes and rebuilds defaulted sections silently.

```bash
1. Run: /interface-design:critique
2. System: Analyzes and rebuilds defaulted sections (silently)
3. Done: Shows refined result
```

--------------------------------

### System File Location

Source: https://github.com/dammyjay93/interface-design/blob/main/_autodocs/configuration.md

Specifies the location and properties of the design system file, which is stored in Markdown format relative to the project root. This file is created by specific plugin commands.

```text
.interface-design/system.md
```

--------------------------------

### Intent Question Template

Source: https://github.com/dammyjay93/interface-design/blob/main/_autodocs/quick-reference.md

Use this template to define the 'who, what, and how it feels' for a design. Be specific about context, actions, and desired qualities.

```markdown
Who is this human?
[Specific context, state, history — not "users"]

What must they accomplish?
[Verb, not noun — Grade, Find, Approve, Analyze]

What should this feel like?
[Specific quality — Warm like notebook, Cold like terminal, Dense like trading floor]
```

--------------------------------

### Audit Code Against Design System

Source: https://github.com/dammyjay93/interface-design/blob/main/_autodocs/getting-started.md

Run this command to identify any discrepancies between your current code and the defined design system. It helps maintain consistency.

```bash
/interface-design:audit
```

--------------------------------

### Ask for Clarification on Intent

Source: https://github.com/dammyjay93/interface-design/blob/main/_autodocs/getting-started.md

When unsure about user intent, ask clarifying questions instead of guessing. This ensures the design system aligns with user needs.

```bash
"I need more context about who uses this."
"Is this for power users working fast, or casual users learning the system?"

```

--------------------------------

### Component Checkpoint Template

Source: https://github.com/dammyjay93/interface-design/blob/main/_autodocs/quick-reference.md

A template for evaluating component design against key criteria. Ensure alignment with intent, palette, depth, surfaces, typography, and spacing.

```markdown
Intent: [who, what they need, how it feels]
Palette: [foundation + accent — WHY fits product world]
Depth: [borders / shadows / layered — WHY]
Surfaces: [elevation scale — WHY this temperature]
Typography: [typeface — WHY fits intent]
Spacing: [base unit]

```

--------------------------------

### Marketplace Metadata (marketplace.json)

Source: https://github.com/dammyjay93/interface-design/blob/main/_autodocs/configuration.md

Contains metadata for publishing the interface-design plugin to a marketplace. It includes schema information, a general description, owner details, and specific plugin details for listing.

```json
{
  "$schema": "https://anthropic.com/claude-code/marketplace.schema.json",
  "name": "interface-design",
  "metadata": {
    "description": "Design engineering for Claude Code. Build interfaces with craft, memory, and enforcement."
  },
  "owner": {
    "name": "Damola Akinleye",
    "url": "https://github.com/Dammyjay93"
  },
  "plugins": [
    {
      "name": "interface-design",
      "description": "Design engineering for Claude Code. Build interfaces with craft, memory, and enforcement. Maintains consistent design decisions across sessions.",
      "version": "2026.2.9.1212",
      "author": { ... },
      "source": "./",
      "category": "design",
      "homepage": "https://github.com/Dammyjay93/interface-design",
      "tags": ["design", "design-system", "ui", "craft", "memory", "enforcement", "consistency", "tokens"]
    }
  ]
}
```

--------------------------------

### Audit Existing Code Workflow

Source: https://github.com/dammyjay93/interface-design/blob/main/_autodocs/quick-reference.md

Steps to check code against an established design system. Review violations and suggestions.

```bash
1. Run: /interface-design:audit <path>
2. Review: Violations and suggestions
3. Fix: Update code to match system
```

--------------------------------

### Audit and Improve Workflow

Source: https://github.com/dammyjay93/interface-design/blob/main/_autodocs/README.md

Steps to audit existing code for violations and improve the system.md file using the interface-design plugin.

```bash
1. Run /interface-design:audit src/
2. Review violations (commands.md)
3. Run /interface-design:critique
4. Update system.md as needed
```

--------------------------------

### Root System File Structure

Source: https://github.com/dammyjay93/interface-design/blob/main/_autodocs/types.md

Defines the overall markdown structure for the design system file, including sections for direction, tokens, patterns, and decisions.

```markdown
# Design System

## Direction
[Direction section content]

## Tokens
[Tokens section content]

## Patterns
[Patterns section content]

## Decisions
[Decisions table]
```

--------------------------------

### Spacing Base Units Reference

Source: https://github.com/dammyjay93/interface-design/blob/main/_autodocs/quick-reference.md

Reference for spacing base units and their recommended scales.

```markdown
| Base | Best For | Scale |
|------|----------|-------|
| 4px | Density, compact UIs | 4, 8, 12, 16, 24, 32 |
| 8px | Breathing room | 8, 16, 24, 32, 40, 48 |
```

--------------------------------

### Command Defaults: Extract

Source: https://github.com/dammyjay93/interface-design/blob/main/_autodocs/configuration.md

The default behavior for the `/interface-design:extract` command when no system.md file exists. It extracts patterns from code and proposes a system.md file.

```bash
/interface-design:extract — Extracts patterns from code, proposes system.md
```

--------------------------------

### Extract Command Output Prompt

Source: https://github.com/dammyjay93/interface-design/blob/main/_autodocs/commands.md

This is the prompt displayed after the extract command analyzes patterns, asking the user to confirm the creation of system.md.

```text
Extracted patterns:

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

Depth: Borders-only (34 borders, 2 shadows)

Patterns:
  Button: 36px h, 12px 16px pad, 6px radius
  Card: 1px border, 16px pad

Create .interface-design/system.md with these? (y/n/customize)
```

--------------------------------

### Display Design System Status

Source: https://github.com/dammyjay93/interface-design/blob/main/_autodocs/commands.md

Shows the current state of the design system, including direction, tokens, patterns, and metadata. If no system exists, it provides guidance on how to create one.

```bash
/interface-design:status
```