实测用 Google AI Studio 做产品原型设计，终于不用跟研发扯皮了

做了多年产品，跟研发沟通最头疼的一件事就是：我画了一个原型，研发看了说”懂了”，结果做出来跟我想的完全是两回事。

然后就是反复拉扯——

“这个按钮点了应该弹个筛选面板的啊？”

“你原型上没写啊，我以为就是刷新一下。”

“那这个下拉框选了之后，下面表格要联动过滤的吧？”

”……你也没说啊。”

每次改完一版，研发又问”那这个呢？那个呢？“，一来一回，一周就过去了。

我试过墨刀、Figma，流程规范了很多，但本质上还是个”静态稿”——你可以做跳转动画、做 hover 效果，但那种复杂的交互逻辑（选了这个之后那个跟着变、点了这里弹出什么、数据怎么联动），研发看了还是得靠猜。直到最近试了 Google AI Studio，我发现这个问题终于有了一个新的解法。

先说结论：AI Studio 做不了 Figma 的活，但它解决了一个 Figma 解决不了的问题——让研发一眼看懂交互逻辑。

AI Studio 做原型到底能干啥

ai studio

用自然语言描述你想要的东西，它直接生成一个能运行的前端页面。不是设计稿截图，不是线框图，是真的 HTML/CSS/JS，打开就能点、能操作、能交互。

它能做的几件事：

从对话直接生成页面。你告诉它”我要一个后台管理页面，左边是导航栏，右边是数据表格，上面有筛选器”，它几十秒就能给你一个能看的页面。

最牛的是 Generative UI，这是 AI Studio 跟墨刀、Figma 最大的区别。普通的原型工具只能做”看起来在动”的效果，你设一个跳转，点页面 A 跳到页面 B，但中间的逻辑是假的。AI Studio 的 Generative UI 生成的是真正可交互的 UI。比如你说”加一个时间范围筛选器，选了之后图表要跟着变”，它生成的页面里，你真的选一个时间范围，图表的数据就跟着更新了。这不是动画模拟，是真的有逻辑在里面。研发打开一看，不用脑补”点这里会发生什么”，直接点一遍就全明白了。

支持多模态输入。你可以把现有产品的页面截图喂给它，让它先 100% 还原，然后在这个基础上改。这一点很实用——大多数时候我们不是从零做原型，而是在已有的产品上加功能。

支持标注模式。你可以直接在预览界面上高亮某一部分 UI，然后告诉 AI：”把这个按钮改成深蓝色”或者”在这里增加一个数据筛选器”。AI 会实时重写代码并更新界面。

对话式迭代。”把这里改成红色””加一列””这个按钮挪到右边”——直接说，它就改，改完刷新就能看到。

以前做原型的流程是：写 PRD → 画设计稿 → 前端开发 → 反复沟通交互细节。

现在变成：整理好需求描述 → 丢给 AI Studio → 得到一个能交互的原型。

效率差距很明显。

实测：在一个数据表格页面上加分析功能

下面直接上我实际的操作流程。

背景： 我需要在一个已有的数据表格页面上，新增一个”数据分析”模块。页面本身已经上线了，我需要给研发演示”加了之后长什么样、怎么交互”。

Step 1：截图复刻现有页面

我没有从零开始让 AI Studio 画，而是直接截了一张现有产品的页面图，上传到 AI Studio，然后给了一个 prompt：

“请完全复刻这个页面的布局和样式。”

用的是 Gemini 3 Flash 模型，几十秒就出了第一版。

整体布局、颜色风格、导航栏的位置都还原得不错，但表格的列宽、按钮的间距、一些小图标跟原图有出入。

原图：

产品图

AI studio复刻图：

AI studio复刻图

这时候不用慌，接着跟它说哪里不对就行了。比如”表格列宽再调一下""这个按钮应该是圆角的""导航栏背景色深了一点”——一般一两轮就能调到位。

Step 2：在复刻页面上加功能

复刻 OK 之后，我开始加核心功能。prompt 大概是这样的：

“在数据表格上方加一个数据分析模块，包含：一个时间范围选择器（默认近7天）、4个关键指标卡片（总访问量、活跃用户、转化率、营收）、一个趋势折线图。点击指标卡片时，折线图切换显示对应指标的数据趋势。选择时间范围后，所有指标和图表数据要联动更新。”

