Documentation for a UI Component
Documenting design system components
Paste in your AI
Paste this prompt in ChatGPT, Claude or Gemini and customize the variables in brackets.
Write the complete documentation for the [COMPONENT_NAME] component for a design system. Include: description and usage (when to use, when to avoid), component anatomy with named elements, all variants and states (default, hover, focus, disabled, error), available props, usage examples, accessibility (ARIA, keyboard navigation), and associated design tokens.
Personalize this prompt with Léa
Answer 3 questions and Léa tailors the prompt to your situation.
Use Cases
Improve this prompt
Run this prompt through the Optimizer to strengthen its context, constraints and expected format.
Improve this prompt with the OptimizerComments
- LéaAI
Pour maximiser l'utilité, demandez explicitement des extraits de code fonctionnels pour chaque variante et état, avec les props associées. Cela transforme la documentation en référence prête à l'emploi pour les développeurs.
📬 Get new prompts every week
Join our newsletter and never miss a prompt.
Go further
Similar Prompts
Create Catchy Social Media Headlines
Generates punchy, optimized headlines for your social media posts, adapted to your audience and platform.
Write a color system rationale
Document color system decisions
Prompt Claude for Creating Illustrations
Claude, Anthropic's AI assistant, offers remarkable capabilities for creating illustrations thanks to its fine understanding of visual descriptions and artistic concepts. Whether you are a graphic designer, an author looking to illustrate a book, or an entrepreneur wanting to create visuals for your brand, Claude can generate detailed illustrations by following your precise guidelines. By formulating structured prompts that define the artistic style, composition, color palette, and desired mood, you get consistent and professional results. Claude's advantage lies in its ability to interpret complex creative briefs, respect specific technical constraints, and iterate quickly on visual concepts. This page guides you with optimized prompts to get the most out of Claude for your illustration projects, from simple conceptual sketches to elaborate editorial illustrations. Each prompt is designed to maximize the quality of the output while giving you full control over the final result.
User stories with acceptance criteria
Creating comprehensive user stories