This skill is for interface design — dashboards, admin panels, apps, tools, and interactive products. NOT for marketing design (landing pages, marketing sites, campaigns).
Add this skill
npx mdskills install Dammyjay93/interface-designDeep craft-focused methodology with strong anti-default principles and systematic consistency checks
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
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:
.interface-design/system.md, load automaticallyMake choices once. Apply them consistently.
Without interface-design:
With interface-design:
See the difference: interface-design.dev/examples.html
# 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:
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.
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
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
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.
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.
/interface-design:init # Start building with design principles
/interface-design:status # Show current system
/interface-design:audit # Check code against system
/interface-design:extract # Extract patterns from existing code
The skill infers direction from project context, but you can customize:
| Direction | Feel | Best For |
|---|---|---|
| Precision & Density | Tight, technical, monochrome | Developer tools, admin dashboards |
| Warmth & Approachability | Generous spacing, soft shadows | Collaborative tools, consumer apps |
| Sophistication & Trust | Cool tones, layered depth | Finance, enterprise B2B |
| Boldness & Clarity | High contrast, dramatic space | Modern dashboards, data-heavy apps |
| Utility & Function | Muted, functional density | GitHub-style tools |
| Data & Analysis | Chart-optimized, numbers-first | Analytics, BI tools |
See live examples at interface-design.dev/examples.html
For system file templates, see reference/examples/:
This repo was renamed from claude-design-skill.
All old URLs redirect automatically.
If you installed the old skill:
# Uninstall old
rm -rf ~/.claude/skills/design-principles
# Install new plugin
/plugin marketplace add Dammyjay93/interface-design
/plugin menu
Your system.md files (if any) continue to work — just rename .ds-engineer/ to .interface-design/.
Decisions compound. A spacing value chosen once becomes a pattern. A depth strategy becomes an identity.
Consistency beats perfection. A coherent system with "imperfect" values beats a scattered interface with "correct" ones.
Memory enables iteration. When you can see what you decided and why, you can evolve intentionally instead of drifting accidentally.
MIT — See LICENSE
Install via CLI
npx mdskills install Dammyjay93/interface-designInterface Design is a free, open-source AI agent skill. This skill is for interface design — dashboards, admin panels, apps, tools, and interactive products. NOT for marketing design (landing pages, marketing sites, campaigns).
Install Interface Design with a single command:
npx mdskills install Dammyjay93/interface-designThis downloads the skill files into your project and your AI agent picks them up automatically.
Interface Design works with Claude Code, Claude Desktop, Cursor, Windsurf, Codex. Skills use the open SKILL.md format which is compatible with any AI coding agent that reads markdown instructions.