这一步等待时间大概一分钟多一点。生成出来之后，我点了一下时间范围选择器，选了”近30天”——指标卡片的数据变了，折线图也跟着更新了。 再点不同的指标卡片，图表也真的切换了。

效果展示

这就是 Generative UI 的价值所在。如果我拿墨刀画这个页面，研发看到的只是一个静态的图片——他知道有个筛选器，知道有个图表，但”选了筛选器之后图表怎么变”这个逻辑，他还是得猜。而在 AI Studio 里，他自己点一遍就全明白了。

Step 3：迭代修改——顺利的和翻车的

改小东西的时候体验非常丝滑。“把这个卡片的字号大一点""折线图换一个颜色""加一个导出按钮”——一句话的事儿，几秒钟就改好了。

但也不是没有翻车的时候。

翻车一：页面局部画错。

比如复刻数据表格的时候，某一列宽度突然变得很窄，内容截断了；或者要求加三个操作按钮，结果只渲染出来两个。不过再 prompt 提醒一次一般就能修好，小问题。

翻车二：交互逻辑理解偏差——这才是最大的坑。

我在加筛选功能的时候，需求其实挺复杂的——选了”地区”之后”城市”要联动、选了”产品类别”之后图表指标要变。但我给 AI 的 prompt 只写了一句：

“加一个筛选面板，有地区、城市、产品类别三个筛选条件，能对表格数据进行过滤。”

结果 AI 很”聪明”地做了三个完全独立的下拉框，地区选”华东”，城市照样选”成都”——联动？不存在的。

然后我开始一行一行纠：修了城市联动，表格数据又不更新了；修了表格，指标卡片又出错了……来来回回十几轮，越改越乱。

后来我换了个方式，花了二十分钟把逻辑整理成结构化文档，一次性喂进去。关键就是写清楚三点：联动规则（谁决定谁）、触发时机（选一个就过滤还是全选完再过滤）、数据影响范围（表格、卡片、图表哪些受影响）。

第一次生成就跟我的预期高度一致。后面只微调了两三轮，十分钟收工。

万一 AI studio改动的不合适，想回到之前的状态，此时可以通过自动保存的版本进行回退。

我的经验总结：

• 简单需求（调布局、改颜色、加按钮）：直接聊天式 prompt，几秒搞定
• 有联动逻辑的需求：必须先整理结构化文档一次喂进去，千万不要边聊边改——你每次只说”改这一个地方”，AI 就在不知道全局的情况下局部修改，改完大概率又把别的地方搞坏
• 用完整截图加红框标注来沟通要修改的地方： 在没有标注模式的AI studio中，可以使用手动完整截图加红框标注来告诉AI要修改的地方，但是一定要注意务必使用完整界面的截图，不要给AI 局部截图，避免页面整体理解偏差。

Step 4：确认终版，交付研发

原型调好之后，我把 AI Studio 生成的页面直接部署成了一个独立的 App，把链接发给了研发同事。

这里有个很实际的问题：AI Studio 需要科学上网才能打开，不是所有同事都能访问。但部署成独立 App 之后，任何人在任何网络环境下都能打开这个原型链接，直接操作、体验交互。比如，你可以把它同步到github，然后自动部署到内网服务器。

跟其他工具的对比

我日常用墨刀比较多，Figma 也接触过，说说 AI Studio 跟它们的区别。

AI Studio vs 墨刀： 墨刀是国内用得最广泛的原型工具之一，操作门槛低，组件库丰富，画原型很快。但墨刀的交互本质上是”假装的”——你可以做页面跳转、做 hover 效果，但那种数据联动、条件筛选的真实逻辑，是做不出来的。研发看了墨刀原型，知道”大概长这样”，但”点了这个之后数据怎么变”，还是得靠猜或者靠文字文档补充。AI Studio 的 Generative UI 补上的正是这块短板。

AI Studio vs Figma： Figma 在设计精度和规范性上是天花板级别的，设计团队用 Figma 完全没问题。但从原型演示的角度看，Figma 面临的同样的问题——研发看到的是静态稿，复杂的交互逻辑靠脑补。而且 Figma 的学习门槛不低，不像 AI Studio 这样写几行提示词就能上手。

