Design
design systemcomponent librarydocumentationUIfrontendDesign System Documentation Writer
Complete design system component documentation with anatomy, variants, usage rules, and code snippets for designers and engineers.
Best For
- •A design systems lead documents a new Button or Modal component so engineers stop pinging the design team with the same usage questions.
- •A frontend engineer building a component library writes the props table and accessibility notes alongside the actual code implementation.
- •A design ops team standardizing a Figma library uses this to produce the written half of a component's documentation page in one pass.
Prompt Template
Write the documentation for the [COMPONENT_NAME] component in the [DESIGN_SYSTEM_NAME] design system. The component is used for: [COMPONENT_PURPOSE]. Structure the documentation page as: (1) Overview, 2–3 sentences describing what the component is and when to use it, (2) Anatomy, list and describe each sub-element of the component (e.g., label, icon, container) in a bulleted list, (3) Variants, document each variant: [VARIANTS_LIST] with a description of when each is appropriate, (4) States, document each interactive state: [STATES, e.g., default, hover, active, disabled, loading, error] with a one-sentence description, (5) Usage guidelines, 3–4 "Do" and 3–4 "Don't" rules with specific examples, (6) Accessibility notes, keyboard behavior, ARIA roles/attributes required, and screen reader behavior, (7) Code snippet, a sample implementation in [FRAMEWORK, e.g., React, Vue] with props table showing: Prop Name, Type, Default, Required, Description. Write for an audience of product designers and frontend engineers.
Pro Tip
Paste your actual variant and state names into VARIANTS_LIST and STATES rather than letting the model invent generic ones, since mismatched naming is the top cause of design-dev drift.
Example Output
A sample of what this prompt produces once you fill in the placeholders.
Overview: The Badge component communicates status at a glance and should never contain more than two words. Variants: Default, Success, Warning, Error. States: default, hover (badges are non-interactive by default, skip hover unless clickable). Do: pair badges with a text label for screen readers. Don't: use color alone to convey status.
How to use this prompt
- Copy the prompt template using the button above.
- Paste it into your preferred AI assistant (ChatGPT, Claude, Gemini, etc.).
- Replace all bracketed placeholders like
[TOPIC]with your specific details. - Send the prompt and refine the output as needed.