Design System Documentation
The 'when NOT to use it' section prevents component misuse, which is the most common design system problem. Do/Don't examples are the fastest way to communicate intent.
Write documentation for the {{component_name}} component in our design system. Component purpose: {{purpose}} Variants: {{variants}} Platform: {{platform}} Design tool: {{design_tool}} Code framework: {{code_framework}} Documentation should include: 1. **Overview**: When and why to use this component (and when NOT to use it — suggest alternatives) 2. **Anatomy**: Label each part of the component (e.g., icon, label, helper text, container) 3. **Variants and states**: Describe each variant with its use case. States: default, hover, active, focus, disabled, error, loading 4. **Props/properties table**: Name, type, default value, description 5. **Spacing and sizing**: Padding, margins, and min/max dimensions using our {{spacing_scale}} scale 6. **Accessibility**: Required ARIA attributes, keyboard behavior, screen reader expectations 7. **Do/Don't examples**: 3 correct usages and 3 common misuses with explanations 8. **Content guidelines**: Character limits, tone, capitalization rules for any text within the component Write for a mixed audience of designers and developers.
Variables to customize
Why this prompt works
The 'when NOT to use it' section prevents component misuse, which is the most common design system problem. Do/Don't examples are the fastest way to communicate intent.
What you get when you save this prompt
Your workspace unlocks powerful tools to iterate and improve.
AI Optimization
One-click improvement with structure analysis and pattern suggestions.
Version History
Track every edit. Compare versions side-by-side with word-level diffs.
Folders & Tags
Organize your library with nested folders, tags, and drag-and-drop.
$ npm i -g @promptingbox/mcpUse Everywhere
Access prompts from Claude, Cursor, ChatGPT & more via MCP integration.
Your prompts, organized
Save, version, and access your best prompts across ChatGPT, Claude, Cursor, and more.