Interface Design

Define the high-level visual identity of the interface by selecting values for Personality, Foundation, and Depth. These settings guide the overall aesthetic and structural approach of the design system.

### Direction

**Personality:** [Precision & Density | Warmth & Approachability | Sophistication & Trust | Boldness & Clarity | Utility & Function | Data & Analysis]

**Foundation:** [warm | cool | neutral | tinted]

**Depth:** [borders-only | subtle-shadows | layered-shadows]

You can invoke the interface-design skill using slash commands or natural language prompts.

Slash Commands

• /interface-design

Natural Language Prompts

• use interface-design to build this dashboard
• use interface-design design-review on the settings page
• use interface-design design-deslop on this branch

Claude Code Specific Review Commands

If installed via the plugin flow, you can use these focused review passes:

• /interface-design:design-review: A strict review of craft and hierarchy against professional design standards.
• /interface-design:design-deslop: A fast pass that identifies and cleans up 'visual slop' (generic tokens, defaulted fonts, etc.) in a branch.

If npx is unavailable, you can manually clone the repository and copy the skill folders to your agent's directory.

1. Clone the repo:

   git clone https://github.com/Dammyjay93/interface-design.git
   cd interface-design

2. Copy to Claude Code directory:

   mkdir -p ~/.claude/skills
   cp -R .claude/skills/interface-design ~/.claude/skills/

3. Copy to Codex/Shared directory:

   mkdir -p ~/.agents/skills
   cp -R .claude/skills/interface-design ~/.agents/skills/

Restart your agent after manual installation.

git clone https://github.com/Dammyjay93/interface-design.git
cd interface-design

# Claude Code
mkdir -p ~/.claude/skills
cp -R .claude/skills/interface-design ~/.claude/skills/

# Codex / shared agent-skills location
mkdir -p ~/.agents/skills
cp -R .claude/skills/interface-design ~/.agents/skills/

To install the skill for Codex, use the following command. The skills CLI installs Codex skills to ~/.agents/skills/interface-design.

npx skills add https://github.com/dammyjay93/interface-design --skill interface-design --agent codex -g

Restart Codex or start a fresh thread if the skill does not appear immediately.

To install the core skill for Claude Code, use the following command. This places the skill in ~/.claude/skills/interface-design.

npx skills add https://github.com/dammyjay93/interface-design --skill interface-design --agent claude-code -g

Alternatively, you can use the Claude Code plugin marketplace flow:

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

After selecting interface-design from the menu, restart Claude Code.

Establish the foundational design tokens for Spacing, Colors, Radius, and Typography. These tokens ensure consistency across the interface components.

### Tokens

### Spacing
Base: [4px | 8px]
Scale: [4, 8, 12, 16, 24, 32, 64]

### Colors
```css
--foreground: [slate-900]
--secondary: [slate-600]
--muted: [slate-400]
--faint: [slate-200]
--accent: [blue-600]

Radius

Scale: [4px, 6px, 8px] (sharp) | [8px, 12px, 16px] (soft)

Typography

Font: [system | Inter | Geist] Scale: 12, 13, 14 (base), 16, 18, 24, 32 Weights: 400, 500, 600

If you are using the older claude-design-skill (now renamed to interface-design), follow these steps to migrate:

1. Uninstall the old skill:

   rm -rf ~/.claude/skills/design-principles

2. Install the current skill:

   npx skills add https://github.com/dammyjay93/interface-design --skill interface-design --agent claude-code -g

3. Update directory names: If you have an existing .ds-engineer/ directory, rename it to .interface-design/ to ensure your system.md files continue to work.

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

# Install the current skill
npx skills add https://github.com/dammyjay93/interface-design --skill interface-design --agent claude-code -g

The interface-design skill uses a file located at .interface-design/system.md to maintain design memory across sessions. This file stores your established direction, tokens, and patterns.

File Structure Example

# 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
--accent: blue-600

## Patterns
### Button Primary
- Height: 36px
- Padding: 12px 16px
- Radius: 6px
- Usage: Primary actions

### Card Default
- Border: 0.5px solid
- Padding: 16px
- Radius: 8px

When the skill runs, it automatically reads this file to ensure all new UI components follow the saved patterns.

Use the following specifications to build standard UI components like Primary Buttons and Default Cards.

### Patterns

### Button Primary
- Height: 36px
- Padding: 12px 16px
- Radius: 6px
- Font: 14px, 500 weight
- Background: accent color
- Usage: Primary actions

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

While the skill infers direction from project context, you can explicitly request or guide the agent toward specific design feels: