interface-design
Design user interfaces. Use when creating layouts, wireframes, or UI specifications. Covers design principles and UI patterns.
When & Why to Use This Skill
This Claude skill is a comprehensive resource for Interface Design, enabling users to create high-quality user interfaces, wireframes, and UI specifications. It integrates core design principles—such as clarity, consistency, and efficiency—with practical UI patterns for navigation, forms, and feedback. Designed for both creative planning and technical execution, it includes guidance on responsive grid systems and detailed handoff specifications, ensuring that designs are not only visually appealing but also functional and developer-ready.
Use Cases
- Wireframing and Layout Design: Create structured blueprints for web and mobile applications that prioritize visual hierarchy and user flow.
- Establishing Design Systems: Develop a library of consistent UI patterns and principles to maintain a professional and unified interface across platforms.
- Responsive Web Optimization: Utilize mobile-first principles and CSS grid systems to ensure interfaces adapt seamlessly to various screen resolutions.
- Streamlining Developer Handoff: Produce precise design specifications, including typography, color hex codes, and interactive states, to reduce friction during the build phase.
| name | interface-design |
|---|---|
| description | Design user interfaces. Use when creating layouts, wireframes, or UI specifications. Covers design principles and UI patterns. |
| allowed-tools | Read, Write, Glob, Grep |
Interface Design
Design Principles
1. Clarity
Make the interface obvious. Users shouldn't have to guess.
2. Consistency
Same actions, same results. Maintain patterns throughout.
3. Feedback
Respond to every action. Show progress, confirm success, explain errors.
4. Efficiency
Minimize steps. Optimize common workflows.
5. Forgiveness
Allow undo. Confirm destructive actions. Recover gracefully.
UI Patterns
Navigation
- Top Nav: Primary navigation, global actions
- Side Nav: Section navigation, hierarchical content
- Breadcrumbs: Show location in hierarchy
- Tabs: Switch between related views
Forms
- Label above input
- Clear validation messages
- Inline validation where helpful
- Logical field grouping
- Clear call-to-action
Feedback
- Loading states
- Success confirmations
- Error messages
- Empty states
- Progress indicators
Actions
- Primary action prominent
- Secondary actions subtle
- Destructive actions require confirmation
- Disabled states clear
Layout Principles
Visual Hierarchy
- Size indicates importance
- Color draws attention
- Spacing groups elements
- Alignment creates order
Grid System
.container {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1rem;
}
Responsive Design
- Mobile-first approach
- Breakpoints: 640px, 768px, 1024px, 1280px
- Fluid typography
- Flexible images
Design Specification
When handing off to development:
- Color values (hex/RGB)
- Typography (font, size, weight, line-height)
- Spacing (margins, padding)
- Component states (default, hover, active, disabled)
- Responsive behavior
- Animations/transitions