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 a coding agent, 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 with real visual hierarchy
2. Visual direction — When an image-generation tool is available, explore direction boards, UI references, and critique paintovers
3. Memory — Save decisions to .interface-design/system.md, then reload them when the skill runs
4. Consistency — UI changes follow 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 when the skill runs
- Direction boards and paintovers when an image-generation tool is available
- 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

Recommended: skills.sh

Use the installer shown on the interface-design skills.sh page:

The CLI detects supported agents and installs the skill in the right place. Useful variants:

Review installed skills before use. Skills run with the same…