ChatGPT创意设计AI 评分 · 待评分AI 辅助编辑·未发现明显提示词注入风险Web

用户故事变 UI 稿：先合成约束，再出图对齐设计系统

从 Slack/Linear/文档收反馈，生成尊重现有 IA 与组件的 mock，再交 Codex。

有一点经验步骤提示词流程
给谁
产品 / 设计 / 工程
你会得到
可评审的 mock 方向
你需要
ChatGPT + Figma + ImageGen

硬约束

汇总故事 → 对齐设计系统参考 → ImageGen 出 2–3 方向 → 选定后新开对话给 Codex。

他们做了什么

官方教程介绍从分散反馈整理用户故事、结合现有设计参考生成视觉稿，再将选定图交给新的 Codex 对话实现原型。它是操作教程，未展示某个团队的已验证实施结果。

效果如何

这个工作流让设计师和产品经理在工程开工前，就能获得一套已与当前设计系统对齐、可评审的视觉方案。来源文档将其作为一种流程化的交接方法呈现，并未提供设计到代码的转化速度或实现准确度等经核实的指标。团队仍需人工核验生成代码与所附 Figma 参考的一致性。

值得知道

原文要求在新的 Codex 对话重新附图，并尽量复用已有组件与设计系统；没有说应丢弃必要的设计约束。原文不保证出图数量或实现速度。

步骤

  1. 收上下文

    已有清晰用户故事时直接提供；没有时，先与 ChatGPT 讨论，将获准读取的 Slack 频道或讨论串、Linear 工单或项目、Google Drive 研究笔记、文档、表格或幻灯片汇总为用户故事与约束。替换下方原文启动提示词的占位符。

  2. 锁设计系统

    附上当前 UI 截图或 Figma 文件，要求保留现有信息架构与设计系统约束。只使用已连接且获准访问的资料。

  3. 出多方向

    请 ChatGPT 使用图像生成功能创建几个 mock 方向，持续迭代直到选定满意的最终图。控制修改范围，更有利于直接实现；原文未规定必须生成两到三个方案。

  4. 选定后新开聊

    选择 Codex，新建对话并重新附上最终 mock 图，不直接延续之前的 ChatGPT 对话。提供目标仓库及必要约束，使用本步原始提示词要求检查代码库、尽量复用已有组件与设计系统。网页项目可选 Build Web Apps 插件。

    运行提示词 · 来源原文。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.

可复制提示词

运行提示词 · 来源原文。ChatGPT: initial mock request

这一段是提示词，页面不会在这里插入广告。

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].

替换来源占位符并附设计参考；第四步提供实现提示词。

来源

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

留言与反馈

试过这个方法吗？分享效果、遇到的问题或改进建议。留言审核后公开，请勿填写敏感信息。

正在加载…

    相关用例