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.
Save this prompt to your library
Organize, version, and access your best prompts across ChatGPT, Claude, and Cursor.
Related prompts
B-roll markers and chapter markers save hours in post-production. Including a voice sample ensures the script matches your natural cadence instead of sounding AI-generated.
Podcast Episode OutlineBullet points instead of a full script preserve natural conversation energy. The emotional arc structure keeps listeners engaged instead of front-loading all the value.
Thumbnail & Title IdeasStudying competitor titles and past performance gives the AI real context. Ranking by risk level helps you A/B test strategically rather than guessing.
Content Repurposing PlanThe instruction to make each piece feel platform-native prevents the lazy copy-paste repurposing that audiences can spot instantly. Platform-specific hooks respect each algorithm's preferences.