Interface Design
Craft · Memory · Consistency
Build interfaces with intention. Remember decisions across sessions. Maintain systematic consistency.
For interface design — dashboards, apps, tools, admin panels. Not for marketing sites.
Install ·
How It Works ·
Examples ·
Website
What This Does
When you build UI with Claude, design decisions get made: spacing values, colors, depth strategy, surface elevation. Without structure, those decisions drift across sessions.
Interface Design helps you:
- Craft — Principle-based design that produces professional, polished interfaces
- Memory — Save decisions to
.interface-design/system.md, load automatically
- Consistency — Every component follows the same principles throughout the session
Make choices once. Apply them consistently.
Before & After
Without interface-design:
- Every session starts from scratch
- Button heights drift (36px, 38px, 40px...)
- Random spacing values (14px, 17px, 22px...)
- No consistency across components
With interface-design:
- System loads automatically each session
- Patterns reused (Button: 36px, Card: 16px pad)
- Spacing on grid (4px, 8px, 12px, 16px)
- Consistent depth and surface treatment throughout
See the difference: interface-design.dev/examples.html
Installation
Plugin (Recommended)
# Add the marketplace
/plugin marketplace add Dammyjay93/interface-design
# Install the plugin
/plugin menu
Select interface-design from the menu. Restart Claude Code after.
Gets you:
- Principle-based craft for every UI component
- Automatic system.md loading every session
- Per-component design checkpoint
- Commands (/interface-design status, audit, extract)
Manual (Advanced)
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.
How It Works
The Flow
When you build UI with interface-design:
If system.md exists:
✓ Reads skill files and principles
✓ Loads .interface-design/system.md
✓ Applies established patterns
✓ States design choices before each component
✓ Offers to save new patterns
If no system.md:
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
Example: First Session
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
Example: Second Session
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?
The system remembers across sessions.
System File
After establishing direction, your decisions live in .interface-design/system.md:
# 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
This file loads automatically at session start. Claude sees it and maintains consistency.
Commands
/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
Design Directions
The skill infers direction from project context, but you can customize:
