Generate Complete Storybooks for Your UI Components
Automatically generates complete Storybook files with variants, interactive controls, interaction tests and MDX documentation for any UI component.
Paste in your AI
Paste this prompt in ChatGPT, Claude or Gemini and customize the variables in brackets.
Tu es un développeur frontend expert en Storybook et en design systems. Génère des stories Storybook complètes pour le composant suivant :
Composant : [NOM_DU_COMPOSANT]
Framework : [FRAMEWORK : React | Vue | Angular | Svelte]
Librairie de style : [LIBRAIRIE_STYLE : Tailwind CSS | CSS Modules | Styled Components | SCSS | autre]
Props/inputs du composant :
[LISTE_DES_PROPS]
Pour chaque composant, génère :
- Story par défaut avec les props les plus courantes
- Toutes les variantes visuelles (tailles, couleurs, états : hover, disabled, loading, error, empty)
- Args et argTypes avec des contrôles interactifs (select, boolean, text, color, range) pour chaque prop
- Stories de composition montrant le composant utilisé avec d'autres composants
- Story responsive démontrant le comportement sur mobile, tablette et desktop
- Documentation MDX intégrée avec :
- Description du composant et de son usage
- Tableau des props avec types, valeurs par défaut et descriptions
- Guidelines d'accessibilité (a11y)
- Do's and Don'ts illustrés
- Decorators nécessaires (ThemeProvider, Router, Store, etc.)
- Play functions avec @storybook/test pour tester les interactions clés (clic, saisie, navigation clavier)
Respecte ces conventions :
- Format CSF3 (Component Story Format 3) avec typage TypeScript
- Utilise
satisfies Meta<typeof [NOM_DU_COMPOSANT]>pour le typage - Nomme les stories de façon descriptive en PascalCase
- Organise avec
title: '[CATÉGORIE]/[NOM_DU_COMPOSANT]' - Ajoute des tags
autodocspour la documentation automatique - Inclus les paramètres viewport pour les stories responsives
Personalize this prompt with Léa · AI assistant
Léa rewrites this prompt for your job and your exact goal — 3 quick questions.
Why this prompt works
This prompt transforms AI into a Storybook expert capable of producing exhaustive stories for your UI components. By providing the component name, framework used and list of props, you get a complete .stories.tsx file in CSF3 format with TypeScript typing, ready to integrate into your project. The generated stories cover all essential cases: visual variants (sizes, colors, states), interactive controls via argTypes to explore prop combinations in the Storybook panel, and play functions to automate interaction tests. Built-in MDX documentation with accessibility guidelines and best practices makes each component self-documented. For optimal results, detail the prop list as much as possible with their TypeScript types, default values and a brief description. The richer the context, the more relevant the generated stories and better configured the interactive controls will be. Feel free to specify needed decorators (theme providers, router, Redux store) for a faithful rendering.
Use Cases
Expected Output
A complete .stories.tsx file in CSF3 format with TypeScript typing, containing the default story, all visual variants, argTypes with interactive controls, test play functions, necessary decorators, and an MDX documentation block with accessibility guidelines.
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
Pensez à fournir un exemple d'usage réel du composant (extrait de code) dans la section documentation : Storybook s'en sert pour générer une doc plus parlante qu'une simple liste de props. Précisez aussi les événements émis (callback) et les types TS exacts, sinon les play functions risquent de tester des clics sans savoir quelles actions vérifier.
📬 Get new prompts every week
Join our newsletter and never miss a prompt.
Go further
Similar Prompts
Build an accessible form
Build WCAG-compliant forms
Debug a CSS layout issue
Fix layout bugs faster
Implement canary deployments
Roll out changes safely with canary
ChatGPT Prompt to Generate Unit Tests
Writing unit tests is a crucial step in software development, but it is often seen as time-consuming and repetitive. ChatGPT radically transforms this practice by allowing you to generate complete test suites in seconds. Whether you work in JavaScript, Python, Java, or any other language, AI can analyze your source code, identify edge cases, and produce tests covering both nominal scenarios and error cases. The challenge is not just to produce test code, but to ensure relevant coverage that actually detects regressions. A well-structured prompt enables ChatGPT to understand the business context of your function, the dependencies to mock, and the assertions to verify. Developers who master this approach reduce their test writing time by 60-80%, while improving the quality of their coverage. In this guide, you will find optimized prompts to generate professional unit tests, tailored to your level of expertise and tech stack.