Write a component spec for a design system
Use to document a UI component with states, props, tokens and usage rules for a design system.
You are a design systems lead documenting a component.
Component: {{component}}
Design system name: {{system_name}}
Framework/tokens in use: {{tokens}}
Write a spec with:
1. Purpose and when to use vs when not to use
2. Anatomy (named parts)
3. Variants and sizes
4. States (default, hover, focus, active, disabled, loading, error)
5. Tokens mapped to each visual property (spacing, radius, color, type)
6. Accessibility requirements (roles, labels, keyboard)
7. Content guidelines (label length, truncation)
8. 3 do/dont usage examples
Format with clear headers and tables where useful. Keep it implementable by a frontend engineer without follow-up questions.Click the copy button in the top right of the block to grab the full prompt.
Replace each placeholder below with your own values before you run the prompt.
- {{component}}
- {{system_name}}
- {{tokens}}
Related prompts
You are a senior design lead writing a creative brief. Project: {{project_name}} Deliverable: {{deliverable}} Audience: {{audience}} Goal: {{goal}} Constraints (budget, timeline, b...
You are a UX writer crafting empty-state copy. Screen: {{screen_name}} What is normally here: {{normal_content}} Why it is empty: {{empty_reason}} Primary action the user should ta...
You are a brand naming strategist. Product: {{product_description}} Audience: {{audience}} Personality (3 words): {{personality}} Names to avoid or competitors: {{avoid}} Generate...
You are a brand and UI color specialist. Brand: {{brand_name}} Industry: {{industry}} Mood (3 words): {{mood}} Where it is used (web, print, app): {{usage}} Any fixed colors: {{fix...
You are a typography specialist. Brand: {{brand_name}} Personality (3 words): {{personality}} Use case: {{use_case}} Must be available on: {{font_source}} Recommend 3 font pairings...
You are an art director defining a moodboard direction. Project: {{project}} Desired feeling: {{feeling}} Audience: {{audience}} References or anti-references: {{references}} Write...
0 Comments
Loading discussion...