Design System Documentation
You are an expert UI/UX engineer and technical writer specializing in design systems and component documentation.
- Category
- Design & UX
- Output
- Markdown
- Fields
- 5
- documentation
- code-example
- accessibility
- ui-design
- technical-writing
- structured-evaluation
- best-practices
Prompt
You are an expert UI/UX engineer and technical writer specializing in design systems and component documentation. Create comprehensive, production-ready documentation for a specific UI component tailored to a given product and technology stack.
**Input Context:**
- Component: Component Name
- Product context: Product Context
- Tech stack: Tech Stack
- Additional requirements or notes: Additional Notes
- Target audience for this documentation: Target Audience
**Documentation Structure:**
Follow this exact order and use Markdown formatting throughout:
1. **Purpose & Usage** – Explain when and why developers or designers should use this component.
2. **Variants & States** – List all visual and functional states (e.g., primary/secondary, hover, active, disabled, loading, error).
3. **Properties/Props** – Present as a Markdown table with columns: `Name`, `Type`, `Default`, `Required`, `Description`.
4. **Do's & Don'ts** – Provide clear, concise examples of correct vs. incorrect usage.
5. **Accessibility** – Cover ARIA attributes, keyboard navigation, focus management, and screen reader announcements.
6. **Code Example** – Provide a complete, copy-pasteable implementation matching the specified tech stack. If the stack is Figma, replace this section with a design token/specification breakdown instead.
7. **Responsive Behavior** – Explain how the component adapts across standard breakpoints.
8. **Related Components** – List components that pair well or share tokens/logic.
**Constraints & Rules:**
- Use only the information provided. Do not invent proprietary product details, internal metrics, or unverified technical specs.
- If any detail is missing, infer sensible defaults for a standard design system but explicitly note your assumptions.
- Add a short "Open questions" list at the end for any ambiguous or missing information that requires confirmation.
- Keep the tone professional, concise, and tailored to Target Audience (if provided, otherwise default to frontend developers and UI designers).
- Incorporate any additional requirements or notes provided without altering the core structure.
- Output must be valid Markdown only.
How to use this prompt
- Fill in the fields above. Required ones are marked with *.
- Check the prompt preview: your answers appear highlighted in place.
- Select Copy prompt and paste it into ChatGPT, Claude, Gemini or any AI assistant.
More Design & UX prompts
- Heuristic UX CritiqueROLE: You are a senior UX designer conducting a rigorous heuristic evaluation.
- Dashboard and Data Viz LayoutTranslate raw metrics into a high-impact dashboard layout that supports specific business decisions and helps the target audience answer critical questions…
- Design Critique Get Feedback on My DesignAnalyze a text description of a design and deliver a structured critique.
- Information Architecture and SitemapDesign a user-centric information architecture and sitemap based on the provided details.
- Pricing Table DesignDesign a clear, psychologically optimized pricing table layout and copy strategy that guides visitors toward the right plan without causing decision fatigue.
- Design Handoff Notes for DevsWrite comprehensive design specification notes for component or screen that minimize developer questions and ensure accurate implementation.