Codex use case
User Stories in UI-Mockups umwandeln
Wandle Produktfeedback, Diskussionen in Issues und Designkontext in Mockups um, die deinem Team als Grundlage für Feedback und Umsetzung dienen.
Nutze Codex, um Produktfeedback aus Slack, Linear und Google Drive zusammenzutragen, es als User Stories und Vorgaben zu strukturieren und anschließend mit ImageGen UI-Mockups zu erstellen. Sobald die gewünschte Richtung feststeht, setze das Mockup als funktionsfähigen Prototyp um.
Am besten geeignet für
- Produktteams, die aus verstreutem Feedback ein visuelles Konzept für ein Feature entwickeln.
- Design- und Entwicklungsteams, die vor der Umsetzung fundierte Mockups auf Grundlage von Ausgangsmaterial erstellen möchten.
- Teams, die auf Grundlage von Feedback von Nutzenden schnell iterieren möchten.
Contents
User Stories in UI-Mockups umwandeln
Wandle Produktfeedback, Diskussionen in Issues und Designkontext in Mockups um, die deinem Team als Grundlage für Feedback und Umsetzung dienen.
Nutze Codex, um Produktfeedback aus Slack, Linear und Google Drive zusammenzutragen, es als User Stories und Vorgaben zu strukturieren und anschließend mit ImageGen UI-Mockups zu erstellen. Sobald die gewünschte Richtung feststeht, setze das Mockup als funktionsfähigen Prototyp um.
Nutze Codex, um Produktfeedback aus Slack, Linear und Google Drive zusammenzutragen, es als User Stories und Vorgaben zu strukturieren und anschließend mit ImageGen UI-Mockups zu erstellen. Sobald die gewünschte Richtung feststeht, setze das Mockup als funktionsfähigen Prototyp um.
Weiterführende Links
Am besten geeignet für
- Produktteams, die aus verstreutem Feedback ein visuelles Konzept für ein Feature entwickeln.
- Design- und Entwicklungsteams, die vor der Umsetzung fundierte Mockups auf Grundlage von Ausgangsmaterial erstellen möchten.
- Teams, die auf Grundlage von Feedback von Nutzenden schnell iterieren möchten.
Skills und Plug-ins
- Durchsuche freigegebene Feedbackkanäle und Threads nach User Stories, konkreten Problemen, Zitaten und offenen Fragen.
- Nimm Funktionswünsche, Fehlerberichte, Labels, Prioritäten und Projektkontext in das Briefing für das Mockup auf.
- Lies Notizen aus der Produktforschung, Gesprächszusammenfassungen, Dokumente, Tabellen und Präsentationen, die Produktfeedback oder Designanforderungen enthalten.
- Rufe Designkontext, Screenshots und Referenzen zum Designsystem ab, damit die Mockups der visuellen Sprache des Produkts treu bleiben.
- ImageGenErstelle aus den zusammengeführten User Stories und Designvorgaben UI-Mockups und Varianten, die als verlässliche visuelle Referenz dienen.
- Wandle das ausgewählte Mockup in einen funktionsfähigen Webprototyp um und überprüfe die Umsetzung anhand des Mockups.
| Skill | Why use it |
|---|---|
| Slack | Durchsuche freigegebene Feedbackkanäle und Threads nach User Stories, konkreten Problemen, Zitaten und offenen Fragen. |
| Linear | Nimm Funktionswünsche, Fehlerberichte, Labels, Prioritäten und Projektkontext in das Briefing für das Mockup auf. |
| Google Drive | Lies Notizen aus der Produktforschung, Gesprächszusammenfassungen, Dokumente, Tabellen und Präsentationen, die Produktfeedback oder Designanforderungen enthalten. |
| Figma | Rufe Designkontext, Screenshots und Referenzen zum Designsystem ab, damit die Mockups der visuellen Sprache des Produkts treu bleiben. |
| ImageGen | Erstelle aus den zusammengeführten User Stories und Designvorgaben UI-Mockups und Varianten, die als verlässliche visuelle Referenz dienen. |
| Build Web Apps | Wandle das ausgewählte Mockup in einen funktionsfähigen Webprototyp um und überprüfe die Umsetzung anhand des Mockups. |
Einstiegs-Prompt
Einführung
Produktteams sammeln Feedback häufig aus unterschiedlichen Quellen, etwa aus Slack-Threads, Linear-Issues, Dokumenten oder Tabellen in Google Drive und Notizen aus Kundengesprächen. Manchmal liegen klare User Stories vor, die ein Problem beschreiben, das sie lösen möchten. In anderen Fällen steckt der Kontext in diesen Quellen.
ChatGPT kann diesen Kontext zusammentragen und daraus ein UI-Mockup für ein Feature erstellen, das das Problem lösen würde. Sobald du das Konzept validiert hast, kann Codex es im Produkt umsetzen.
Eine verlässliche visuelle Referenz erstellen
Wenn du bereits eine klare User Story hast, kannst du damit beginnen. Andernfalls kannst du dich zunächst mit ChatGPT austauschen, dabei Kontext aus verschiedenen Quellen zusammentragen und daraus eine User Story entwickeln.
Anschließend kannst du ChatGPT bitten, mithilfe der Bildgenerierung mehrere Mockup-Varianten zu erstellen. Die Mockups sollten die Informationsarchitektur des Produkts beibehalten und die Vorgaben des Designsystems einhalten.
Bei Bedarf kannst du Screenshots der aktuellen UI oder eine Figma-Datei als Referenz bereitstellen.
Wiederhole diesen Vorgang, bis du mit dem Mockup zufrieden bist. Je genauer du die Änderungen eingrenzt, desto wahrscheinlicher erstellt Codex ein Mockup, das sich direkt umsetzen lässt.
Vom Mockup zum Prototyp
Verwende das fertige Mockup-Bild, das Codex umsetzen soll. Wähle Codex aus, starte einen neuen Chat und hänge das Bild erneut an, statt den Chat direkt in ChatGPT fortzusetzen. Bitte Codex anschließend, das Mockup in einen funktionsfähigen Prototyp umzusetzen. Wenn du eine Web-App entwickelst, kannst du dafür optional das Plug-in „Build Web Apps“ verwenden:
Verwandte Anwendungsfälle
Onboarding neuer Mitarbeitender koordinieren
Nutze ChatGPT, um freigegebenen Kontext zu neuen Mitarbeitenden zusammenzutragen...
PRDs aus internem Kontext entwerfen
Nutze ChatGPT mit dem Skill $documents und verbundenen Plug-ins wie Linear, Slack, Notion...
Besprechungsbriefings erstellen
Nutze ChatGPT zusammen mit Calendar, Drive, Slack und Gmail, um vor einer Besprechung...