返回指南页面
AI × 产品界面设计

快速定稿
AI 界面设计完全指南

工具选对只是第一步——先冻结一屏规格书,再挂组件与参考进 Figma Make,小样通过后精修状态并过人审。本篇教你跑通这条交付链。

产品经理 UI / UX 独立开发者 创业 MVP 设计系统团队
使用工具
Figma Make
国内平替 MasterGo
成本
付费席位
草稿可试用
技能要求
会写规格书
不用会 Figma 全功能
交付结果
可评审一屏
含状态与清单
场景重现

明天评审要一屏后台,你对着空白规格书不知道先写哪几行

你是产品经理小林。产品定了明天下午的评审,你也打算用 Figma Make 出稿——但文档里只有一行标题,模块清单、禁区、成功标准全是空的。工具没问题,卡在规格书还没冻结,不敢点生成。

① 评审 deadline 来了
飞书私聊:产品要求明天下午评审前交一屏订单后台界面方向
② 卡在写规格书
产品经理对着空白 UI 规格书发呆,便签写着模块清单没写、禁区在哪、状态屏要哪些

这件事,以前和现在怎么做?

之前 · 规格书空白就开跑
常常数小时重滚

想到哪写到哪,生成后再补

  • 口头需求 → 直接进 Make 堆形容词
  • 模块、禁区、状态屏事后才想起来
  • 小样方向错了,只能整屏重滚
之后 · UI 规格流水线
约半日可评审一屏

先冻结 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 条。

prompt_01_ui_brief.txt · 步骤 1 · 一屏规格书
【角色】你是严谨的产品设计师。只帮我把「这一屏 UI」定义清楚,不开始发散视觉散文。 【产品】[产品名与一句话定位] 【用户】[谁在什么情境打开这一屏] 【任务】[用户完成什么才算成功] 【平台】[桌面 Web / 移动 H5 / iOS / Android] · 断点:[宽度] 【必含模块】[列表,按视觉优先级排序] 【主 CTA】[唯一主按钮文案与去向] 【状态】必须覆盖:默认 / 空态 / 加载 / 错误 / 无权限 【品牌约束】色板:[主色/中性色];字体:[中西文];圆角:[数值] 【不做清单】[≥5 条:禁止的风格/组件/装饰] 【参考】[竞品或旧版:学结构不抄皮肤] 【输出】 1. 一句话界面使命 2. 信息架构(区块树) 3. 关键交互说明(点击/筛选/分页) 4. 内容占位规则(真实字段名,不用 Lorem) 5. 还缺哪些输入会阻止开工

对号交付类型与工具 ⏱ 10 分钟

探索 / 评审 / 系统 / 可跑壳——只选一类做主任务。评审稿 → Figma Make 或 MasterGo;可跑壳 → 另开 v0,不要挤在同一会话里硬生成。本步无单独提示词——选型见下方「模式选择」。

挂上约束:组件、参考、品牌 ⏱ 10 分钟

在 Figma Make 中附加已有 Design 帧 / 图片;有 Make kit 或库变量就挂上。MasterGo 则上传参考图并选定端类型(Web / 移动)。本步无单独提示词——约束输入见「工具选择」前置条件。

生成小样 —— 只要结构正确的一屏 ⏱ 15–30 分钟

在 Make / MasterGo 粘贴模板 2,附上已批准规格书。要求:模块齐全、层级清楚、假数据标注为示例。方向不对就改规格,不要连环重滚形容词。

prompt_02_generate_screen.txt · 步骤 4 · 生成可评审一屏
【角色】你是资深 UI。根据规格生成一屏高保真界面;服从已附加的设计/组件上下文;缺信息先问,禁止瞎编业务规则。 【已批准规格书】[粘贴 prompt_01 输出] 【视觉语气】[克制企业 / 轻量消费 / 数据密集…] 【密度】[宽松 / 中等 / 紧凑] 【数据】使用真实字段名的示例数据;图表若无真实数据则标注「示例」。 【硬规则】 - 主 CTA 只有一个视觉权重最高的按钮 - 导航不超过两级可见深度 - 中文界面避免生硬直译英文标签 - 不要玻璃拟态、霓虹描边、无意义渐变色块 - 可点击元素必须有明确命中反馈暗示 【先交付】默认状态完整一屏 + 简短说明「用户如何完成任务」 【后补】同一结构的空态 / 加载 / 错误(等我确认默认态后再出)

点选精修 + 补状态屏 ⏱ 20–40 分钟

模板 3:用 Make 的 Edit / 对话做局部改稿;补空态、加载、错误。需要时把预览拷回 Figma Design 图层,用自动布局与组件替换「野生控件」。

prompt_03_iterate_local.txt · 步骤 5 · 局部迭代
【角色】你是精细的 UI 改稿编辑。只改我点名的问题,禁止借机重做整屏风格。 【保留】[必须保留的布局骨架 / 组件] 【问题清单】[编号列出:例如 1.表头过挤 2.次要按钮抢戏 3.筛选与结果无关联] 【约束】色板与字号阶梯不变;若需新组件,先复用系统内已有变体。 【输出】逐条说明改了什么;然后给出更新后的界面。 规则:不要用「更现代」「更高级」这种空话交差;每条修改必须对应可观察的视觉结果。

评审闸门 —— 产品 / 设计 / 开发各过一刀 ⏱ 按风险分级

模板 4:产品看任务是否完成;设计看一致性;开发看可切可实现。分享 Make 预览链接或 MasterGo 文件链接,勿只发一张压缩截图。

