什么是AI工作流？我从PRD到视觉稿完整跑了一遍！

一、全文速览图

最近在群里，经常看到大家聊一个事。

虽然在不同公司，但几乎每个人都收到了类似的任务。老板说，你们去研究一下AI工作流，看看设计环节能不能提效。在我的AI群里，也有群友问我，能不能跑个完整流程出来，看看AI到底能不能从需求文档开始，一路到高保真设计稿？也有人说，老板又拿AI来PUA我们了，能不能帮忙写一篇说说它到底行不行？

我懂大家的意思，其实不光是底下干活的设计师想知道AI工作流到底怎么发挥作用，连那些设计负责人以及更高层的老板们，也真的问过我，这块现在到底能怎么弄，能提效多少？

为了说清楚这个事，我打算写一篇从0-1的教程，完整的讲讲啥是AI工作流，用一个尽可能贴近真实工作的案例，从产品需求开始，一直到最后出高保真视觉稿，把每一步怎么做，用什么提示词，踩了什么坑，全都写出来。其实我之前已经写过好多篇类似的了，核心观点大概就是我在群里说的。

不过在跑流程之前，我想先把一个事说清楚，到底啥叫AI工作流？

这个词最近到处都在说，但我发现很多人对它的理解是模糊的，甚至是错的。

传统的APP设计流程大家都清楚，产品先写PRD需求文档，然后交互出交互框架，接着UI出视觉稿，动效出动效方案，最后开发把所有东西实现出来。这条链路上每个角色负责一段，一个接一个往下传。

AI工作流，说白了，就是在这条链路的每一个环节里塞进AI做一些能提效的事，比如设计过程中用skill，给你做标准化输出，就是一种AI工作流。

其实链路本身没变，每一步该做的事还是得做，只是每一步里面那些耗时的执行工作，被AI压缩了。也好理解，比如以前我做过前端，把页面转化为html、css啥的，要考虑切图，还要考虑各种兼容性跟适配，手写起来还是挺麻烦的，现在有了AI几乎不大需要手写了，这就是提效。

但步骤之间的衔接和判断，从目前来看，这些还是得人来做的，AI帮不了。所以我觉得对AI工作流的正确理解是，每个节点内部提效，节点之间还是靠人。

做项目用AI工作流，流程链路越长，AI的效率反而越低。这跟你用豆包闲聊是完全不同的。做项目的时候，AI没法理解你项目里的复杂背景，团队协作中各种节点的上下文，跨部门的沟通历史，老板上周刚改的方向……这些东西AI很难知道，它就永远差点意思。

那些说靠AI就能打造一人公司、全流程无人值守的说法，至少在设计这个领域，还差得远。我做的事情更务实一点，就是把每一个节点单独拎出来，看看AI在这个具体的节点上到底能帮多少忙。

概念聊完了，来点实在的。

我今天就拿自己的一个真实需求来跑这个流程。假设我要做一个彩云译设计的个人作品展示APP，就是把我公众号的内容、作品案例、设计方法论、AI这些东西，做成一个移动端的展示应用。之所以选这个案例，原因是大家都能理解这个需求，而且你完全可以把它换成你自己的作品集APP、或者你公司的某个产品，方法是想通的。

以下案例中的所有文档，实现demo，我都上传到了 https://github.com/ColourCloudSky/AI-.git 上。如有需要，可以自行下载，仅供参考。这篇文章所有的提示词和流程，你可以直接拿去用。把彩云译设计换成你自己的项目名字，方法是通用的。

二、产品PRD

我们从第一步开始，PRD。

真实项目里，产品经理给你的东西不会只有一句话。再小的公司，产品至少也会给到一个功能框架，告诉你这次要做哪些核心功能、有哪些参考竞品、大概的优先级。只是到了交互细节和视觉细节这一层，产品经理给不了，这才是设计师要填的。

这一步的关键方法，不是让AI帮你从0写PRD，而是让它来追问你。这一步，我最常用的是claude，因为它最懂人话，也足够理解我的意思。

