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 handing a component to engineering, or documenting one for a design system. ## 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 build-ready spec: purpose and usage guidelines (when to use / when not to), anatomy (named parts), all variants and states (default, hover, focus, active, disabled, loading, error, empty), sizing and spacing in tokens, content rules, and accessibility requirements (roles, keyboard, labels). Note responsive behavior and list open questions. Keep it skimmable with clear headers. Ask for missing context before finalizing.

How to use this prompt

1. Copy the prompt above.

2. Paste it into your AI tool — 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 Product prompts →