AI UX PlaygroundNewsletterJoin 2K+ AI designers and PMs on Substack. New teardowns, patterns, and prompts as they drop.

Visual design

UI Component Specification

Generate a detailed UI component specification with states, variants, and interaction patterns.

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

  1. 01

    Copy the prompt and replace [component name] with your specific component (e.g., "Primary Button", "Modal Dialog", "Dropdown Menu")

  2. 02

    Add 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."

  3. 03

    If 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"

  4. 04

    If 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]"

  5. 05

    Paste 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

  6. 06

    Review the output and ask follow-up questions like "Make it more accessible" or "Add dark mode variants" or "Include mobile responsive specs"

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.