**interface-design**

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:**

1. Craft — Principle-based design that produces professional, polished interfaces
2. Memory — Save decisions to .interface-design/system.md, load automatically
3. 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](https://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)

...