我给claude发了这段话：

我要做一个叫彩云译设计的个人设计作品展示APP。
产品经理给到的功能框架大概是这样的，核心功能包括作品案例展示（图文和视频）、设计方法论文章阅读、关于我的个人介绍、设计资源下载。
竞品参考了Behance和Dribbble的个人主页模式，但要更轻量，不需要社交功能。
先不要直接写PRD文档，你用资深产品经理的视角，问我10个你认为最关键的问题，帮我把需求想清楚。

注意最后那句，先不要直接写PRD文档。这句话非常重要。你不加这句，AI会直接冲上去给你输出一堆模板化的内容，看着有模有样，但全是它基于通用假设填充的，要改的地方会非常多。

加了这句之后，Claude会反过来追问你一堆具体的问题，这些问题有些你之前想过，有些确实没想到。这个被追问的过程，就是在帮你把模糊的想法变成清晰的决策。比如它的第2个问题，就让我觉得我应该是要做一个网站而不用去做一个APP。等我把所有问题都回答清楚了，再让AI把结合回答整理成结构化的PRD，出来的东西跟直接说帮我写个PRD完全不是一个级别。

这一步通过跟AI对话预评审，能省好多时间，但核心的思考和决策那部分一分钟都没省。该想的还是得想，AI只是帮你把想好的东西快速变成文字。

三、交互设计

回到流程上，PRD有了，下一步该做交互设计了。

这一步我还是在Claude里做的，直接在上一轮对话的基础上继续。我发了这段话

基于上面的PRD，帮我梳理这个网站的信息架构和全局导航结构，
然后针对首页、作品详情页、文章阅读页、关于我这几个核心页面，分别输出交互流程描述。
每个页面要说清楚，页面里有哪些模块，模块之间的层级关系，用户的主要操作路径，以及页面之间的跳转逻辑。
用纯文本描述就行，不用画图。

为什么我说不用画图？因为让AI在纯文本对话里生成信息架构的文字描述，质量反而比让它直接画线框图要高。AI的语言理解能力是强于视觉生成能力的，你先拿到一份靠谱的文字版交互说明，后面再用它来指导视觉生成，效果会好很多。

这里就体现出前面说的那个问题了，链路一长就会偏。因为PRD是在上一轮对话里生成的，AI记得上下文，所以从PRD到交互这一步的衔接还算顺滑。但如果你在一个新的对话窗口里做交互，把PRD复制粘贴过去，你会发现AI对PRD的理解会有微妙的偏差。同样的文字，不同的对话上下文里，AI的解读就是不一样。所以我的建议是，PRD和交互尽量在同一轮对话里完成，减少信息在传递过程中的损耗。

Claude给我输出的交互说明还挺细的，不是那种泛泛而谈的框架，该有的页面内容跟逻辑都有了。

这一步我需要做的修改，主要集中在几个AI想不到的地方。比如它一开始把联系我做成了一个独立页面，我改成了全局弹窗，因为联系行为不应该打断用户当前的浏览。但到了关于我页面，联系信息已经直接展示在底部了，再弹窗就多余了，所以我又把这个页面的联系我按钮改成锚点滚动到底部。还有，它漏掉了从作品详情页返回列表时要保持滚动位置和分类tab状态这个细节。这些东西如果不自己补，体验就会差一些。

交互这块AI能帮到什么程度？我觉得对于一个有经验的交互设计师来说，AI的输出算是一个还可以的起点，大概能覆盖你60%的思考。但如果你本身不太懂交互，看AI的输出你可能觉得已经很好了，实际上里面有很多细节是经不起推敲的，还需要按你自己想做的产品目标补一些逻辑。

AI确实能快速出框架、写描述、搭流程，但很多判断题，比如这个功能到底应不应该做、这个流程的核心路径到底该怎么取舍、用户在这一步最可能卡住的地方在哪，这些AI还不行。

四、视觉设计