prompt_04_review_gate.txt · 步骤 6 · 评审闸门清单
【角色】你是冷酷的设计 QA。根据清单检查界面,只列问题,不重画。 【规格书】[粘贴] 【待审界面说明】[链接或截图描述] □ 用户任务路径是否 3 步内可完成? □ 主 CTA 是否唯一且文案可执行? □ 空态 / 加载 / 错误是否齐全且文案可读? □ 字号 / 间距 / 圆角是否跨区块一致? □ 是否出现无法实现的装饰(复杂阴影堆叠、不可访问对比度)? □ 表格/列表在超长文案与空数据时是否崩? □ 中文标签是否自然?有无内部黑话外泄? □ 开发是否能量出关键尺寸与状态(或有明确组件)? 【输出】通过 / 有条件通过(列出必改)/ 打回(列出原因)

沉淀可复用 Brief 与模板 ⏱ 每周 30 分钟

把有效规格书、成功提示词、Make 模板 / MasterGo 组件用法写进团队库。连续两次评审因「组件不一致」打回 → 先补设计系统,再开 AI。本步无单独提示词——沉淀对象来自前面各步产出。

💡

与代码路径的分工:v0 / Lovable 适合「能点的壳」;本篇训练「能评审的界面规格」。需要可跑演示时,把已通过的规格书贴进 v0,而不是从零再形容一遍「好看后台」。


模式选择

主画布选哪条:Figma Make 还是 MasterGo?

两条都能跑本篇同一步骤——按团队可达性与协作链路选一条做主工具,定稿后尽量在同一画布治理。

🇨🇳

MasterGo AI 快搭

国内可达、生成直接落入可编辑矢量画布,支持 Vue / React 代码同步。无法稳定用 Figma 时,用 MasterGo 跑同规格书与同套提示词。

🔗

这是二选一,不是流水线。选定主画布后,探索发散可用 Google Stitch(可达时),可跑演示另开 v0——不要把三种交付混在同一次生成里。


迭代微调

第一版很少完美:用管理杠杆改,不靠形容词重滚

模型已经会排常见仪表盘与表单;你要用规格、约束、小样闸门与状态清单,而不是再发明一套「高级感形容词」。

TIP 01
一屏规格书锁死
用户任务、模块清单、成功标准、不做清单。规格未过审,禁止开跑生成。
TIP 02
约束先于形容词
挂组件库 / 参考帧 / 品牌色 / 竞品截图。一句「高级感」不如一张你们真实的导航栏。
TIP 03
小样闸门
先要结构与关键一屏,再要全套。方向错了立刻停——完整多屏比改信息架构贵得多。
TIP 04
状态与一致性人审
空态、加载、错误、禁用、超长文案。跨屏间距/字号/组件变体必须人工扫一遍。
TIP 05
打回原因写进 Brief
列出最近 3 次评审打回原因,把高频项写进「不做清单」与规格书必填项。缺组件就先补库,再开 AI。
TIP 06
好指令 vs 坏指令
坏:「更现代一点」。好:「表头行高 +4px,次要按钮改为 ghost 变体,筛选 chips 与结果区左对齐」。每轮改 1–2 点即可。
🔄

别追求完美初稿。第一版目标是「结构正确、状态有规划、能讲清任务路径」;用模板 3 定向修补,比从头重生省大部分时间。每月抽查 AI 初稿进入终稿的修改率——下降才算流水线变好。


质量验收

上评审前,用这张闸门过一遍

Demo 可以花哨;进入组件库与开发排期的稿必须吝啬、一致、可实现。

01
任务可完成
陌生人能否在 10 秒内找到主路径?找不到就不是 UI,是氛围板。
02
状态齐全
默认之外至少有空态与错误。只有「满数据幸福态」的稿一律退回。
03
系统一致
同功能控件是否同变体?私自发明的第三套按钮样式必须消灭。
04
可开发
开发能否指出组件与断点?无法量的艺术字堆叠不算通过。
💡

质检不过就迭代,别硬交。任务路径乱 → 回 Brief;缺状态 → 补空态/错误屏;组件打架 → 拷回 Design 图层换系统组件。四项全过再进入导出。


导出交付

验收过关后:分享预览 → 拷回图层

交付物是可协作的设计稿,不是一张压缩截图。两步都要做。

分享预览链接

Make 预览或 MasterGo 文件链接发给评审方。产品 / 设计 / 开发在同一链接上评论,避免「感觉差不多」的群聊投票。

拷回 Figma Design 图层

定稿后把 Make 预览拷回 Design 文件,用自动布局与组件替换野生控件。MasterGo 则在画布里对齐设计系统组件,必要时导出标注给开发。

🔗

两步是流水线,不是二选一。① 分享预览收集评审意见 → ② 定稿后拷回主画布治理。跳过拷回图层直接交截图,是开发说「没法切」的最高频原因。


关键回顾

回顾:AI UI 可评审一屏流水线

下次再说「先出个界面看看」——记住这条短链路即可。

1 写规格书 ⏱ 15 分钟
2 挂约束 + 小样 ⏱ ~40 分钟
3 精修 + 状态 ⏱ ~40 分钟
4 评审 + 交付 ⏱ 按风险

常见问题

踩过的坑,提前告诉你

覆盖产品、设计与一人团队最高频的卡住点。

按选型规则:在设计系统上下文、图层回流、全球产设研交接上,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 能力与平台说明,可从这些公开资料延伸: