使用Codex 的 Superpowers + Product Design 快速生成交互式原型

一、背景

事情是这样的。

前两天有个想法一直绕在脑子里，做一个能帮开发者自动分析日志的 Agent。

就是把报错日志往里一丢，它不光告诉你哪里错了，还能顺带分析出根因、给出修复建议，甚至能跨时间段关联历史故障。

想法转完这一圈，兴奋了大概三十秒。。。

然后就想到了接下来要面对的事情。

二、PRD

做技术出身的人，产品感多少有一点，但要凭空把一个完整的交互流程描述出来，还要让设计师能看懂、能执行，这个转换成本真的很高。

按以前的流程，光这一步就要折腾一两周。

那时候真的愣在那里想，有没有更快的方式。

然后就想起来了，Codex 那边不是有两个插件吗，一个叫superpowers，一个叫Product Design，一个负责想清楚，一个负责搭交互。

要不试试用它们来跑一遍全流程？

在 Codex 里直接 @ 了 superpowers。

@superpowers 作为资深架构师和经验丰富的产品经理，请通过向我提问的方式，帮助我澄清需求、挖掘边缘场景，最终共创一份高质量的PRD。 当前任务是：设计并实现一个完善的"日志分析Agent应用"。。 请逐一提出具体且有引导性的问题，帮助我逐步完善需求。

它真的就开始问问题了。

而且问的方式跟大多数人想的完全不一样。

不是第一次写 PRD 的人，以前都是自己列功能清单，觉得把「用户能上传日志」「Agent 能自动分析」这种话写上去就算完事了。

但 superpowers 是这样问的。

这个 Agent，用户第一次用的时候，他对「日志分析」的核心目标是什么？

他会不会以为上传完就能直接出结果？

如果他等了三分钟还没响应，他会去做什么？

这些问题一出来，突然就愣住了。

之前想的那个「功能清单」，根本不是需求。

那只是想要的功能，不是用户真正会用到的东西。

然后它就一个问题一个问题地问，一个一个回答，答着答着，PRD 自己就长出来了。

它不是让先写 PRD 再审核，而是让 PRD 在问答的过程中自然形成。

答完一轮，它就更新一轮文档，能实时看到 PRD 在变厚、在变具体。

这个感觉很奇妙，就像有一个资深的产品合伙人坐在对面，他不替你做决定，但他问的每一个问题都逼你把模糊的东西想清楚。

最后出来的 PRD，扫了一眼，核心功能、边缘场景、交互逻辑、甚至数据流向都写进去了。

如果自己写，可能要花两天，还不一定想得到那些边缘场景。

PRD 有了，下一步是原型。

三、原型

这一步以前是最痛苦的。

你要跟设计师说「这个地方要有一个上传按钮」，设计师说「好的」，然后过两天给你一版，你说「不对，我的意思是拖拽上传」，设计师说「你当时没说啊」，然后推翻重来。

这种拉锯经历过太多次了。

在 Codex 里 @ 了 Product Design，直接把刚才的 PRD 丢给它。

@Product Design 设计并完善"日志分析Agent应用"的交互式原型。作为资深产品经理与UI/UE设计师，基于需求文档创建高质量HTML交互式原型，在关键功能节点上标注需求说明，确保交互逻辑清晰、视觉层次合理，最终输出可直接演示的完整原型文件。

然后它问，要几种视觉方向。

说，先给三种吧，选一个。

它就真的给了三种。

偏科技感的深色系、偏简洁的浅色系、还有一个偏数据可视化的信息密度高的方向。

当时选了第二个。

因为这个工具的目标用户是开发者，太花哨反而干扰。

选完之后它就开始生成了。

以前对「AI 生成原型」这件事是存疑的。

总觉得它出来的东西要么长得很模板，要么交互是死的，点不了、转不动，只能看个静态图，那跟画在纸上有什么区别。

但这次出来的结果，说真的，有点被震到了。

怎么说呢。。。？？

它不只是画了几个页面，它是把交互逻辑也做进去了。

能点击按钮，能切换页面，能在关键节点上看到需求说明的标注。

就像真的可以拿去给老板演示、拿去跟开发对接的程度。

当时就愣住了，说实话也没想到能到这个程度。

整个流程跑完，算了一下时间。

从在 Codex 里打出第一句「帮我澄清需求」到最后拿到可以演示的完整原型，花了大概不到一个小时。

这里面还包括跟 superpowers 来回问答的时间、选视觉方向的时间、以及最后盯着原型看来看去觉得「这个地方好像还能再调一下」的时间。

如果用传统方式做这件事，这一天就别想干别的了。

值得写下来，不是因为快。

快当然重要，但更重要的是，它改变了「想法到原型」这件事的门槛。

以前要做一个产品原型，要么自己学 Figma，要么找设计师合作，要么就用一些很模板化的原型工具，出来的东西要么不够专业，要么不够灵活。

但通过 superpowers 先把需求想清楚，再用 Product Design 将其转化为可交互的原型，这个组合实际上将一件需要多角色协作的事情，压缩到了一个人、一台电脑、一个下午就能完成的规模。

这个变化是真实的。

不是说设计师要失业了，而是说，当有一个想法的时候，不再需要等任何人，自己就能把它变成一个「别人能看到、能理解、能给你反馈」的东西。

这个「能给别人看」很重要。

因为想法在脑子里的时候，它永远是完美的。

只有把它变成原型、拿给别人看的时候，才会发现，「哦原来这里逻辑是断的」「哦原来用户根本不会这样操作」。

原型的核心价值不是「好看」，是「能测试」。

回头看，superpowers 在整个流程里扮演的角色，其实比「帮我写 PRD」要深得多。

它做的是需求澄清。

这件事听起来简单，实际上非常难。

难在哪里呢，难在大多数人在描述一个产品想法的时候，说的都是解决方案，不是需求。

会说「我要做一个日志上传功能」，但 superpowers 会问「用户为什么需要上传日志？他在什么场景下会产生这个需求？如果他的日志文件有 10 个 G，他还会用上传的方式吗？」

被问到第三个问题的时候，才会意识到，原来「上传日志」这个解决方案，只适用于特定场景。

如果用户是运维工程师，他面对的日志可能是分布式的、实时的、几十个 G 的，那「上传」这个方案本身就是有问题的。

superpowers 的价值就在于，它用提问的方式，逼你把解决方案背后的真实需求给挖出来。

挖出来之后，PRD 就不是「功能清单」了，而是「用户在什么场景下遇到什么问题、我们提供什么价值去解决它」的完整叙事。

Product Design 这边也有一个细节让人印象很深。

它生成原型的时候，会在关键功能节点上标注需求说明。

这个细节很重要，因为原型不是只给自己看的。

要拿给开发看、拿给老板看、拿给投资人看，如果只看页面，他们不知道这个按钮为什么要放在这里、这个交互逻辑背后的需求是什么。

有了标注，原型就变成了一个「可沟通」的东西。

另外就是它默认给三种视觉方向这个设计，很人性化。

因为大多数人在做原型的时候，其实不知道自己想要什么风格，直到看到具体的选项才知道「哦我要这个」。

给选项，而不是让从空白开始描述，这个设计思路本身就很产品化。

现在回头看这件事，觉得最有意思的不是「AI 能帮我做原型」这件事本身。

而是「人和 AI 的协作方式」在悄悄发生变化。

以前用 AI 工具，都是描述清楚需求，它帮执行。

但 superpowers + Product Design 这套流程里，AI 不是在执行指令，它是在跟人一起把一件本来很模糊的事情，一步一步变清楚、变具体、变可执行。

superpowers 帮「想清楚」，Product Design 帮「做出来」。

这两个动作连在一起，就是一个产品从 0 到 1 最核心的东西。。。 = =

这套协作方式，值得让更多人知道。