好，现在到了最关键的一步，视觉设计。这一步最强依赖的其实是需求理解能力+审美。

前面说的链路偏移问题，也在这一步体现得最明显。因为你不可能把前面的PRD和交互说明完整地塞进AI对话里，你只能挑关键信息喂给它。这个挑的过程，就是你在做翻译和压缩，信息必然会有损耗。所以你会发现，AI出来的东西跟你脑子里想的总是有差距，不是AI不行，还是我前面说的那个原因，它接收到的信息就不完整。

我给AI的第一轮提示词，直接贴出来。

帮我设计一个叫彩云译设计的个人设计作品集网站的首页。
这是一个PC端优先、响应式适配移动端的站点。
整体风格要求，内容优先，大面积留白，让作品图片成为页面主角，专业克制不堆装饰元素。
配色以深色系为主，用一个亮色做点缀色。
页面结构从上到下依次是，顶部固定导航栏（左侧Logo彩云译设计，中部四个导航项作品集/方法论/资源/关于我，右侧高亮的联系我按钮），然后是Hero区域（占首屏60-70%高度，包含个人身份信息和一句话职业定位，配一张高质量视觉主图作为背景），接着是能力标签导航（UI设计/动效设计/3D设计/品牌设计四个横向标签），下面是精选作品网格（6-8张卡片，每张包含封面图、项目名称、分类标签，PC端每行3-4张），再往下是快捷入口区（设计方法论、设计资源、关于我三个分栏入口），最后是底部CTA区域（一句引导语加联系我按钮）和页脚。
请直接生成高保真视觉设计。

这里我会用同样的提示词分别发给claude design，GTP 5.5和gemini 3.5flash，把它们三个出的图对比看效果，选最好的来用。

Claude design。直接生成了一个可以交互的首页demo，审美一般。

GPT5.5。只是图片，但效果还可以。说实话，我感觉最近GPT在生成图片这块的能力还是有些下降，感觉有点降智了，尤其是在一些细节方面，比刚出的时候差的比较多。

Gemini 3.5flash。跟claude一样，也是一个可点击的网页demo。审美比claude design要好一些。

后续优化的话，可以参考我之前的教程：

这里就不赘述了，不是今天文章的重点。

五、开发实现

好，视觉稿有了，接下来是最后一步，开发实现。

这一步我用的是codex，上面设计稿我选了GPT生成的图，目前看起来效果稍微好一些。核心思路是，把GPT生成的图片作为参考，让Codex帮你把它转成一个真正能跑起来的前端代码。

我给Codex发的内容大概是这样：

我有一个个人作品展示APP的设计稿，以下是首页的效果图。
帮我还原成可交互的网页效果，要求保持设计稿的视觉效果，支持移动端响应式。

Codex 的输出速度很快，基本上很快就能把效果还原出来。跑起来之后，视觉效果跟效果图还原度大概在85%左右。剩下的15%主要是一些间距微调、字体渲染差异、还有一些动效细节需要手动处理。

如果你自己有前端基础，这一步会快很多。如果你完全不会代码，也可以用大白话跟它一点点的说明进行修改，比如截图告诉它问题，然后再改会更快，图比文字更准确。

到这里，整个流程就跑完了，对比传统流程，效率确实会高很多。

但是，请注意这个但是。

这个效率大提升有一个大前提，就是你本身得有足够的专业判断力。而且我这个案例还算简单的，一个个人作品集网站，没有复杂的业务逻辑。如果换成一个真正复杂的商业项目，需要你做判断的地方会成倍增加，AI能帮的比例会大幅下降。

如果你是一个有经验的设计师，AI的输出你看一眼就知道哪里不对、需要怎么改，这个时候它确实是超级好用的效率加速器。但如果你是一个刚入行的设计师，AI输出的那个看上去80分的东西，你可能觉得已经很好了，实际上放在真实的商业项目里，图标的精细度、间距的微妙处理、配色在不同场景下的一致性……这些AI目前都还不大行，而这些恰恰是决定一个产品看起来是专业还是业余的关键。

