Design

Provide a structured critique of this design:

**Design:** [describe or attach screenshot]
**Type:** [UI screen/landing page/app flow/logo]
**Context:** [product, target users, goals]
**Specific Concerns:** [optional - what you're unsure about]

Analyze across these dimensions:

1. **Usability**
   - Is the hierarchy clear?
   - Can users accomplish their goals?
   - Cognitive load assessment

2. **Visual Design**
   - Typography choices
   - Color usage and contrast
   - Spacing and alignment
   - Consistency

3. **Accessibility**
   - Color contrast ratios
   - Touch target sizes
   - Screen reader considerations

4. **Emotional Impact**
   - Does it evoke the right feeling?
   - Brand alignment

5. **Actionable Improvements**
   - Priority 1 fixes (critical)
   - Priority 2 fixes (important)
   - Nice-to-haves

Be specific with suggestions, not just problems.

Write a complete specification for this design system component:

**Component:** [e.g., Button, Modal, Toast, Card]
**Platform:** [Web/iOS/Android/All]
**Design System:** [existing system name if any]

Document:

**1. Overview**
- Purpose and when to use
- When NOT to use (alternatives)

**2. Anatomy**
- Parts of the component (diagram description)
- Required vs optional elements

**3. Variants**
- All types (primary, secondary, destructive, etc.)
- Use cases for each

**4. States**
- Default, hover, focus, active, disabled, loading
- Error states if applicable

**5. Sizing**
- Size options with dimensions
- Responsive behavior

**6. Spacing**
- Internal padding
- External margins
- Minimum touch targets

**7. Content Guidelines**
- Character limits
- Tone and voice
- Do's and Don'ts

**8. Accessibility**
- ARIA attributes
- Keyboard navigation
- Screen reader behavior

**9. Code Example**
- Basic implementation

You are a design systems expert. Create component specifications for:

Component: [BUTTON/CARD/MODAL/FORM/etc.]
Design System: [NAME OR CONTEXT]
Platform: [WEB/iOS/ANDROID]

Document:
1. Component Overview: Purpose and when to use
2. Variants: All variations (size, style, state)
3. Properties/Props: Name, type, default, description
4. States: Default, hover, active, disabled, loading, error
5. Spacing & Sizing: Specific measurements
6. Accessibility: ARIA labels, keyboard navigation

Map out the  trying to accomplish]
**User Type:** [persona or user segment]
**Platform:** [web/mobile/both]
**Starting Point:** [where the user begins]
**Success State:** [definition of done]

Document the flow:

**1. Happy Path**
- Step-by-step screens/states
- User actions at each step
- System responses

**2. Alternative Paths**
- Different ways to complete the task
- Shortcuts for power users

**3. Error States**
- What can go wrong at each step
- Error messages and recovery

**4. Edge Cases**
- Empty states
- Boundary conditions
- Permission issues

**5. Entry Points**
- All ways users can start this flow

**6. Exit Points**
- Where users might drop off
- How to bring them back

Format as a numbered list that could be turned into a flowchart.

You are a UX writer creating microcopy. Write UI copy for:

Product: [APP/WEBSITE NAME]
Screen/Feature: [WHAT PART OF THE UI]
User Context: [WHAT IS THE USER TRYING TO DO]
Brand Voice: [FRIENDLY/PROFESSIONAL/PLAYFUL/MINIMAL]

Generate copy for:
1. Headlines/Titles: Clear, action-oriented
2. Button Labels: Verb-first, specific
3. Empty States: Helpful, not depressing
4. Error Messages: Human, solution-focused
5. Success Messages: Celebratory but brief
6. Tooltips/Help Text: Contextual guidance