ai-designlisted

Designs user interfaces and design systems for web, mobile, CLI, and documentation-heavy experiences: aesthetic direction, color palettes, typography, spatial composition, information architecture. Trigger for 'design this page', 'create a design system', 'what style should we use', 'UI for this feature', 'color palette for', 'typography for'. Not for animation; use /ai-animation instead. Not for static visual art (posters, banners); use /ai-visual instead. Not for slide decks; use /ai-slides instead.
arcasilesgroup/ai-engineering · ★ 49 · Web & Frontend · score 84

Install: claude install-skill arcasilesgroup/ai-engineering

# Design ## Purpose Master design skill. Aesthetic direction + design systems + component design + UI/UX and information-architecture guidance. Translates user intent into specific, opinionated design decisions -- never vague suggestions. Every output has a clear conceptual direction executed with precision. ## When to Use - Designing interfaces (web or mobile) - Creating or extending a design system - Choosing aesthetic direction for a project - Structuring text-heavy or CLI-facing information architecture when hierarchy, framing, and flow are design problems - Component design and layout decisions - Responsive design strategy - Typography and color palette selection - Spatial composition and visual hierarchy ## Process ### Step 1 -- Load Design Thinking Framework Read `handlers/aesthetics.md` for the full aesthetic direction philosophy. This establishes the design thinking framework (Purpose, Tone, Constraints, Differentiation) and all frontend aesthetics guidelines. ### Step 2 -- Load UX Rules and Design System Intelligence Read `handlers/design-system.md` for the priority-ranked UX rule database, covering accessibility, touch targets, performance, style selection, layout, typography, animation, forms, navigation, and data visualization. ### Step 3 -- Analyze the Request Apply the design thinking framework from `handlers/aesthetics.md` (or directly if the handler is unavailable): 1. **Purpose** -- what problem does this interface solve? Who uses it? 2. **Tone**