For the complete documentation index, see llms.txt. Markdown versions of documentation pages are available by appending .md to the page URL.
Navigation principale
Codex

Codex use case

Transformez des user stories en maquettes d’interface

Transformez les retours sur le produit, les discussions liées aux tickets et le contexte de design en maquettes que votre équipe peut évaluer et implémenter.

Difficulty Facile
Time horizon 30 min

Utilisez Codex pour recueillir les retours sur le produit dans Slack, Linear et Google Drive, les structurer sous forme de user stories et de contraintes, puis générer des maquettes d’interface avec ImageGen. Une fois l’orientation choisie, transformez la maquette en prototype fonctionnel.

Idéal pour

  • Équipes produit souhaitant transformer des retours dispersés en orientation visuelle pour une fonctionnalité.
  • Équipes de design et d’ingénierie qui souhaitent disposer de maquettes fondées sur les sources avant de passer au développement.
  • Équipes souhaitant itérer rapidement à partir des retours des utilisateurs.

Contents

    ← Tous les cas d’utilisation

    Transformez des user stories en maquettes d’interface

    Transformez les retours sur le produit, les discussions liées aux tickets et le contexte de design en maquettes que votre équipe peut évaluer et implémenter.

    Utilisez Codex pour recueillir les retours sur le produit dans Slack, Linear et Google Drive, les structurer sous forme de user stories et de contraintes, puis générer des maquettes d’interface avec ImageGen. Une fois l’orientation choisie, transformez la maquette en prototype fonctionnel.

    Facile
    30 min

    Utilisez Codex pour recueillir les retours sur le produit dans Slack, Linear et Google Drive, les structurer sous forme de user stories et de contraintes, puis générer des maquettes d’interface avec ImageGen. Une fois l’orientation choisie, transformez la maquette en prototype fonctionnel.

    Facile
    30 min

    Liens connexes

    Idéal pour

    • Équipes produit souhaitant transformer des retours dispersés en orientation visuelle pour une fonctionnalité.
    • Équipes de design et d’ingénierie qui souhaitent disposer de maquettes fondées sur les sources avant de passer au développement.
    • Équipes souhaitant itérer rapidement à partir des retours des utilisateurs.

    Skills et plugins

    • Recherchez dans les canaux et fils de discussion approuvés des user stories, des points de friction, des citations et des questions en suspens.
    • Rassemblez dans le brief de la maquette les demandes de fonctionnalités, les rapports de bugs, les libellés, les priorités et le contexte du projet.
    • Consultez les notes d’étude, les synthèses d’appels, les documents, les feuilles de calcul et les présentations contenant des retours sur le produit ou des exigences de design.
    • Récupérez le contexte de design, les captures d’écran et les références au système de design afin que les maquettes restent fidèles au langage visuel du produit.
    • ImageGen
      Générez des maquettes d’interface, des variantes et une référence visuelle à partir des user stories synthétisées et des contraintes de design.
    • Transformez la maquette sélectionnée en prototype web fonctionnel, puis vérifiez que l’implémentation correspond à la maquette.
    Skill Why use it
    Slack Recherchez dans les canaux et fils de discussion approuvés des user stories, des points de friction, des citations et des questions en suspens.
    Linear Rassemblez dans le brief de la maquette les demandes de fonctionnalités, les rapports de bugs, les libellés, les priorités et le contexte du projet.
    Google Drive Consultez les notes d’étude, les synthèses d’appels, les documents, les feuilles de calcul et les présentations contenant des retours sur le produit ou des exigences de design.
    Figma Récupérez le contexte de design, les captures d’écran et les références au système de design afin que les maquettes restent fidèles au langage visuel du produit.
    ImageGen Générez des maquettes d’interface, des variantes et une référence visuelle à partir des user stories synthétisées et des contraintes de design.
    Build Web Apps Transformez la maquette sélectionnée en prototype web fonctionnel, puis vérifiez que l’implémentation correspond à la maquette.

    Prompt de démarrage

    Transformez [user story/set of user feedbacks] en maquette d’interface pour une fonctionnalité qui résoudrait le problème, en utilisant les sources suivantes comme contexte : - @slack [channels or thread links] - @linear [issue links, project, team, or view] - @google-drive [research notes, survey export, doc, sheet, or slide deck] Pour ce faire, respectez le système de design actuel et l’interface existante [provide Figma file or screenshot as reference].
    Transformez [user story/set of user feedbacks] en maquette d’interface pour une fonctionnalité qui résoudrait le problème, en utilisant les sources suivantes comme contexte : - @slack [channels or thread links] - @linear [issue links, project, team, or view] - @google-drive [research notes, survey export, doc, sheet, or slide deck] Pour ce faire, respectez le système de design actuel et l’interface existante [provide Figma file or screenshot as reference].

    Introduction

    Les équipes produit recueillent souvent des retours provenant de différentes sources, comme des fils de discussion Slack, des tickets Linear, des documents ou feuilles de calcul Google Drive, ou encore des notes prises lors d’appels avec des clients. Elles disposent parfois de user stories claires illustrant un problème à résoudre ; dans d’autres cas, le contexte se trouve dans ces sources.

    ChatGPT peut rassembler ce contexte et en tirer une maquette d’interface pour une fonctionnalité qui résoudrait le problème. Une fois cette orientation validée, Codex peut implémenter la fonctionnalité dans le produit.

    Générez une référence visuelle

    Si vous disposez d’une user story claire, commencez par celle-ci. Sinon, échangez d’abord avec ChatGPT pour recueillir le contexte dans différentes sources, puis synthétisez-le sous forme de user story.

    Demandez ensuite à ChatGPT d’utiliser la génération d’images pour créer plusieurs pistes visuelles sous forme de maquettes. Les maquettes doivent respecter l’architecture de l’information du produit et les contraintes de son système de design.

    Si cela peut vous aider, fournissez comme référence des captures d’écran de l’interface actuelle ou un fichier Figma.

    Procédez ainsi jusqu’à ce que la maquette vous convienne. Plus les modifications sont ciblées, plus Codex a de chances de générer une maquette directement implémentable.

    Passez de la maquette au prototype

    Utilisez l’image de la maquette finale que vous souhaitez faire implémenter par Codex. Sélectionnez Codex, démarrez une nouvelle discussion et joignez à nouveau l’image, au lieu de poursuivre directement la discussion dans ChatGPT. Demandez ensuite à Codex d’implémenter la maquette pour en faire un prototype fonctionnel, en utilisant éventuellement le plugin Build Web Apps si vous développez une application web :

    Utilisez cette image comme référence et implémentez cette fonctionnalité dans ce dépôt. Appuyez-vous sur le contexte de cette discussion pour l’implémenter en respectant les contraintes appropriées. Réduisez au minimum la création de nouveaux composants : explorez le code source et, dans la mesure du possible, réutilisez les composants et le système de design existants.

    Cas d’utilisation associés