明天评审要一屏后台,你对着空白规格书不知道先写哪几行
你是产品经理小林。产品定了明天下午的评审,你也打算用 Figma Make 出稿——但文档里只有一行标题,模块清单、禁区、成功标准全是空的。工具没问题,卡在规格书还没冻结,不敢点生成。
这件事,以前和现在怎么做?
想到哪写到哪,生成后再补
- 口头需求 → 直接进 Make 堆形容词
- 模块、禁区、状态屏事后才想起来
- 小样方向错了,只能整屏重滚
先冻结 Brief,再进 Make 生成
- 规格书过审 → 挂约束 → 小样一屏
- 点选精修 + 补状态屏
- 产品 / 设计 / 开发各过一刀
三条路,你走哪条?
「用 AI 做界面」有三种完全不同的生产路径。选错路径,不是技巧问题,是交付物定义问题。
插画 / 氛围图当 UI
用 Midjourney、文生图工具「画一张 App」。好看,但不是可编辑图层、不可对齐组件、不可给开发量尺寸。适合 moodboard,不适合交付。
代码路径:v0 / Lovable 出可跑 UI
交付物是 React/全栈原型时走这条。它解决「能点能演示」,不替代设计系统里的像素治理与评审稿——做 UI 设计默认别从这条起。
设计稿路径:生成 → 可改 → 评审
输出落在 Figma / MasterGo 类画布:矢量、分层、可对齐设计系统。目标是「可评审的界面规格」,不是「能跑的整站」。
分流口诀:本篇场景要交设计评审、进组件库 → 只走右侧设计稿路径。代码路径适合「要可跑演示」的另一条货架——定稿后可串联 v0,但不要用它替代规格书与状态验收。
AI UI 场景:先定「交付落在哪」
选型规则与站内一致:境外大幅领先才默认境外并给国产平替;相当则优先国内可达。UI 设计还要多看一层——输出是不是可编辑、可对齐设计系统、可交接开发。
| 你的主交付 | 默认工具 | 为何这样选 | 何时换刀 |
|---|---|---|---|
| 可评审设计稿 / 设计系统内迭代 | Figma Make ★ | 设计上下文、图层回流、团队协作链路最完整 | 无法访问 Figma → MasterGo |
| 国内团队、要可编辑画布 | MasterGo AI | 生成进画布 + 中文协作 + 代码同步 | 必须对接海外 Figma 组件库时回 Figma |
| 快速发散多方案(可达时) | Google Stitch | 文生高保真探索快 | 定稿与组件治理仍回主画布 |
| 可跑 React 演示 | v0(升级) | 组件级代码质量与工程约定更贴前端 | 只要视觉规格、不要代码时别走这条 |
| 流程 / 低保真原型 | 墨刀 AI | PM 闭环、中文原型习惯 | 要高保真视觉与组件库时升级 |
本场景结论:默认 Figma Make;国内可达优先 MasterGo AI;要可跑原型再升 v0。官方定位是 prompt-to-app:附加设计与图片、对话迭代、点选预览局部修改,并把预览拷回 Figma Design 图层继续协作。正式创建 Make 文件需付费计划 Full 席位(其他席位可在草稿试用)。详见 Figma Make 帮助中心。
前置条件:Figma 付费席位(主路径)或 MasterGo 账号 · 一屏任务卡片(用户、任务、成功标准、平台、禁区)· 至少一种约束输入(组件库 / 品牌色 / 竞品截图 / 线框)· 明确评审人与验收清单。
四类交付别混:探索稿(比审美)→ 评审稿(信息架构 + 状态齐全)→ 系统稿(服从设计系统)→ 可跑壳(能点能演示)。AI 最容易把所有请求压成同一张假截图——先对号你这一次要哪一种。
7 步流水线:把 AI UI 做到可评审
默认在 Figma Make 上跑(国内可达见 MasterGo)。关键纪律:规格书未冻结,禁止开始烧 AI 积分出终稿。粉色必填;黄色选填——四份提示词嵌在对应步骤,按序跑完。
写一屏规格书 ⏱ 15 分钟
在 ChatGPT / Claude / Kimi 等对话工具跑模板 1:用户、任务、平台、模块、成功标准、禁区、参考。给产品/设计过一遍。写清「这一屏完成后用户能带走什么」,禁区至少 3 条。
对号交付类型与工具 ⏱ 10 分钟
探索 / 评审 / 系统 / 可跑壳——只选一类做主任务。评审稿 → Figma Make 或 MasterGo;可跑壳 → 另开 v0,不要挤在同一会话里硬生成。本步无单独提示词——选型见下方「模式选择」。
挂上约束:组件、参考、品牌 ⏱ 10 分钟
在 Figma Make 中附加已有 Design 帧 / 图片;有 Make kit 或库变量就挂上。MasterGo 则上传参考图并选定端类型(Web / 移动)。本步无单独提示词——约束输入见「工具选择」前置条件。
生成小样 —— 只要结构正确的一屏 ⏱ 15–30 分钟
在 Make / MasterGo 粘贴模板 2,附上已批准规格书。要求:模块齐全、层级清楚、假数据标注为示例。方向不对就改规格,不要连环重滚形容词。
点选精修 + 补状态屏 ⏱ 20–40 分钟
模板 3:用 Make 的 Edit / 对话做局部改稿;补空态、加载、错误。需要时把预览拷回 Figma Design 图层,用自动布局与组件替换「野生控件」。
评审闸门 —— 产品 / 设计 / 开发各过一刀 ⏱ 按风险分级
模板 4:产品看任务是否完成;设计看一致性;开发看可切可实现。分享 Make 预览链接或 MasterGo 文件链接,勿只发一张压缩截图。
沉淀可复用 Brief 与模板 ⏱ 每周 30 分钟
把有效规格书、成功提示词、Make 模板 / MasterGo 组件用法写进团队库。连续两次评审因「组件不一致」打回 → 先补设计系统,再开 AI。本步无单独提示词——沉淀对象来自前面各步产出。
与代码路径的分工:v0 / Lovable 适合「能点的壳」;本篇训练「能评审的界面规格」。需要可跑演示时,把已通过的规格书贴进 v0,而不是从零再形容一遍「好看后台」。
主画布选哪条:Figma Make 还是 MasterGo?
两条都能跑本篇同一步骤——按团队可达性与协作链路选一条做主工具,定稿后尽量在同一画布治理。
Figma Make
已有 Figma 组件库、需要图层回流与海外协作时首选。附加 Design 帧 / Make kit,生成后可点选精修并拷回 Design 图层。正式创建需 Full 席位。
MasterGo AI 快搭
国内可达、生成直接落入可编辑矢量画布,支持 Vue / React 代码同步。无法稳定用 Figma 时,用 MasterGo 跑同规格书与同套提示词。
这是二选一,不是流水线。选定主画布后,探索发散可用 Google Stitch(可达时),可跑演示另开 v0——不要把三种交付混在同一次生成里。
第一版很少完美:用管理杠杆改,不靠形容词重滚
模型已经会排常见仪表盘与表单;你要用规格、约束、小样闸门与状态清单,而不是再发明一套「高级感形容词」。
别追求完美初稿。第一版目标是「结构正确、状态有规划、能讲清任务路径」;用模板 3 定向修补,比从头重生省大部分时间。每月抽查 AI 初稿进入终稿的修改率——下降才算流水线变好。
上评审前,用这张闸门过一遍
Demo 可以花哨;进入组件库与开发排期的稿必须吝啬、一致、可实现。
质检不过就迭代,别硬交。任务路径乱 → 回 Brief;缺状态 → 补空态/错误屏;组件打架 → 拷回 Design 图层换系统组件。四项全过再进入导出。
验收过关后:分享预览 → 拷回图层
交付物是可协作的设计稿,不是一张压缩截图。两步都要做。
分享预览链接
Make 预览或 MasterGo 文件链接发给评审方。产品 / 设计 / 开发在同一链接上评论,避免「感觉差不多」的群聊投票。
拷回 Figma Design 图层
定稿后把 Make 预览拷回 Design 文件,用自动布局与组件替换野生控件。MasterGo 则在画布里对齐设计系统组件,必要时导出标注给开发。
两步是流水线,不是二选一。① 分享预览收集评审意见 → ② 定稿后拷回主画布治理。跳过拷回图层直接交截图,是开发说「没法切」的最高频原因。
回顾:AI UI 可评审一屏流水线
下次再说「先出个界面看看」——记住这条短链路即可。
AI 生成的界面规格与假数据仅供评审与方向确认;对外交付前须经设计系统与人审;勿上传含未公开产品策略或客户数据的敏感材料至第三方 AI 工具。
踩过的坑,提前告诉你
覆盖产品、设计与一人团队最高频的卡住点。
按选型规则:在设计系统上下文、图层回流、全球产设研交接上,Figma Make 相对国产仍属大幅领先,故境外作主推。国内不能稳定使用时,用 MasterGo AI 快搭跑同一步骤——它的关键优点是生成进可编辑画布,而不是「出一张图结束」。
官方:正式在项目/团队中创建 Make 文件需要付费计划的 Full 席位;其他席位与 Starter 可在草稿中试用,能力有限制。具体以 Figma Make FAQs 为准;AI 用量走积分/额度机制,注意控消耗。
Stitch(Google Labs)适合快速发散高保真探索;Figma Make 适合落进你们已有 Figma 工作流并继续协作。国内可达性上 Stitch 常不稳定。定稿与组件治理,仍建议回 Figma 或 MasterGo。
可以当 moodboard,不建议当交付。插画模型优化的是「像一张图」,不是「可对齐的组件与状态」。正确用法:出氛围参考 → 把结构约束写进规格书 → 用 Make / MasterGo 生成可改界面。
它们是代码路径:要可运行的 React/全栈壳时用。本篇是设计稿路径。常见串联:规格通过 → Make/MasterGo 定视觉与结构 → 需要演示时把规格贴进 v0。不要用 Lovable 替代设计系统评审。
这是第一稿收敛的副作用。对策:附加你们真实导航与组件;在不做清单里禁止「默认 SaaS 紫」;要求真实字段名;小样通过后再放大。比换十个「更独特」形容词有效。
一屏通过不是终点:让 AI UI 变成团队标准动作
下面 4 个动作把「偶然出张好图」升级为「可复用的设计产能」。
规格书版本号
每屏 Brief 带版本与变更摘要。AI 会话标题写上版本,避免旧约束污染新稿。
组件库优先
高频控件先入库,再让 AI 组装。库越空,生成越像随机皮肤。
评审打回分类
任务 / 一致 / 状态 / 可开发 四类统计。针对最高频类改模板,而不是改审美。
设计→代码接口
定稿规格可导出给 v0 或开发;Make 预览可拷回 Design 图层。保持单一事实来源。
更多资源
想继续核对 AI UI 能力与平台说明,可从这些公开资料延伸: