UI Component Specification
Generate a detailed UI component specification with states, variants, and interaction patterns.
Actions
Tags
Prompt
Create a comprehensive UI component specification for [component name]. Include:
1. Component Overview
- Purpose and use cases
- When to use vs. when not to use
- Accessibility requirements
2. Visual Design
- Dimensions and spacing
- Color variants (default, hover, active, disabled)
- Typography specifications
- Iconography requirements
3. States and Variants
- Default state
- Interactive states (hover, focus, active)
- Error states
- Loading states
- Disabled states
4. Interaction Patterns
- User interactions
- Animation and transitions
- Responsive behavior
5. Technical Specifications
- Props/parameters
- Events/callbacks
- Dependencies
Format the output as a structured document ready for handoff to developers.How to use
- 1Copy the prompt and replace [component name] with your specific component (e.g., "Primary Button", "Modal Dialog", "Dropdown Menu")
- 2Add context BEFORE the prompt: Describe your design system, brand guidelines, or existing component library. Example: "We use Material Design with custom colors. Our primary color is #007AFF and we use SF Pro font."
- 3If you have visual references: Upload screenshots of similar components from your existing UI, Figma designs, or competitor examples. Say "Here are examples of similar components in our current app"
- 4If you have code: Paste your existing component code or component library structure. Say "Here's our current Button component structure - create a spec for a similar [new component]"
- 5Paste the modified prompt into your preferred AI tool, like Cursor or Claude Code if you want it to reference your codebase, or ChatGPT or Claude for general spec generation
- 6Review the output and ask follow-up questions like "Make it more accessible" or "Add dark mode variants" or "Include mobile responsive specs"
Pro Tips
- • If your AI tool supports image uploads: Upload screenshots of your Figma designs or existing components for better context
- • For design systems: Include your design tokens (colors, spacing, typography) in the prompt for consistent output
- • For code-connected AIs (Cursor, Claude Code, GitHub Copilot): Open your component library files first so it has context about your existing patterns
- • Break complex components into multiple prompts: First create the base spec, then ask "Now add advanced features like keyboard navigation"
- • Save the generated spec as a template and refine it for future similar components
- • For per-state token tables, anatomy, and accessibility tables, use Design System Component Visual Spec Writer.
Related Patterns
Related Prompts
Brand Consistency Checklist
Create a brand governance review checklist for all teams and channels — covering visual identity, verbal identity, and overall brand fit with a pass/flag/fail scoring system.
Visual Identity System Spec
Turn an approved logo direction into a production-ready full visual identity spec — logo system, color palette, typography, imagery style, and graphic elements.
Product Line Naming System
Build a systematic naming architecture for your product portfolio — choosing the right model (branded house, house of brands, etc.) and defining scalable naming conventions.
Brand Launch Checklist
Generate a complete brand launch or rebrand rollout checklist — every asset, every team, every channel — sequenced from pre-launch through go-live and post-launch.