Design

Design

Umbrella skill for design workflows: UX copy, design systems, critique, accessibility review, developer handoff, and user research synthesis. Each mode loads its own reference files on demand.

Mode Detection

Classify into one mode before proceeding.

If the request spans modes, pick the primary mode and note the secondary.

Workflow by Mode

UX-COPY Mode

Load: references/ux-copy.md, references/llm-design-failure-modes.md

1. Gather context — Ask conversationally:

   • Component type (button, error, empty state, tooltip, confirmation, notification, onboarding)
   • User state and emotional context (frustrated, exploring, completing a task)
   • Brand voice (formal, friendly, playful, reassuring)
   • Constraints (character limits, platform guidelines, localization needs)
   • Existing copy patterns (what terminology the product already uses)

2. Generate copy using component-specific patterns from reference:

   • Primary recommendation with rationale
   • 2-3 alternatives with tone/context guidance
   • Localization notes (character expansion, idiom risks, cultural context)

3. Validate — Check against these gates:

   • Copy uses product's existing terminology consistently
   • Action labels match outcomes (button says what it does)
   • Error messages follow What happened + Why + How to fix
   • Character limits respected for target platform
   • No jargon without explanation

Gate: Copy exists for all requested components. Each piece has rationale tied to user context. Alternatives provided with differentiated use cases.

DESIGN-SYSTEM Mode

Load: references/design-systems.md, references/llm-design-failure-modes.md

1. Determine operation:

2. Execute using design token architecture from reference:

   • Tokens: color (brand, semantic, neutral), typography (scale, weights, line heights), spacing (scale, component padding), borders (radius, width), shadows (elevation), motion (duration, easing)
   • Components: variants, states (default, hover, active, disabled, loading, error), sizes, accessibility, composition patterns
   • Patterns: form patterns, navigation patterns, data display, feedback

3. Validate:

Gate: Output uses consistent naming. All values reference tokens. Interactive states complete. Accessibility documented.

CRITIQUE Mode

Load: references/design-critique.md, references/llm-design-failure-modes.md

1. Gather context:

   • Design stage (exploration, refinement, final polish)
   • Target users and their goals
   • Focus area (optional — "just the navigation" vs full review)
   • Platform (web desktop, web mobile, native iOS, native Android)

2. Apply structured critique — Four-step method:

   • Describe: What is present? Elements, layout, visual relationships. No judgment yet.
   • Analyze: How are design principles applied? Hierarchy, contrast, alignment, proximity, repetition.
   • Interpret: What does the design communicate? Emotional tone, brand alignment, user expectations.
   • Evaluate: What works, what could improve, and specific recommendations.

3. Evaluate against heuristics — Apply Nielsen's 10 to the specific design:

4. Match feedback to stage:

Gate: Critique covers usability, visual hierarchy, consistency, and accessibility. Feedback is specific (element + issue + recommendation). Positive observations included. Stage-appropriate depth.

ACCESSIBILITY Mode

Load: references/accessibility-review.md, references/llm-design-failure-modes.md

1. Determine scope: Full WCAG 2.1 AA audit vs targeted check (contrast, keyboard, screen reader).

2. Audit by WCAG principle:

3. Check component-specific patterns from reference (buttons, forms, modals, navigation, data tables, carousels).

4. Generate audit report with:

   • Issue count by severity (Critical, Major, Minor)
   • Each finding: WCAG criterion, location, issue, severity, remediation
   • Color contrast check table (foreground, background, ratio, required, pass/fail)
   • Keyboard navigation map
   • Screen reader announcement check
   • Priority fixes ranked by user impact

Gate: Audit covers all four WCAG principles. Each finding cites a specific WCAG criterion. Remediation provided for every issue. Severity reflects real user impact.

HANDOFF Mode

Load: references/design-handoff.md, references/llm-design-failure-modes.md

1. Gather inputs:

   • Design (Figma URL, screenshot, description)
   • Tech stack (framework, CSS approach, component library)
   • Design system tokens (if available)
   • Target breakpoints

2. Generate spec covering all artifact categories:

3. Validate completeness:
   • Every interactive element has all states specified
   • Token references used (not raw values)
   • Edge cases documented (empty, loading, error, overflow, missing data)
   • Responsive behavior explicit at each breakpoint
   • Accessibility requirements stated

Gate: Spec covers all categories in the table. Uses token references. All states documented. Edge cases present. A developer can build from this spec without guessing.

RESEARCH Mode

Load: references/llm-design-failure-modes.md

1. Accept inputs — Interview transcripts, survey data, usability test notes, support tickets, app reviews, NPS responses.

2. Process each source:

   • Extract observations (what happened), verbatim quotes, behaviors (vs stated preferences), pain points, positive signals, context
   • Behavioral data outweighs stated preferences. What users do > what users say.

3. Synthesize:

   • Affinity mapping: one observation per note, let clusters emerge, split large clusters
   • Theme development: initial codes -> theme candidates -> review against evidence -> refined themes
   • Triangulation: findings supported by multiple sources are stronger. Flag single-source findings.

4. Priority matrix:

5. Generate synthesis:
   • Executive summary (3-4 sentences)
   • Key themes: name, prevalence (X of Y participants), summary, supporting evidence with quotes, implication
   • Insights-to-opportunities table: insight, opportunity, impact, effort
   • User segments identified: name, characteristics, needs, rough size
   • Prioritized recommendations with evidence basis
   • Questions for further research
   • Methodology notes and limitations

Gate: Themes supported by evidence with quotes. Behaviors distinguished from stated preferences. Quote attribution uses participant type ("Enterprise admin, 200-person team"), not names. Recommendations tied to specific findings.

LLM Failure Modes in Design Work

Load references/llm-design-failure-modes.md for all modes. These are specific ways LLMs fail at design tasks:

Output Conventions

• Markdown with clear headers. Scannable by busy designers and developers.
• Tables for comparisons, audit findings, component specs, token mappings.
• Severity labels: Critical (blocks users), Major (degrades experience), Minor (polish).
• Every recommendation is specific enough to act on. "Improve contrast" is not actionable. "Change body text from #999 to #595959 on #fff background to meet 4.5:1 ratio" is.
• Include what works well alongside what needs improvement.

Reference Loading Table