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:
- Craft — Principle-based design that produces professional, polished interfaces
- Visual direction — In Codex, use native image generation for direction boards, UI references, and critique paintovers when useful
- Memory — Save decisions to
.interface-design/system.md, then reload them when the skill runs
- 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
- Codex can explore direction boards and paintovers with image generation
- 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:
npx skills add https://github.com/dammyjay93/interface-design --skill interface-design
The CLI detects supported agents and installs the skill in the right place. Useful variants:
# Install globally for the current detected agent
npx skills add https://github.com/dammyjay93/interface-design --skill interface-design -g
# Install for a specific agent
npx skills add https://github.com/dammyjay93/interface-design --skill interface-design --agent claude-code -g
npx skills add https://github.com/dammyjay93/interface-design --skill interface-design --agent codex -g
# Install for all supported agents
npx skills add https://github.com/dammyjay93/interface-design --skill interface-design --agent '*' -g -y
# Preview available skills without installing
npx skills add https://github.com/dammyjay93/interface-design --skill interface-design --list
Review installed skills before use. Skills run with the same permissions as your coding agent.
Agent Notes
Claude Code
Recommended install:
npx skills add https://github.com/dammyjay93/interface-design --skill interface-design --agent claude-code -g
This installs the core skill to ~/.claude/skills/interface-design. Claude Code can auto-invoke it when relevant, and you can invoke it directly as /interface-design.
Claude Code plugin install is still supported if you prefer Claude Code's marketplace/plugin flow:
/plugin marketplace add Dammyjay93/interface-design
/plugin menu
Select interface-design from the menu, then restart Claude Code.
Codex
Recommended install:
npx skills add https://github.com/dammyjay93/interface-design --skill interface-design --agent codex -g
The skills CLI installs Codex skills to ~/.agents/skills/interface-design, which Codex scans. Restart Codex, or start a fresh Codex thread, if the skill does not appear immediately.
Use the Codex slash command when available, invoke the skill explicitly in prompts, or let Codex invoke it when the request is clearly product UI work:
/interface-design/interface-design audit src/componentsuse interface-design critique on the dashboard
Other Skill-Compatible Agents
Use the same CLI with an agent target:
npx skills add https://github.com/dammyjay93/interface-design --skill interface-design --agent <agent-name> -g
Compatibility Matrix
| Agent | Install | Skill support | Slash commands | Notes |
|---|
| Claude Code | npx skills add ... --agent claude-code -g | Yes | /interface-design | Plugin marketplace remains supported |
| Codex | npx skills add ... --agent codex -g | Yes | /interface-design | Slash command and natural language both work |
| All supported agents | npx skills add ... --agent '*' -g -y | Depends on agent | Depends on agent | Good for multi-agent setups |
Manual Fallback
