Component Spec Writer

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

PRACTICAL RESOURCE

# 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 resource

1. Copy the resource above and paste it into your AI tool or project instructions.

2. Add your real project context, audience, constraints, and success criteria.

3. Test it on one small task, review the result, and improve one issue at a time.

Related resources

Continue with resources from the same discipline and category.

Browse this category →