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

Codex use case

Transformez des user stories en maquettes d’interface

À partir des retours sur le produit, des discussions autour des tickets et des éléments de design, créez des maquettes que votre équipe pourra commenter puis mettre en œuvre.

Difficulty Easy
Time horizon 30m

Utilisez Codex pour rassembler les retours sur le produit dans Slack, Linear et Google Drive. Tirez-en des user stories et des contraintes de conception, puis générez des maquettes d’interface avec ImageGen. Une fois l’orientation choisie, transformez la maquette retenue en prototype fonctionnel.

Best for

  • Les équipes produit qui s’appuient sur des retours épars pour définir l’orientation visuelle d’une fonctionnalité.
  • Les équipes de design et d’ingénierie qui souhaitent concevoir leurs maquettes à partir des sources disponibles avant de passer au développement.
  • Les équipes qui souhaitent affiner rapidement leurs maquettes à partir des retours des utilisateurs.

Contents

    ← All use cases

    Transformez des user stories en maquettes d’interface

    À partir des retours sur le produit, des discussions autour des tickets et des éléments de design, créez des maquettes que votre équipe pourra commenter puis mettre en œuvre.

    Utilisez Codex pour rassembler les retours sur le produit dans Slack, Linear et Google Drive. Tirez-en des user stories et des contraintes de conception, puis générez des maquettes d’interface avec ImageGen. Une fois l’orientation choisie, transformez la maquette retenue en prototype fonctionnel.

    Easy
    30m

    Utilisez Codex pour rassembler les retours sur le produit dans Slack, Linear et Google Drive. Tirez-en des user stories et des contraintes de conception, puis générez des maquettes d’interface avec ImageGen. Une fois l’orientation choisie, transformez la maquette retenue en prototype fonctionnel.

    Easy
    30m

    Related links

    Best for

    • Les équipes produit qui s’appuient sur des retours épars pour définir l’orientation visuelle d’une fonctionnalité.
    • Les équipes de design et d’ingénierie qui souhaitent concevoir leurs maquettes à partir des sources disponibles avant de passer au développement.
    • Les équipes qui souhaitent affiner rapidement leurs maquettes à partir des retours des utilisateurs.

    Skills & Plugins

    • Dans les canaux et fils de discussion approuvés pour la collecte des retours, repérez les user stories, les difficultés rencontrées, les citations et les questions en suspens.
    • Intégrez au brief de la maquette les demandes de fonctionnalités, les signalements de bugs, les étiquettes, les priorités et les éléments de contexte du projet.
    • Consultez les notes de recherche, comptes rendus d’appels, documents, feuilles de calcul et présentations qui contiennent des retours sur le produit ou des exigences de conception.
    • Rassemblez les éléments de design, les captures d’écran et les références du système de design pour que les maquettes restent fidèles au langage visuel du produit.
    • ImageGen
      À partir de la synthèse des user stories et des contraintes de conception, générez des maquettes d’interface, des variantes et un visuel de référence.
    • Transformez la maquette retenue en prototype web fonctionnel, puis vérifiez que le prototype reproduit fidèlement la maquette.
    Skill Why use it
    Slack Dans les canaux et fils de discussion approuvés pour la collecte des retours, repérez les user stories, les difficultés rencontrées, les citations et les questions en suspens.
    Linear Intégrez au brief de la maquette les demandes de fonctionnalités, les signalements de bugs, les étiquettes, les priorités et les éléments de contexte du projet.
    Google Drive Consultez les notes de recherche, comptes rendus d’appels, documents, feuilles de calcul et présentations qui contiennent des retours sur le produit ou des exigences de conception.
    Figma Rassemblez les éléments de design, les captures d’écran et les références du système de design pour que les maquettes restent fidèles au langage visuel du produit.
    ImageGen À partir de la synthèse des user stories et des contraintes de conception, générez des maquettes d’interface, des variantes et un visuel de référence.
    Build Web Apps Transformez la maquette retenue en prototype web fonctionnel, puis vérifiez que le prototype reproduit fidèlement la maquette.

    Starter prompt

    À partir de [user story/set of user feedbacks], créez une maquette d’interface pour une fonctionnalité qui résoudrait le problème décrit. Appuyez-vous sur les sources suivantes : - @slack [channels or thread links] - @linear [issue links, project, team, or view] - @google-drive [research notes, survey export, doc, sheet, or slide deck] Respectez le système de design actuel et l’interface existante [provide Figma file or screenshot as reference].
    À partir de [user story/set of user feedbacks], créez une maquette d’interface pour une fonctionnalité qui résoudrait le problème décrit. Appuyez-vous sur les sources suivantes : - @slack [channels or thread links] - @linear [issue links, project, team, or view] - @google-drive [research notes, survey export, doc, sheet, or slide deck] 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 de plusieurs sources, comme des fils de discussion Slack, des tickets Linear, des documents ou des feuilles de calcul sur Google Drive, ou encore des notes prises lors d’appels avec des clients. Parfois, elles disposent déjà de récits utilisateurs qui décrivent clairement le problème à résoudre. Dans d’autres cas, les éléments qui permettent de comprendre le problème sont dispersés entre ces sources.

    ChatGPT peut rassembler ces éléments et créer une maquette d’interface pour une fonctionnalité qui répondrait au problème. Une fois que vous avez validé l’approche, Codex peut intégrer la fonctionnalité au produit.

    Créez une maquette de référence

    Si vous disposez d’un récit utilisateur clair, prenez-le comme point de départ. Sinon, commencez par en discuter avec ChatGPT pour rassembler les éléments de contexte provenant des différentes sources et en tirer un récit utilisateur.

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

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

    Affinez la maquette jusqu’à ce qu’elle vous convienne. Plus vous délimitez précisément les modifications, plus Codex a de chances de générer une maquette directement exploitable pour l’implémentation.

    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-y de nouveau l’image au lieu de poursuivre la discussion dans ChatGPT. Demandez ensuite à Codex de transformer la maquette en prototype fonctionnel. Si vous développez une application web, vous pouvez lui demander d’utiliser le plugin Build Web Apps.

    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 respecter les contraintes pertinentes. Limitez la création de nouveaux composants : explorez le code source et réutilisez autant que possible les composants existants et le système de design.

    Related use cases