| name | interface-design |
| description | Skill for interface design (dashboards, admin panels, SaaS apps, tools) focusing on craft and consistency. Use when building product interfaces, internal tools, or complex UI systems that require intentional design decisions about hierarchy, layout, and component behavior. |
| metadata | {"author":"Dammyjay93"} |
Interface Design
Expert interface design for dashboards, admin panels, SaaS applications, and productivity tools — focused on craft and consistency.
Core Philosophy: Intent-First Design
The problem with most AI-generated UI is defaults. Default padding, default colors, default spacing. Everything feels assembled, not designed.
Intent-first design means: every spacing value, color choice, and typographic decision is made deliberately, with a reason. If you can't articulate why an element looks the way it does, it needs to change.
"If you can't explain why something looks the way it does, it shouldn't look that way."
Product Domain Exploration
Before designing anything, understand the product:
- Who uses this? Job title, technical sophistication, frequency of use
- What's their primary task? The one thing they do most
- What's their mental model? What existing tools do they compare this to?
- What do they fear? Data loss, mistakes, slowness, confusion?
- What do they celebrate? Task completion, insight discovery, efficiency
Answers shape every design decision. A data-dense analytics tool for analysts looks different from a simple task manager for non-technical users.
Craft Foundations
Spacing System
Establish a base unit (4px or 8px) and use only multiples:
4px — micro (icon gaps, tight inline spacing)
8px — xs (form field internal padding)
12px — sm (compact card padding)
16px — md (standard component padding)
24px — lg (section internal spacing)
32px — xl (component separation)
48px — 2xl (section separation)
64px — 3xl (major section breaks)
Never use arbitrary values. padding: 13px is a design mistake.
Color Architecture
Structure: Primary palette + Semantic palette
Neutral: 50/100/200/300/400/500/600/700/800/900/950
Accent: 50/100/200/300/400/500/600/700/800/900
Success: green scale
Warning: yellow/amber scale
Error: red scale
Info: blue scale
For SaaS/tools: neutral-heavy palette with single saturated accent. 90% of the UI should use neutrals.
Typography Scale
xs: 12px / 16px line height — labels, metadata, captions
sm: 14px / 20px line height — body text in dense UIs
base: 16px / 24px line height — standard body
lg: 18px / 28px line height — sub-headings
xl: 20px / 28px line height — section headings
2xl: 24px / 32px line height — page titles
3xl: 30px / 36px line height — hero headings
Component Hierarchy
Every component has a role in the visual hierarchy:
- Primary: one per screen max — the main action
- Secondary: supporting actions (2–4 per screen)
- Tertiary: utility, navigation, low-priority actions
- Destructive: irreversible actions — visually distinct
Never have two primary buttons competing for attention.
Design Principles
1. Density is a Feature
Not all interfaces should be comfortable and spacious. Analytics dashboards, admin panels, and data tools often need information density. Design for the task, not the aesthetic.
Comfortable (consumer): padding: 24px, single column, generous whitespace
Compact (professional tools): padding: 12px, multiple columns, efficient use of space
2. States Complete the Design
An interface is not designed until all states are designed:
- Default
- Hover
- Active / Pressed
- Focus (keyboard)
- Disabled
- Loading
- Empty
- Error
- Success
Missing states are bugs, not "things to add later."
3. Consistency Over Cleverness
Use established patterns from the product ecosystem. Deviating from conventions has a cost — users must learn your system instead of transferring knowledge from elsewhere.
When to be conventional: navigation, forms, data tables, modals
When to differentiate: brand expression, onboarding, empty states, error messages
4. Accessibility is Architecture
Design for accessibility from the start — retrofitting is expensive:
- Color contrast: 4.5:1 for body, 3:1 for large text (WCAG AA)
- Keyboard navigation: every interactive element reachable and usable
- Focus indicators: always visible, never
outline: none
- Touch targets: minimum 44×44px
5. Motion Serves Clarity
Animation should communicate state changes, not decorate:
- Element entering/exiting: fade + slight translate (150–200ms)
- State change: color transition (100–150ms)
- Complex interactions: 200–300ms maximum
Never animate more than 2 properties simultaneously on the same element.
Workflow
- Understand — learn the domain, users, and task
- Wireframe — grayscale structure, no color decisions yet
- Establish system — spacing scale, color palette, type scale
- Component design — build components to the system
- State design — all states for every component
- Review — audit for consistency, accessibility, missing states
Post-Completion
After designing any interface:
