Générer des Storybooks complets pour vos composants UI
Génère automatiquement des fichiers Storybook complets avec variantes, contrôles interactifs, tests d'interaction et documentation MDX pour n'importe quel composant UI.
Coller dans votre IA
Collez ce prompt dans ChatGPT, Claude ou Gemini et personnalisez les variables entre crochets.
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
Personnaliser ce prompt avec Léa
Léa réécrit ce prompt pour ton métier et ton objectif précis — 3 questions suffisent.
Pourquoi ce prompt fonctionne
<p>Ce prompt transforme l'IA en expert Storybook capable de produire des stories exhaustives pour vos composants UI. En fournissant le nom du composant, le framework utilisé et la liste des props, vous obtenez un fichier <strong>.stories.tsx</strong> complet au format CSF3 avec typage TypeScript, prêt à être intégré dans votre projet.</p><p>Les stories générées couvrent tous les cas essentiels : <strong>variantes visuelles</strong> (tailles, couleurs, états), <strong>contrôles interactifs</strong> via argTypes pour explorer les combinaisons de props dans le panel Storybook, et <strong>play functions</strong> pour automatiser les tests d'interaction. La documentation MDX intégrée avec guidelines d'accessibilité et bonnes pratiques rend chaque composant auto-documenté.</p><p>Pour un résultat optimal, détaillez au maximum la liste des props avec leurs <strong>types TypeScript</strong>, leurs <strong>valeurs par défaut</strong> et une brève description. Plus le contexte est riche, plus les stories générées seront pertinentes et les contrôles interactifs bien configurés. N'hésitez pas à préciser les decorators nécessaires (providers de thème, router, store Redux) pour un rendu fidèle.</p>
Cas d'usage
Résultat attendu
Un fichier .stories.tsx complet au format CSF3 avec typage TypeScript, contenant la story par défaut, toutes les variantes visuelles, les argTypes avec contrôles interactifs, des play functions de test, les decorators nécessaires, et un bloc de documentation MDX avec guidelines d'accessibilité.
Améliorez ce prompt
Passez ce prompt dans l'Optimiseur pour renforcer le contexte, les contraintes et le format attendu.
Améliore ce prompt avec l'OptimiseurCommentaires
- LéaIA
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.
Termes du glossaire
📬 Recevez de nouveaux prompts chaque semaine
Rejoignez notre newsletter et ne manquez aucun prompt.
Pour aller plus loin
Prompts similaires
Concevoir une architecture de microservices
Planifier la décomposition en microservices
Implémenter les tests de pipeline en tant que code
Tester les pipelines d'Intégration Continue / Déploiement Continu (CI/CD)
Prompt ChatGPT pour créer des tests E2E
Les tests end-to-end (E2E) sont essentiels pour garantir le bon fonctionnement d'une application dans son ensemble, mais leur rédaction est souvent chronophage et répétitive. ChatGPT peut considérablement accélérer ce processus en générant des scénarios de test complets, couvrant les parcours utilisateurs critiques, les cas limites et les assertions nécessaires. Que vous utilisiez Cypress, Playwright, Selenium ou tout autre framework, l'IA peut produire des tests structurés et maintenables à partir d'une simple description fonctionnelle. L'enjeu est de fournir un prompt suffisamment précis pour obtenir des tests réalistes, qui respectent les bonnes pratiques (sélecteurs stables, gestion de l'asynchrone, isolation des tests) et s'intègrent directement dans votre pipeline CI/CD. Dans ce guide, vous trouverez un prompt principal optimisé ainsi que des variantes adaptées à votre niveau d'expertise, pour transformer vos spécifications fonctionnelles en suites de tests E2E robustes en quelques secondes.
Prompt DALL-E pour créer une architecture logicielle
DALL-E, le modèle de génération d'images d'OpenAI, offre une capacité unique pour visualiser des concepts abstraits comme l'architecture logicielle. Traditionnellement réservée aux tableaux blancs et aux outils de diagrammes, la représentation visuelle d'une architecture système peut désormais être générée en quelques secondes grâce à un prompt bien construit. Que vous souhaitiez illustrer une architecture microservices, un pattern MVC ou une infrastructure cloud, DALL-E peut produire des schémas clairs, des diagrammes stylisés et des représentations conceptuelles qui facilitent la communication entre équipes techniques et parties prenantes non techniques. L'enjeu principal réside dans la formulation du prompt : il faut guider le modèle vers une représentation structurée, lisible et techniquement cohérente, en évitant les rendus trop artistiques qui sacrifieraient la clarté au profit de l'esthétique. Ce guide vous propose des prompts optimisés pour obtenir des visualisations d'architecture logicielle professionnelles, adaptées à vos présentations, documentations techniques et sessions de brainstorming architectural.