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

Visual design

Design System Component Creation

Create new design system components with variants, states, documentation, and usage guidelines.

Prompt

Create a design system component specification for [component name].

Component Context:
- Component purpose: [describe]
- Use cases: [list]
- Design system: [name/link]

Provide:

1. Component Overview
   - Component name and purpose
   - When to use vs. when not to use
   - Design principles it follows
   - Accessibility requirements

2. Visual Design
   - Dimensions and spacing
   - Color usage (tokens)
   - Typography (tokens)
   - Iconography requirements
   - Border radius, shadows, effects

3. Variants
   - Size variants (if applicable)
   - Style variants (primary, secondary, etc.)
   - State variants (default, hover, active, disabled)
   - Context variants (if applicable)

4. States
   - Default state
   - Hover state
   - Focus state
   - Active/pressed state
   - Disabled state
   - Loading state
   - Error state

5. Composition
   - Required elements
   - Optional elements
   - Slot/placeholder areas
   - Nested components

6. Interaction Patterns
   - User interactions
   - Animation and transitions
   - Responsive behavior
   - Keyboard navigation

7. Design Tokens
   - Color tokens used
   - Spacing tokens used
   - Typography tokens used
   - Border radius tokens
   - Shadow tokens

8. Usage Guidelines
   - Best practices
   - Common mistakes to avoid
   - Do's and don'ts
   - Examples of good usage

9. Technical Specifications
   - Props/parameters
   - Events/callbacks
   - Dependencies
   - Framework considerations

10. Documentation Requirements
    - Storybook examples
    - Code examples
    - Design examples
    - Accessibility notes

Format as a complete component specification ready for design system integration.

How to use

  1. 01

    Replace [component name], [describe], [list], and [name/link] with your specific details

  2. 02

    Add context before the prompt: Describe the component and design system. Example: "Component: Button. Purpose: Primary action trigger. Use cases: Submit forms, navigate. Design system: Material Design 3."

  3. 03

    If you have existing design system: Paste design system tokens or links. Say "Design system: [paste tokens or link]"

  4. 04

    If you have component references: Paste examples of similar components. Say "Similar to: [paste examples]"

  5. 05

    Paste the modified prompt into your preferred AI tool, like ChatGPT or Claude

  6. 06

    Review the component specification: Check visual design, variants, states, interaction patterns, and design tokens

  7. 07

    Ask for specifics: Request "Expand accessibility requirements" or "Add more variants" or "Detail animation transitions"

  8. 08

    Export to your design system: Copy the specification to Figma, Storybook, or your design system documentation

  9. 09

    Share with team: Use the specification to build the component and document it in your design system

Tips

  • Include design system tokens: Paste your design token structure so AI uses correct tokens (colors, spacing, typography)
  • Specify variants: Mention variants you need (e.g., "Size variants: small, medium, large") so AI includes them
  • For existing components: Paste existing component specs and ask "Update this component spec: [paste spec]"
  • Request usage examples: Ask "Add 5 usage examples" to show how the component should be used
  • Save as template: Reuse the component specification structure for future design system components