AI工作流说到底，就是让你可以把时间花在更值得花的地方。以前你80%的时间在搭框架、排版、做基础的视觉处理，现在这80%可以压缩到30%甚至更少，你多出来的时间可以用来做更多的方案探索，更精致的细节打磨。

以前你靠执行速度就能在团队里有价值，以后执行速度被AI拉平了，你的竞争力变成了审美判断力、创造力、以及对业务和用户需求的深度理解。

顺着这个想多说几句。我之前也在群里说过，AI工作流这个事，真正应该焦虑的其实不是底下干活的设计师，而是那些只会管人不懂业务的管理者。AI把执行层的效率拉上去之后，中间那一层传话翻译的角色就变得可有可无了。

好了，最后来做个简单的回顾。我想把每个环节很实在的说说我的感受。

PRD这一步，核心方法是让AI帮我们完善逻辑，补充很多我们可能想的不够全的地方。它帮你把模糊想法变成清晰文档很快，但前提是你自己得先把问题想清楚。

交互这一步，AI能给你一个还可以的起点，大概覆盖60%的思考，但缺乏对真实用户场景的深度理解，但我自己对交互也不是太专业，交互大佬们可以多留言说说看法。

视觉这一步，GPT跟Gemini，感觉都还能看看，参考参考，claude design基本上还不大行，主要是审美太差。但我觉得，目前这些AI对视觉，尤其UI上真正的帮助都还比较有限，主要可能就是参考参考，实际还不如figma上自己画，这个观点我在群里跟文章里都说过很多次。

代码实现这一步，codex能快速把设计稿转成可运行的前端代码，还原度已经很不错了。对于有前端基础的设计师来说简直是神器，但对纯设计师来说可能还是需要开发同事配合。

再强调一遍，不要指望AI把整条链路一口气跑通，现在还没到。现阶段AI工作流的正确姿势是，把它拆成一个一个的节点，每个节点里找到AI能帮忙的具体环节，用好了确实提效。但节点之间的衔接、判断、取舍，全部还是你的事。AI确实能快速出画面、搭流程、写文档，可真正关键的问题，基本都解决不了。

我自己的感受是，这套流程最大的价值不在快，在于低成本试错。

以前你要验证一个设计方向，从画线框到出视觉可能要一两天，如果方向不对，这一两天就白费了。现在你用AI，一个小时就能出一个高保真方案，不行就推翻重来，再来一个。你可以在同样的时间里探索三四个完全不同的方向，然后从中挑出最好的那个来精修。

这才是AI工作流真正的杀手锏。不是替你做决定，是让你有更多的选择去做更好的决定。

就像哈佛商学院教授 Karim Lakhani 在《哈佛商业评论》中说的那样：AI不会取代人类，但使用AI的人会取代不用AI的人。

https://hbr.org/2023/08/ai-wont-replace-humans-but-humans-with-ai-will-replace-humans-without-ai

我觉得AI之于设计师，也是同样的逻辑。

AI不会消灭设计师。但那些拒绝学习、拒绝调整工作方式的人，会在接下来几年里越来越被动。不是因为AI比你强，是因为会用AI的同行比你快了三四倍，而你还在用老方法一个像素一个像素地磨。

当然了，快不是唯一的标准。好的设计永远需要对人的理解、对细节的敏感、对美的追求，这些东西AI现在做不了，未来也很难做到。但如果你连那些AI能做的事都不愿意交给它，你花在真正重要的事情上的时间就更少了。

还记得文章开头群里朋友问我的那个问题吗，AI工作流到底行不行？

我现在的回答是，行，但没你想的那么神。它是一个特别好用的加速器，前提是你自己得先会开车。

工具永远是工具，有趣的是使用工具的人。

现在这些工具就摆在那里，免费或者每个月一两百块钱就能用上最好的。差别只在于，你是站在池塘边看别人摸鱼，还是自己也卷起裤腿下去试试。

欢迎关注作者的微信公众号：「彩云译设计」