原文核对：2026-10-13 · 中文正文 · 英文提示词与演示
场景定位
汇集 Slack、Linear、Drive 的反馈，整理用户故事与约束，用 ImageGen 生成 UI 草图，选定方向后实现原型。
- 难度
- 入门
- 时间跨度
- 30 分钟
适合用于
- 把分散反馈转成视觉方向的产品团队。
- 希望设计草图依据真实材料的设计与工程团队。
- 需要依据用户反馈快速迭代的团队。
相关工具
搜索获准频道与会话中的用户故事、痛点、引用和问题。
Slack ↗提取功能请求、缺陷、标签、优先级和项目背景。
Linear ↗读取研究、通话摘要、文档、表格和幻灯片。
Google Drive ↗获取设计上下文、截图与设计系统参考。
Figma ↗根据故事与约束生成 UI 草图和变体。
将选定草图实现为 Web 原型并对照验证。
Build Web Apps ↗起步提示词
英文原文 · 可复制后按实际材料修改
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].简介
反馈可能来自 Slack、Linear、Drive 文档表格或客户通话。用户故事有时已明确，有时隐藏在来源中。
ChatGPT 可汇集背景，生成解决问题的 UI 草图；方向确认后，Codex 可在产品中实现。
明确视觉目标
已有清晰故事就直接使用，否则先讨论并从来源中综合。
用图像生成探索几个方向，保留产品信息架构和设计系统约束。
可以提供当前 UI 截图或 Figma 文件作参考。
迭代到满意，变更越聚焦，越容易直接实现。
从草图到原型
选中 Codex、新建对话并重新上传最终图片，不直接延续原 ChatGPT 对话；要求实现草图，Web 应用可选用 Build Web Apps 插件：
官方提示词
英文原文 · 可复制后按实际材料修改
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.展开英文原文对照
Use Codex to gather product feedback from Slack, Linear, Google Drive, normalize it into user stories and constraints, then generate UI mockups with ImageGen. When the direction is chosen, turn the mock into a working prototype.
Introduction
Product 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.
ChatGPT can gather this context and turn it into a UI mock for a feature that would solve the problem. Once you validate the direction, Codex can implement it in the product.
Generate visual truth
If you have a clear user story, you can start with that. If not, you can have a discussion with ChatGPT first, gathering context from different sources and synthesizing it into a user story.
Then, you can ask ChatGPT to use image generation to create a few mock directions. The mocks should preserve the product’s information architecture and design-system constraints.
If helpful, you can provide screenshots of the current UI or a Figma file as reference.
Do 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.
Move from mock to prototype
Use the final mock image that you want Codex to implement. Select Codex, start a new chat, and reattach the image rather than continuing the ChatGPT chat directly. Then ask Codex to implement the mock—optionally using the Build Web Apps plugin if you’re building a web app—to turn it into a working prototype:
官方提示词
英文原文 · 可复制后按实际材料修改
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.