Visual design·
Share
UI Component Specification
Generate a detailed UI component specification with states, variants, and interaction patterns.
Use Case
Creating detailed component specs for design systems, design handoffs, or documentation.
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.
Tags
uicomponentsspecificationdesign-systemhandoff
Related Patterns
Related Prompts
Branding
Logo System Spec Writer
Turn a chosen logo direction into production-ready logo system specs: lockups, spacing, sizing, color, and usage rules.
logo-designbrand-guidelinesdesign-system
Visual design
Visual Hierarchy Design
Design effective visual hierarchy for layouts to guide user attention and improve readability.
visual-hierarchygraphic-designlayout
Visual design
Design System Component Visual Spec Writer
Developer-friendly visual specs: anatomy, tokenized properties per variant/state, spacing, responsive behavior, and accessibility for one component cluster.
visual-designdesign-systemcomponents
Visual design
Color Palette & Typography System Builder
Production-oriented foundations: primitive scales, semantic tokens, contrast tables, dark mode mapping, modular type scale, and token naming for tools like Style Dictionary.
visual-designdesign-systemcolor