interface-design
Design engineering for Claude Code. Craft, memory, and enforcement for consistent UI.
Interface Design is an agent skill for Claude Code and Codex that brings systematic UI design consistency to AI-assisted coding. It helps coding agents craft professional interfaces with principle-based visual hierarchy, remember design decisions across sessions via a persistent system.md file, and maintain consistent spacing, depth, and surface patterns throughout a project. The skill is built for application interfaces like dashboards, admin panels, and tools—not marketing sites—and can generate visual direction boards when image-generation tools are available.
Key Features
Use Cases
- 01Building developer tools and admin dashboards with consistent technical aesthetics
- 02Creating collaborative SaaS applications with warm, approachable design systems
- 03Designing finance or enterprise B2B interfaces with sophisticated, trustworthy visual language
- 04Maintaining design consistency across multi-session projects without manual style guides
- 05Auditing existing UI for visual hierarchy, typography, and state treatment issues
- 06Cleaning up generic tokens, defaulted fonts, and missing states from AI-generated interfaces
Related Skills
View moresuperpowers
An agentic skills framework & software development methodology that works.
skills
Skills for Real Engineers. Straight from my .agents directory.
skills
Public repository for Agent Skills
ponytail
Makes your AI agent think like the laziest senior dev in the room. The best code is the code you never wrote.
interface-design — FAQ
What is the Interface Design skill?+
Interface Design is an agent skill for Claude Code and Codex that enforces systematic UI design consistency. It helps coding agents remember design decisions across sessions, apply principle-based visual hierarchy, and maintain consistent spacing, depth, and color patterns throughout application interfaces.
How do I install Interface Design for Claude Code?+
Run 'npx skills add https://github.com/dammyjay93/interface-design --skill interface-design --agent claude-code -g' to install globally. Alternatively, use '/plugin marketplace add Dammyjay93/interface-design' followed by '/plugin menu' inside Claude Code, then restart.
Which AI coding agents support this skill?+
Interface Design officially supports Claude Code and Codex, with installation through the skills.sh CLI. Both agents support slash commands (/interface-design) and auto-invocation when UI design work is detected.
Does Interface Design require API keys or external services?+
No API keys are required for core functionality. Visual direction features (direction boards, paintovers) work when an image-generation tool is available to the agent, but the skill operates independently otherwise.
Is Interface Design free to use?+
Yes, Interface Design is open source under the MIT license and free to use for any project.
How does the design memory system work?+
When you establish design patterns (spacing scale, colors, depth strategy), the skill saves them to .interface-design/system.md in your project. On subsequent sessions, the skill automatically loads this file and applies your saved decisions, preventing design drift across sessions.
How do I install interface-design?+
Open the source repository on GitHub and follow its README. interface-design is a skill — MCP Agents Market links you directly to the official repo.
Is interface-design free?+
interface-design is an open-source project hosted on GitHub. Check the repository for its license and any usage requirements.