Claude Code Plugin

interface-design

Claude forgets your design decisions between conversations. This plugin remembers them and applies them consistently.

★ Star on GitHub - View Examples

Installation

$ /plugin marketplace add Dammyjay93/interface-design

Then run /plugin menu to install. Restart Claude Code after.

What it does

Saves your design decisions to .interface-design/system.md
Loads that file automatically every conversation
States design choices before writing each component
Builds with craft principles throughout
Produces professional, polished interfaces

How it works

1. Suggests a direction

Scans your project files
Infers product type (dashboard, marketing, collaborative tool)
Suggests appropriate direction (tight spacing vs generous, borders vs shadows)
Asks one question to confirm

2. Saves decisions

Button heights, padding, border radius
Spacing grid (4px, 8px, 12px, 16px...)
Color palette
Depth strategy (borders vs shadows)
Component patterns (exact measurements)

3. Maintains consistency

States choices before each component
Applies depth strategy throughout
Keeps spacing on grid
Offers to save new patterns
Memory compounds over time

Example checkpoint

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

The flow

If system.md exists

Loads your decisions automatically
Applies established patterns
Offers to save new patterns

If no system.md

Assesses project context
Suggests direction, asks to confirm
Builds with craft principles

Every component

States depth, surfaces, borders, spacing
Applies principles consistently
Maintains quality throughout

Design directions

Precision & Density

Tight spacing, borders, monochrome
Developer tools, admin dashboards

Warmth & Approachability

Generous spacing, soft shadows, rounded corners
Collaborative tools, consumer apps

Sophistication & Trust

Cool tones, layered shadows, refined
Finance, enterprise, legal

Boldness & Clarity

High contrast, dramatic spacing, strong accents
Marketing sites, modern dashboards

Utility & Function

Muted palette, minimal decoration
Developer tools, documentation

Data & Analysis

Chart-optimized colors, numbers-first
Analytics, BI tools

Commands

/interface-design:init

Start building with design principles

/interface-design:status

View your current system

/interface-design:audit <path>

Check existing code against system

/interface-design:extract

Pull patterns from existing code