By name: interface-design description: Design and critique user interfaces (web/mobile) using a calm, cozy-premium “Design Soul” aesthetic (warm parchment neutrals, muted mint/teal accents, soft rounded surfaces, subtle depth, and generous whitespace). Use for UX/UI direction, screen layouts, information architecture, component + state specs, design tokens (CSS/Tailwind), interaction/motion guidance, accessibility review, and implementation handoff notes.
Interface Design (Design Soul)
Default workflow
- Clarify the job: user, context, platform, constraints, content/data, success metric, existing patterns.
- Define structure: one primary action per view, sections, navigation, empty/error states.
- Compose the screen: spacing-first grouping, low-contrast separation, warm surfaces, quiet chrome.
- Specify components + states: buttons/inputs/cards/tables; include hover/pressed/focus/disabled/loading/error.
- Set tokens: start from
scripts/generate_tokens.pyand map to any existing tokens. - Run an a11y + usability pass: contrast, focus visibility, keyboard flow, target sizes, color-not-alone.
- Handoff: provide CSS/Tailwind/React guidance and call out reusable components/tokens.
Output format (one screen)
Deliver in this order unless the user asks otherwise:
- Summary: primary user goal + primary action.
- Layout & hierarchy: regions/sections, nav, grouping, empty/error.
- Components: list specs + states.
- Tokens: concrete values or mapping (colors/type/space/radius/shadow).
- Interaction & motion: what animates + durations/easing.
- Accessibility: checks + any risks.
Project memory (optional)
If the user wants persistence across iterations, offer to create/update:
.interface-design/system.mdwith approved tokens, component patterns, and “do / don’t”.
References
- Full design language:
references/design-soul-guidelines.md - Critique rubric:
references/critique-checklist.md - Starter tokens:
references/tokens-starter.mdandscripts/generate_tokens.py - Workflow + handoff details:
references/interface-design-workflow.md