Design
Aesthetic direction, design systems, component/UI/UX, and information architecture. Every output declares a conceptual direction and executes it with named tokens — never vague suggestions.
Workflow
Applies §10.1 KISS (fewest moving parts; no decorative complexity) and §10.7 Clean Code (specific named tokens, not vague advice).
- Load
handlers/aesthetics.md (design-thinking framework) and handlers/design-system.md (priority-ranked UX rules). If unavailable, apply steps 2-5 directly.
- Frame the request:
- Purpose — what problem, which user?
- Tone — pick ONE extreme with character (minimalist, maximalist, organic, luxury, playful, editorial, brutalist).
- Constraints — framework, performance budget, accessibility level.
- Differentiation — what makes it UNFORGETTABLE?
- Apply UX guidelines by priority — gate P1-P2, treat P3-P9 as considerations, P10 for data-viz only:
| Priority |
Category |
Gate |
| 1 |
Accessibility |
CRITICAL -- never skip |
| 2 |
Touch & Interaction |
CRITICAL -- never skip |
| 3 |
Performance |
HIGH |
| 4 |
Style Selection |
HIGH |
| 5 |
Layout & Responsive |
HIGH |
| 6 |
Typography & Color |
MEDIUM |
| 7 |
Animation |
MEDIUM |
| 8 |
Forms & Feedback |
MEDIUM |
| 9 |
Navigation Patterns |
HIGH |
| 10 |
Charts & Data |
LOW |
- Produce specific choices, not guidance:
- Named fonts (display + body pairing).
- Color system (primary, secondary, accent, surface, background, text hierarchy, state colors).
- Spacing scale (4pt/8dp).
- Spatial composition + layout strategy.
- Motion approach (duration, easing, what animates).
- Conceptual direction in one sentence.
- Design light + dark themes together, never dark mode as an afterthought.
- Delegate: motion beyond micro-interactions ->
/ai-animation; posters/banners/illustration -> /ai-visual; decks -> /ai-slides.
- Run
handlers/checklist.md pre-delivery; do not ship with unchecked items.
Common Mistakes
- Generic AI aesthetics (purple gradients, Inter font, centered hero, 3-column features).
- Vague advice ("use a clean design") instead of specific tokens.
- Accessibility not treated as a hard gate (contrast, touch targets, keyboard nav).
Integration
Called by: user, /ai-slides, /ai-media, /ai-build. Calls: handlers/aesthetics.md, handlers/design-system.md, handlers/checklist.md, /ai-animation, /ai-visual. Consumed by: /ai-slides (presentation aesthetics), /ai-media (visual asset direction).
Examples
/ai-design empty state for search results page
Picks an opinionated direction, then specifies layout, micro-copy, illustration-vs-icon, accessibility checks, and light + dark simultaneously; runs handlers/checklist.md before handoff.
$ARGUMENTS
1---2name: ai-design-23description: Designs user interfaces and design systems: aesthetic direction, color palettes, typography, spatial composition, information architecture for web, mobile, CLI, and docs-heavy experiences. Trigger for 'design this page', 'create a design system', 'color palette for', 'typography for', 'UI for this feature'. 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.4---56# Design78Aesthetic direction, design systems, component/UI/UX, and information architecture. Every output declares a conceptual direction and executes it with named tokens — never vague suggestions.910## Workflow1112Applies §10.1 KISS (fewest moving parts; no decorative complexity) and §10.7 Clean Code (specific named tokens, not vague advice).13141. Load `handlers/aesthetics.md` (design-thinking framework) and `handlers/design-system.md` (priority-ranked UX rules). If unavailable, apply steps 2-5 directly.152. Frame the request:16 - **Purpose** — what problem, which user?17 - **Tone** — pick ONE extreme with character (minimalist, maximalist, organic, luxury, playful, editorial, brutalist).18 - **Constraints** — framework, performance budget, accessibility level.19 - **Differentiation** — what makes it UNFORGETTABLE?203. Apply UX guidelines by priority — gate P1-P2, treat P3-P9 as considerations, P10 for data-viz only:2122| Priority | Category | Gate |23| -------- | ------------------- | ---------------------- |24| 1 | Accessibility | CRITICAL -- never skip |25| 2 | Touch & Interaction | CRITICAL -- never skip |26| 3 | Performance | HIGH |27| 4 | Style Selection | HIGH |28| 5 | Layout & Responsive | HIGH |29| 6 | Typography & Color | MEDIUM |30| 7 | Animation | MEDIUM |31| 8 | Forms & Feedback | MEDIUM |32| 9 | Navigation Patterns | HIGH |33| 10 | Charts & Data | LOW |34354. Produce specific choices, not guidance:36 - Named fonts (display + body pairing).37 - Color system (primary, secondary, accent, surface, background, text hierarchy, state colors).38 - Spacing scale (4pt/8dp).39 - Spatial composition + layout strategy.40 - Motion approach (duration, easing, what animates).41 - Conceptual direction in one sentence.425. Design light + dark themes together, never dark mode as an afterthought.436. Delegate: motion beyond micro-interactions -> `/ai-animation`; posters/banners/illustration -> `/ai-visual`; decks -> `/ai-slides`.447. Run `handlers/checklist.md` pre-delivery; do not ship with unchecked items.4546## Common Mistakes4748- Generic AI aesthetics (purple gradients, Inter font, centered hero, 3-column features).49- Vague advice ("use a clean design") instead of specific tokens.50- Accessibility not treated as a hard gate (contrast, touch targets, keyboard nav).5152## Integration5354Called by: user, `/ai-slides`, `/ai-media`, `/ai-build`. Calls: `handlers/aesthetics.md`, `handlers/design-system.md`, `handlers/checklist.md`, `/ai-animation`, `/ai-visual`. Consumed by: `/ai-slides` (presentation aesthetics), `/ai-media` (visual asset direction).5556## Examples5758```59/ai-design empty state for search results page60```6162Picks an opinionated direction, then specifies layout, micro-copy, illustration-vs-icon, accessibility checks, and light + dark simultaneously; runs `handlers/checklist.md` before handoff.6364$ARGUMENTS
arcasilesgroup