总结一句话：墨刀和 Figma 解决的是”画出来”，AI Studio 解决的是”动起来”。 它们不是替代关系，而是互补的。

什么场景适合用，什么不适合

经过这些实战，我大概摸清了 AI Studio 的舒适区：

适合的场景：

• 在已有产品页面上快速加功能，做交互验证
• 给研发演示交互逻辑，减少沟通成本
• 内部 Demo、快速汇报
• 想法快速验证，看看这个功能做出来用户会不会买账
• 创业早期，快速出 MVP

不适合的场景：

• 需要精确像素级设计稿的项目
• 需要交付生产级代码的场景
• 交互逻辑极其复杂的业务系统

我的最佳实践是这样的： 用墨刀/Figma 做基础页面设计和视觉规范 → 把页面截图喂给 AI Studio 做交互原型验证 → 确认无误后交付研发开发。这套流程跑下来，效率和沟通成本都比以前好很多。

AI 做原型，边界在哪里

AI Studio 做原型最大的价值到底是什么？我觉得不是”快”，而是它逼着你重新想想，“做原型”这件事到底在做什么。

以前做原型，核心技能是”画”——你会用 Figma、会用墨刀、能把想法变成视觉稿，这就是你的竞争力。但 AI Studio 告诉我，“画”这件事，AI 已经能做得又快又好了。

那产品经理的价值到底在哪？

我觉得答案藏在前面踩坑的经历里。你回头看那个翻车二——AI 生成了错误的联动逻辑，我边聊边改改了十几轮越改越乱。问题出在哪里？出在我自己脑子里对需求的理解就不清晰。

真正高价值的工作从来不是”画原型”，而是：想清楚你要什么。

哪些筛选条件、联动关系是什么、选了 A 之后 B C D 分别怎么变。这些逻辑如果在你脑子里是模糊的，不管用 Figma 还是 AI Studio，做出来的东西都会有问题。只不过用 Figma 的时候，模糊的部分会被”静态稿”掩盖，反正看不出来动不动；用了 AI Studio 之后，模糊的部分直接暴露了，因为 AI 会”自作主张”帮你做决定。

某种程度上，AI Studio 倒逼你把需求想得更清楚。这不是坏事。

知道什么该用 AI，什么不该用。AI 做原型很快，但它做不了决策。需不需要这个功能、优先级怎么排、用户场景覆盖全不全，这些还是得人来判断。AI 是执行层，不是决策层。

结构化表达的能力变重要了。以前写 PRD 是给人看的，写得模糊一点，对方也能”猜”你的意思。但给 AI 写需求，模糊就是给自己挖坑，它会严格执行你说的每一句话，但不会读心术。会写清晰的结构化文档、能把复杂逻辑拆解成 AI 能理解的格式，这个能力以后会越来越重要。

说到这里，有人可能会问：AI 会替代产品经理吗？

我觉得短期内不会。但产品经理这个角色的重心在发生变化。以前一个好的产品经理可能同时具备”想得清楚”和”画得好看”两项能力；以后，“画得好看”这部分会被 AI 接管，“想得清楚”会变成唯一的硬通货

不会画原型没关系，想不清楚需求才致命。

至于设计师，我觉得短期影响也不大。AI Studio 做的原型精度还不够替代 Figma，生成的设计也谈不上”好看”。它的价值不在设计层面，而在交互验证层面。但长期来看，当 AI 的设计能力进一步提升，那些只会”画图”、不参与产品思考的设计师，确实会面临更大的压力。

最后说个更大的趋势：“从想法到可交互 Demo”的门槛正在快速降低。 以前一个功能的 Demo 需要产品经理写需求、设计师画稿、前端写代码，现在一个人用 AI Studio 几十分钟就能搞定。这意味着什么？意味着试错的成本大幅下降——你可以花一上午试三个不同的方案，而不是花一周只做一个方案然后发现方向不对。

对于小团队和创业者来说，这是真正的利好。以前大公司的优势是资源多、能并行做多个方案验证；现在一个人借助 AI 也能做到类似的效果。“想清楚”比”有资源”更重要了。

你们平时做原型用什么工具？有没有碰到过类似”研发理解偏差”的问题？欢迎评论区聊聊。

本文由 Zhihu on Obsidian 创作并发布