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 · Assistante IA
Léa réécrit ce prompt pour ton métier et ton objectif précis — 3 questions suffisent.
Pourquoi ce prompt fonctionne
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 .stories.tsx complet au format CSF3 avec typage TypeScript, prêt à être intégré dans votre projet. Les stories générées couvrent tous les cas essentiels : variantes visuelles (tailles, couleurs, états), contrôles interactifs via argTypes pour explorer les combinaisons de props dans le panel Storybook, et play functions pour automatiser les tests d'interaction. La documentation MDX intégrée avec guidelines d'accessibilité et bonnes pratiques rend chaque composant auto-documenté. Pour un résultat optimal, détaillez au maximum la liste des props avec leurs types TypeScript, leurs valeurs par défaut 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.
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
Prompt ChatGPT pour générer du code Python
ChatGPT est devenu un outil incontournable pour les développeurs Python, qu'ils soient débutants ou expérimentés. Grâce à sa compréhension avancée du langage naturel, il peut transformer une description fonctionnelle en code Python propre, structuré et fonctionnel en quelques secondes. Mais la qualité du code généré dépend directement de la qualité du prompt utilisé. Un prompt vague produira un code générique et souvent inutilisable, tandis qu'un prompt bien structuré génèrera du code prêt pour la production, avec gestion des erreurs, typage et documentation. Dans ce guide, nous vous proposons des prompts optimisés pour tirer le meilleur parti de ChatGPT dans la génération de code Python. Que vous ayez besoin d'écrire un script d'automatisation, une API REST, un algorithme de traitement de données ou une classe complexe, ces prompts vous permettront d'obtenir des résultats précis et professionnels. L'objectif est de vous faire gagner du temps tout en maintenant un niveau de qualité élevé, en guidant ChatGPT avec les bonnes instructions pour qu'il respecte les conventions PEP 8, inclue des docstrings et produise du code maintenable.
API REST pour modèle ML
Exposer un modèle via une API
Stratégie de rollout progressif
Déploiement progressif d'un nouveau modèle
Prompt pour créer un système d'authentification JWT complet
Un prompt complet pour générer un système d'authentification JWT sécurisé avec gestion des tokens, refresh tokens, middleware et bonnes pratiques de sécurité.