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
Prompt Sora pour créer un prototype
Sora, le modèle de génération vidéo d'OpenAI, ouvre des possibilités inédites pour le prototypage rapide. Plutôt que de passer des heures sur des maquettes statiques ou des animations complexes, vous pouvez désormais visualiser un concept produit, une interface utilisateur ou un parcours client en quelques minutes grâce à un prompt bien structuré. Créer un prototype avec Sora permet de tester des idées visuellement avant d'investir dans le développement, de communiquer une vision à une équipe ou à des investisseurs, et d'itérer rapidement sur des concepts. Que vous soyez designer UX, chef de produit ou entrepreneur, la capacité de transformer une description textuelle en une démonstration vidéo réaliste change fondamentalement la phase d'idéation. L'enjeu principal réside dans la formulation du prompt : un prompt trop vague produira une vidéo générique, tandis qu'un prompt structuré avec des indications précises sur l'interface, les interactions et le contexte d'utilisation générera un prototype convaincant et exploitable. Ce guide vous fournit les prompts optimisés pour obtenir des prototypes vidéo de qualité professionnelle avec Sora.
Prompt Sora pour créer une API REST
Sora, le modèle d'intelligence artificielle développé par OpenAI, est principalement connu pour la génération vidéo, mais son potentiel s'étend bien au-delà. Dans le cadre du développement logiciel, Sora peut être utilisé comme assistant pour conceptualiser, planifier et structurer la création d'une API REST complète. En formulant un prompt précis, vous pouvez obtenir une architecture détaillée, des endpoints bien définis, des schémas de données cohérents et des bonnes pratiques de sécurité. L'approche par prompt engineering permet de transformer une idée abstraite en spécification technique exploitable en quelques secondes. Que vous soyez développeur backend cherchant à accélérer la phase de conception ou chef de projet souhaitant produire une documentation technique préliminaire, maîtriser les prompts pour la création d'API REST vous fera gagner un temps considérable. Ce guide vous propose un prompt principal optimisé, des variantes adaptées à votre niveau d'expertise, ainsi que des conseils pratiques pour tirer le meilleur parti de l'IA dans votre workflow de développement d'API.
Concevoir un cadre de conformité en tant que code
Automatiser les contrôles de conformité
Prompt Sora pour documenter du code
La documentation de code est souvent négligée par les développeurs, faute de temps ou de motivation. Pourtant, une documentation visuelle et dynamique peut transformer la compréhension d'un projet. Sora, le modèle de génération vidéo d'OpenAI, ouvre des possibilités inédites pour créer des vidéos explicatives qui accompagnent votre code. Plutôt que de rédiger des pages de texte que personne ne lira, imaginez des clips visuels montrant le flux de données dans votre application, l'architecture de vos microservices ou le parcours utilisateur dans votre interface. Avec les bons prompts, Sora peut générer des animations claires illustrant des concepts techniques complexes : diagrammes de séquence animés, visualisations de structures de données, ou démonstrations pas à pas d'une API. Cette approche est particulièrement efficace pour l'onboarding de nouveaux développeurs, les présentations techniques internes et la documentation publique de projets open source. Le défi réside dans la formulation précise du prompt pour que Sora produise des vidéos techniquement cohérentes et pédagogiquement utiles. Ce guide vous fournit des prompts optimisés pour transformer votre documentation de code en contenu visuel engageant et professionnel.