Design
Document components thoroughly for your design system
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
Get structured feedback on any 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.
Document design system components
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
Design complete user flows with edge cases
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.
Write clear, user-friendly UI copy
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