use-cases/user-stories-to-ui-mocks.md +79 −0 added
1---
2name: Turn user stories into UI mocks
3tagline: Convert product feedback, issue threads, and design context into
4 mockups your team can react to and implement.
5summary: Use Codex to gather product feedback from Slack, Linear, Google Drive,
6 normalize it into user stories and constraints, then generate UI mockups with
7 ImageGen. When the direction is chosen, turn the mock into a working
8 prototype.
9skills:
10 - token: slack
11 url: https://github.com/openai/plugins/tree/main/plugins/slack
12 description: Search approved feedback channels and threads for user stories,
13 pain points, quotes, and open questions.
14 - token: linear
15 url: https://github.com/openai/plugins/tree/main/plugins/linear
16 description: Pull feature requests, bug reports, labels, priorities, and project
17 context into the mock brief.
18 - token: google-drive
19 url: https://github.com/openai/plugins/tree/main/plugins/google-drive
20 description: Read research notes, call summaries, docs, sheets, and slides that
21 contain product feedback or design requirements.
22 - token: figma
23 url: https://github.com/openai/plugins/tree/main/plugins/figma
24 description: Fetch design context, screenshots, and design-system references so
25 mocks do not drift away from the product's visual language.
26 - token: $imagegen
27 description: Generate UI mockups, variations, and visual truth from the
28 synthesized stories and design constraints.
29 - token: build-web-apps
30 url: https://github.com/openai/plugins/tree/main/plugins/build-web-apps
31 description: Turn the selected mock into a working web prototype and verify the
32 implementation against the mock.
33bestFor:
34 - Product teams turning scattered feedback into a visual direction for a
35 feature.
36 - Design and engineering teams that want mockups grounded in source material
37 before building.
38 - Teams who want to iterate fast based on user feedback.
39starterPrompt:
40 title: Create Mocks from User Stories
41 body: >-
42 Turn this [user story/set of user feedbacks] into a UI mock for a feature
43 that would solve the problem, using these sources as context:
44
45 - @slack [channels or thread links]
46
47 - @linear [issue links, project, team, or view]
48
49 - @google-drive [research notes, survey export, doc, sheet, or slide deck]
50
51
52 Do that while respecting the current design system and existing UI [provide
53 Figma file or screenshot as reference].
54 suggestedEffort: medium
55relatedLinks:
56 - label: Codex plugins
57 url: /codex/plugins
58---
59
60## Introduction
61
62Product teams often collect feedback from various sources, such as Slack threads, Linear issues, Google Drive docs or sheets, or customer-call notes. Sometimes, they have clear user stories illustrating a problem they want to solve, and sometimes, the context lives in those sources.
63
64Codex can gather this context and turn it into a UI mock for a feature that would solve the problem, and once validated, can be implemented into the product.
65
66## Generate visual truth
67
68If you have a clear user story, you can start with that. If not, you can have a discussion with Codex first, gathering context from different sources and synthesizing it into a user story.
69
70Then, you can ask Codex to use ImageGen to create a few mock directions. The mocks should preserve the product's information architecture and design-system constraints.
71
72If helpful, you can provide screenshots of the current UI or a Figma file as reference.
73
74Do this until you are satisfied with the mock. The more scoped the changes are, the more likely Codex is to generate a mock that can be implemented directly.
75
76## Move from mock to prototype
77
78Use the final mock image that you want Codex to implement. Re-attach this image in a new turn rather than continuing the conversation directly.
79You can then ask Codex to implement the mock – optionally using the [Build Web Apps plugin](https://developers.openai.com/codex/plugins/build-web-apps) if you're building a web app – to turn it into a working prototype: