use-cases/idea-to-proof-of-concept.md +76 −0 added
1---
2name: Get from idea to proof of concept
3tagline: Explore the concept visually with ImageGen and build a first version of
4 your idea.
5summary: Use Codex with ImageGen to turn a rough idea into a visual direction,
6 implement the smallest useful prototype, and verify it in a browser.
7skills:
8 - token: $imagegen
9 description: Generate visual concepts, UI mockups, asset directions, and
10 variants with `gpt-image-2` before Codex implements the selected
11 direction.
12 - token: $playwright
13 url: https://github.com/openai/skills/tree/main/skills/.curated/playwright-interactive
14 description: Open the running app in a real browser, inspect the changed route,
15 and verify each small UI adjustment before the next iteration.
16 - token: build-web-apps
17 url: https://github.com/openai/plugins/tree/main/plugins/build-web-apps
18 description: Use the concept-first workflow for new web apps, dashboards, sites,
19 and frontend prototypes, then verify the implementation in the browser.
20 - token: game-studio
21 url: https://github.com/openai/plugins/tree/main/plugins/game-studio
22 description: Use Game Studio when the proof of concept is a browser game and
23 needs a playable loop, asset workflow, HUD, engine choice, and playtest
24 pass.
25bestFor:
26 - Early product ideas where a working prototype will answer more than a
27 written plan.
28 - Web apps, dashboards, and tools that need visual exploration before
29 implementation.
30 - Teams that want to validate a product idea with a working prototype before
31 investing further.
32starterPrompt:
33 title: Build the Proof of Concept
34 body: >-
35 Use ImageGen to generate a high quality UI mockup for the following idea,
36 then use the [Build Web Apps plugin/Game studio plugin] to implement it:
37
38
39 [describe the idea, target user, and the main workflow]
40 suggestedEffort: high
41relatedLinks:
42 - label: Image generation guide
43 url: /api/docs/guides/image-generation
44 - label: Codex plugins
45 url: /codex/plugins
46---
47
48## Start with a visual direction
49
50GPT Image 2 is great at generating high quality UI mockups. Instead of starting from scratch when exploring new ideas, you can leverage image generation to get a visual direction.
51
52You can do this in two ways:
53
54- Iterate on the visual direction using the ImageGen skill, and once you are satisfied with the proposed UI, you can ask Codex to build a prototype matching the visuals. In that case, make sure to copy the final image you want to implement in a new turn rather than continuing the conversation directly – Codex will do better when it can reference a user attachment.
55- Use a plugin and simply describe your idea: the plugin will generate the visual direction for you and handle next steps.
56
57## Leverage a plugin
58
59If you do not need to iterate on the visual direction before starting the implementation, you can use a plugin and describe your idea.
60
61Use the [Build Web Apps plugin](https://github.com/openai/plugins/tree/main/plugins/build-web-apps)
62for web apps, dashboards, creative websites, and frontend-heavy tools. Its
63workflow pushes Codex to generate a design first, match it in code, and use the
64browser to compare the result back to the concept.
65
66Use the [Game Studio plugin](https://github.com/openai/plugins/tree/main/plugins/game-studio)
67when the proof of concept is a browser game. That path should define the player
68verbs, first playable loop, engine, asset workflow, HUD, controls, and browser
69test before expanding the game.
70
71## Iteration workflow
72
73A good proof of concept is scoped to an MVP that can be implemented quickly and validated with the team.
74If you want to make sure the MVP is working as expected, you can use Playwright interactive to let Codex verify its work.
75
76Once you have a first version working, you can iterate on it by asking for scoped changes in the same conversation: