AI编程的新思路：从 UI 倒推 PRD，让 PRD 可视化

Timzaak 2026-05-17 15:01 1

最近在用 AI 做 vibe coding，走的是常规流程：先写用户故事和 PRD，然后后端，再前端，最后演示验证。东西能跑起来，但我逐渐发现一个核心问题——最终的 UI 交互体验很差。

PRD 本身对人就不太友好。命名、流程描述这类内容很难直观审查，自己写的东西都不想多看几遍，更别说指望 AI 严格执行了。结果就是最终产品与预期差距很大，而且不知道从哪里着手去改。

我试着换了个角度：能不能不先从 PRD 切入，而是从 UI 和交互切入？

具体来说，先明确要做什么，然后定义界面长什么样、用户如何操作，确认有哪些页面以及每个页面的核心功能。让 AI 生成页面之后，通过视觉快速判断哪里缺东西，再让 AI 基于这个页面去反向理解和转译 PRD。这比先写一堆文字描述要高效得多。

最近有个流行的做法是让 AI 直接输出 HTML 而不是 Markdown——本质上是借助视觉形态快速确认 AI 的理解是否正确。相比之下，逐行审查代码的效率确实很低。

而且从 UI 倒着推还有一个好处：减少误解和返工。目前我改一个交互点，往往要牵连后端逻辑一起调整，一套修改下来三四个小时，Token 消耗在千万级别（即使是国产模型，换成最先进的也得大几百万）。验证流程和后端测试这些环节一样也省不了。

基于这些经验，我设想了一套尚未实践的新工作流，这里写出来供讨论：

第一步，不写完整 PRD，而是先做一个 MVP 级别的描述。内容包括：若干 HTML 页面，页面上带有标注性注释或说明文字，甚至可以包含简单的 JS 交互示意。把这份材料交给 AI，告知需要调整的地方和关注的核心点。同时，把与 AI 的交互历史保存下来。

第二步，基于上述视觉材料和对话记录，重新生成一份 PRD。我把它称为“AI 时代的 PRD”——以可视化为核心，而非文字。别人一看这份 PRD，就能大致想象出产品的功能和样子。它与最终产品的差距基本只在于：功能的完备性、UI 交互细节的打磨，以及一些工程化内容。

更进一步，还可以让 AI 针对用户故事生成一个简短的交互视频：你口述整个操作流程，AI 输出演示视频，再结合文档重新整理。这样产出的 PRD 既有视觉又有动态演示，能大幅减少理解偏差。

最后，再借助 AI 的代码工程化能力，将这份“可视化 PRD”转译成最终产品。

这套思路我还没有真正落地，但感觉方向值得一试。

最新回复 (19)

pony 05-17 16:38

1楼

哈哈，我才发现我一直是这么干的，永远是先做UI ^-^
坤坤小只因 05-17 16:41

2楼

方向不错,确实可以考虑尝试一下 ^-^
HelloKitty666 05-17 16:43

3楼

我都是让codex生成一套ui,然后再让claude进行图片识别
Timzaak 楼主 05-17 16:46

4楼

codex 生成的UI 是 html 还是图片？好做微调吗？
HelloKitty666 05-17 16:47

5楼

直接就是图片呢，我看布局很不错的哦，你可以先给要求，再让他生成图片，差不多弄成原型图了
Timzaak 楼主 05-17 16:49

6楼

效果怎么样？重复调整的次数多吗？
Timzaak 楼主 05-17 16:52

7楼

如果长期迭代的话，会如何存储这些图片？会把它放到 GitHub 里面做版本管理，还是说一次性用？
pony 05-17 16:52

8楼

可能我需求不是很复杂，基本都不需要调试，codex能精准的进行对接，而且还能自主适配样式
Timzaak 楼主 05-17 16:53

9楼

哇哦，我得试试，看起来 very good
poinory 05-17 16:56

10楼

和我这边的在做的流程差不多，就是需求直接和 AI 聊，先出一个原型 html，然后检查交互和展示内容进行微调，调整后开始根据资料和html输出 prd。然后让AI出接口契约，review微调一下，前后端任务拆分，每个任务都有对应的测试和验收，看下没啥问题，再让AI并行开发。
𝓺𝓾𝓷𝔃𝓱𝓸𝓷𝓰 05-17 17:56

11楼

我就是这么干的，但是没有更进一步让他生成视频。整体流程下来效果还不错，prd写的比自己写的好很多，而且最重要的是快！中间省去了很多时间！最后把生成的HTML文件（或者图片）与prd一起给AI，直接开发。效率快很多，效果也不错，能有个七成效果，剩下的人工再调一调就ok了
lccong 05-17 17:58

12楼

不就是之前的先做原型,再开发?你直接把原型给AI看看行不行?
半山 05-17 18:15

13楼

我最近也开始这么干了，先生成ui, 再倒推
Cansher 05-17 18:46

14楼

佬友的这个思路不错，原来先写后端在写前端搞到后期一直调整界面调整界面。
Timzaak 楼主 05-17 19:46

15楼

我的实际意思是： PRD 不再单纯是文档、原型图，应该是 HTML 这种 AI 可理解、可修改、可版本化的。

最重要的是人类可快速理解。
ihupoo 05-17 20:46

16楼

最节约成本的办法就是先prd+ui，再开发。反过来做最终改ui挺痛苦的，而且改ui这块可能会导致功能变动和重设计，ai留下的多余代码会比较多。

本质上都是脑海里有完整的产品设计和概念后，把这些都给到ai，殊途同归，节约一点是一点
Timzaak 楼主 05-17 20:49

17楼

每次改动完，都会运行 /simplified 简化代码，效果还行。
BA nana 05-17 20:53

18楼

感觉想法有点像，用 html 和 ui 来直接对齐需求，再写 prd

本帖使用社区开源推广，符合推广要求。我申明并遵循社区要求的以下内容：

我的帖子已经打上开源推广标签：是
我的开源项目完整开源，无未开源部分：是
我的开源项目已链接认可 LINUX DO 社区：是
我帖子内的项目介绍，AI生成、润色内容部分已截图发出：是
以上选择我承诺是永久有效的，接受社区和佬友监督：是

以下为项目介绍正文内容，AI生成、润色内容已使用截图方式发出

先上三色…
zikhir 05-17 21:01

19楼

我也是这个思路，先出原型，再和AI讨论功能实现