ChatGPTCreativeDesignAI score · PendingAI-assisted edit · no obvious prompt-injection riskWeb

User stories → UI mocks｜Synthesize constraints, then generate on-system directions

Pull feedback from Slack/Linear/docs, produce mocks that respect IA and components, then open a fresh Codex chat.

Some experienceStepsPromptWorkflow
Who
Product, design, and engineering
You get
Reviewable mock directions aligned to the design system
You need
ChatGPT · Figma · ImageGen · Codex

Constraints

Gather stories → lock design-system references → ImageGen 2–3 directions → pick one and start a new Codex thread with the final mock.

What they did

The official tutorial describes gathering feedback into user stories, generating mocks against existing design references, and handing the selected image to a new Codex chat for prototyping. It is a tutorial, not verified results from a named team.

How it went

The workflow gives designers and product managers reviewable visual directions that are already aligned with the current design system before engineering work begins. The source documentation presents this as a procedural handoff method rather than providing verified metrics on design-to-code speed or implementation accuracy. Teams still must manually validate that generated code correctly maps to the attached Figma references.

Worth knowing

The source requires reattaching the selected image in a new Codex chat and reusing existing components and the design system where possible. It does not instruct you to discard necessary design constraints or guarantee an output count or implementation speed.

Steps

  1. Gather context

    Provide a clear user story if available; otherwise discuss it with ChatGPT first, gathering approved Slack channels or threads, Linear issues or projects and Google Drive research notes, docs, sheets or slides into a story and constraints. Replace the original starter prompt placeholders below.

  2. Lock the system

    Attach current UI screenshots or a Figma file. Require preserving the existing information architecture and design-system constraints. Use only connected, authorized sources.

  3. Multiple directions

    Ask ChatGPT to use image generation for a few mock directions and iterate until satisfied with the chosen final image. Keep changes scoped to improve implementability; the source does not prescribe exactly two or three options.

  4. Fresh chat for build

    Select Codex, start a new chat and reattach the final mock instead of continuing the previous ChatGPT conversation. Provide the target repository and necessary constraints. Use this step’s original prompt to request codebase inspection and reuse of existing components and design system. Build Web Apps is optional for web projects.

    Execution prompt · Source text。New Codex chat with final mock attached

    Use this image as a reference and implement this feature in this repository. Use this chat's context to help you implement it with the right constraints. Minimize the creation of new components: explore the codebase and reuse existing components and design system when possible.

Prompt you can copy

Execution prompt · Source text。ChatGPT: initial mock request

This block is the prompt. Ads are never placed here.

Turn this [user story/set of user feedbacks] into a UI mock for a feature that would solve the problem, using these sources as context:
- @slack [channels or thread links]
- @linear [issue links, project, team, or view]
- @google-drive [research notes, survey export, doc, sheet, or slide deck]

Do that while respecting the current design system and existing UI [provide Figma file or screenshot as reference].

Replace source placeholders and attach design references; step four provides the implementation prompt.

Source

Turn user stories into UI mocks · OpenAI · Web · 2026-01-01

Comments & feedback

Tried this method? Share results, problems or improvements. Comments appear after moderation. Please avoid sensitive information.

Loading…

    Related