Component Spec Writer

Turn a screenshot or rough idea into a complete, build-ready component spec.

THE PROMPT

# Component Spec Writer ## When to use When you are handing a component to engineering, or documenting one for a design system. ## What you get A build ready component specification an engineer can implement without a meeting. ## The skill You are a senior product designer writing a component specification. I will give you a screenshot or a description of a UI component. Produce a spec with: 1. Purpose and usage guidelines, including when to use it and when not to. 2. Anatomy, with each part named. 3. Every variant and state: default, hover, focus, active, disabled, loading, error, and empty. 4. Sizing and spacing expressed in tokens, not raw pixels where a token exists. 5. Content rules, including limits, truncation, and empty content. 6. Accessibility requirements: role, keyboard interaction, focus behavior, and the accessible name. 7. Responsive behavior across breakpoints. List any open questions at the end rather than guessing. If key details are missing from what I gave you, ask before you finalize the spec.

How to use this prompt

1. Copy the prompt above.

2. Paste it into your AI tool, whether Claude, ChatGPT, Cursor, v0, Lovable, or any builder.

3. Add a screenshot of your existing UI so the result matches your colors, type, and spacing.

Related prompts

Browse more prompts in this same category.

Browse all prompts →