Component Spec Generator

Generate a full component specification from just a component name, including props, variants, states, tokens, and accessibility requirements.

All Prompts

When to Use

  • Kickstarting a new component from scratch
  • Aligning design and engineering before build starts
  • Generating a spec document for handoff or review
  • Filling gaps in existing component documentation

The Prompt

Generate a complete component specification for a [COMPONENT NAME] component in a design system.

Include:

1. **Overview** — What the component does, when to use it, when NOT to use it.
2. **Anatomy** — List every visual element (label, icon, container, divider, etc.)
3. **Props / API** — Table with: prop name, type, default, required, description.
4. **Variants** — All visual variants (e.g., primary, secondary, ghost) with use cases.
5. **States** — All interactive states (default, hover, active, focus, disabled, loading, error).
6. **Design Tokens** — List tokens the component consumes (background, text, border, spacing, radius, shadow).
7. **Responsive Behavior** — How the component adapts across breakpoints.
8. **Accessibility** — ARIA roles, keyboard navigation, focus management, screen reader announcements.
9. **Content Guidelines** — Character limits, tone, placeholder text rules.
10. **Do's and Don'ts** — 3 of each.

Use a table format for props and tokens. Use bullet lists for everything else.

Example Output

# Component Spec: Tag

## Overview
A Tag is a compact label used to categorize, filter, or indicate status.
Use for: metadata labels, filter chips, status indicators.
Do NOT use for: primary actions (use Button), navigation (use Link).

## Anatomy
- Container
- Label text
- Optional leading icon
- Optional dismiss button (X)

## Props
| Prop        | Type                              | Default   | Required | Description              |
|-------------|-----------------------------------|-----------|----------|--------------------------|
| label       | string                            | —         | yes      | Text content             |
| variant     | "neutral" | "info" | "success" | "warning" | "danger" | "neutral" | no | Visual style  |
| size        | "sm" | "md"                       | "md"      | no       | Tag size                 |
| removable   | boolean                           | false     | no       | Show dismiss button      |
| icon        | ReactNode                         | —         | no       | Leading icon             |
| onRemove    | () => void                        | —         | no       | Dismiss callback         |

## States
- Default, Hover (slight background shift), Active (pressed), Focus (2px ring), Disabled (40% opacity, no interaction)

## Design Tokens
| Token                    | Role           |
|--------------------------|----------------|
| tag-bg-neutral           | Background     |
| tag-text-neutral         | Label color    |
| tag-border-radius        | Corner radius  |
| tag-padding-x            | Horizontal pad |
| tag-padding-y            | Vertical pad   |
| tag-icon-size            | Icon dimension |

## Accessibility
- Role: status (for status tags), or generic inline text
- Dismiss button: aria-label="Remove [label]"
- Keyboard: Tab to focus, Enter/Backspace to remove