这篇文章是为了分享本人在使用提示词的方式在Figma Make 快速产出 可交互、可演示、可对接 的应用原型时，所形成的经验总结和坑点补救指南。
希望看完文章的你能写出一段提示词，对于使用提示词驱动Figma make 帮助自己更高效生成应用原型能够有更深的理解，并知道常见"翻车"怎么补救。
一、Figma Make 能做：提示词生成"可交互原型"
Figma是一个支持跨平台的协作式的矢量图形编辑和原型设计工具，核心特色是强大的实时协作 功能，让多名设计师、产品、开发者能在线同步编辑、评论、反馈 设计稿，广泛用于创建网站、App界面等数字产品。
首先我们来了解一下它的优点和缺点，才能够查漏补缺，更好地利用FiMake 帮助我们更高效地完成产品原型的设计。
1.1 Figma Make 的强项
-
快速生成页面骨架：登录页、列表页、详情页、表单页、仪表盘
-
建立页面之间的跳转链路：按钮点击 → 页面跳转 / 弹窗 / 抽屉
-
交互演示：Tab 切换、Stepper 流程、筛选弹窗、列表项点击进入详情
-
同风格批量扩展：在已有风格上扩展多个页面。
1.2 Figma Make 的弱项
-
复杂业务逻辑真实联动（如真正读写数据、复杂条件计算，是figma make做不到的，它生成的只是一个可视化的静态页面）
-
不适合指望它"一步到位"的事形成高度精细的视觉稿（无法希望它实现打造出设计师手打的品牌级 UI，但设计产品界面Demo 很适用 ）
-
不能指望它一次性全量系统生成（页面一多就容易布局崩，多个页面的组件都需要分别进行调整时，很难清晰描述该对哪个页面进行优化）
1.3 正确操作：把提示词看作产品规格设计文档
你写提示词时至少要交代 4 件事：
-
页面：要哪些页面？叫什么？
-
组件：页面里有什么核心模块？
-
布局：PC 尺寸、栅格、间距、卡片结构
-
交互：点击/悬浮什么 → 发生什么
【注】：当设计一整个包含多个功能的软件系统时，页面的名称非常重要，有了名称才能在某个页面出现问题时，针对某个页面进行调整，最好能专门形成一个页面名称文件，便于之后查看。
二、手写第一个可交互 Demo：一句话生成 3 页面 + 跳转
实践是最好的学习方式，那我们先做一个最小可交互 PC 端Demo，包含三个页面以及页面间的交互逻辑：登录页 → 首页列表 → 详情页。
你可以将我这里的示例提示词复制到Figma Make中，将会生成一个Web App界面。
2.1 示例提示词（最小可交互 3 页面）
请为一个桌面端 Web 应用（画布尺寸 1440×900）生成一个可交互的原型，一共 3 个页面，并设置跳转交互：
页面1：Login（登录）
`
- 页面居中放置一个登录卡片
- 表单字段：邮箱（Email）、密码（Password）
- 主按钮：Sign In（登录）
交互：点击"Sign In"后，跳转到页面2"Home"。`
页面2：Home（首页）
`
- 左侧固定侧边栏导航：Home、Requests、Settings
- 右侧主内容区：显示一个列表/表格，包含 5 条请求数据（列：Request ID、Type、Status）
- 每一行右侧有一个按钮：View（查看）
交互：点击任意一行的"View"按钮，跳转到页面3"Request Detail"。`
页面3：Request Detail（请求详情）
`
- 顶部左侧有"Back（返回）"按钮
- 主区域使用卡片展示详情信息，分为三块：Basic Info（基本信息）、Approval Status（审批状态）、Comments（备注）
交互：点击"Back"按钮返回页面2"Home"。`
视觉风格要求：B 端后台风格，简洁、留白充足、卡片式布局、文字层级清晰，按钮/可点击元素要有悬停态。
2.2 提示词效果
你会得到什么效果？
- Page 1中你必须得输入Email和Password 字段，再点击 Sign In → 跳转到 Home页，否则会提醒你，请填写该字段。
-
点击Sign In 按钮后，进入Home 列表页。
我们首先来看一下下图这张Home页面，左上角红框中的按钮点击后会在界面中央显示一个调节页面大小的组件，你可以根据自己的设备长宽的需求进行设置。
而下方蓝色方框内，就是我们通过提示词生成的web 应用界面，包含了我们在提示词中提及的字段，以及按钮。
-
可点击 View → 跳到 Detail 页
-
Detail 点击左上角的返回 Back按钮 → 跳转到 Home 页
这就是一个完整的可演示应用交互链路，以往这些页面的元素/组件可能需要设计师一两个小时组件拉拽、交互连线形成一个应用链路，但现在我们通过语言描述就能够在几分钟内实现一个完整且可交互的应用界面，其中提示词发挥了极其重要的作用。
三、提示词基本语法：页面、组件、布局、交互四要素
在这章中我们就来学习一下，对于一个应用界面我们应该怎么使用语言来进行描述。
3.1 页面整体布局
来看一下下方这个整体布局结构化中文模板：
项目背景：
应用名称：xxx
使用场景：xxx（例如：IT 设备申请 / Agent 配置 / 商家后台）
画布尺寸：1440×900（PC端）
页面清单 （按流程顺序）：
1）页面名：xxx 页面目标：xxx
2）页面名：xxx 页面目标：xxx
...
每个页面包含：
核心组件：列表/表格/表单/卡片/弹窗/抽屉/Tab/Step进度条等
布局规则：左右结构 / 顶部栏 / 栅格 / 留白 / 容器宽度
交互规则：点击什么 → 跳转到哪里 / 打开什么 / 状态如何变化
全局风格：
- B端后台风格、卡片化、8px间距体系、圆角12px、轻边框、文字层级清晰
对应用界面的整体布局的描述十分重要，如果在开始设计原型时不设置好整体布局，那么之后的设计过程中就会陷入到组件布局调整的循环中。
3.2 错误示例及纠正
一起看一下本段下方的这个图，是我设计应用界面原型时没有说明全局组件布局设置，而生成的画面。可以很明显的看到问题是，整个页面组件的布局十分紧凑，主要分布在页面的上半部分。也存在文字于卡片边框贴近或超出卡片界面，图标与页面边界重合等诸多问题。那么针对这个界面，之后就需要花费诸多时间去描述解决布局存在的问题。
那么现在你如果已经明确设计目标以及掌握了页面整体布局的提示词结构，就不会出现以上问题。以示例来帮助你更好去理解去生成一个PC端 上一个IT设备申请流程 界面的原型，设计要点：体现流程进度情况，且每个界面需保持相同风格，完成一个完整的申请流程链路。
以下页面提示词供你参考：
请为"IT 设备申请（IT Equipment Request）"生成桌面端可交互原型（1440×900），要求有流程感（Step 进度点），一共 4 个步骤页面：
页面1：Request Start（发起申请）
页面中间放一个卡片，标题：Equipment Application
卡片内显示一段说明文字：请填写信息以发起设备申请
主按钮：Start
交互：点击 Start → 跳转到页面2
页面2：Device Type（选择设备类型）
以两张可点击卡片展示选项：thinkpad、lenovo xiaoxin ......
底部按钮：Continue（默认禁用）
交互：
当用户选择任一设备类型后，Continue 变为可点击
如果选择thinkpad：点击 Continue → 跳转到页面3A
如果选择lenovo xiaoxin：点击 Continue → 跳转到页面3B
页面3A：thinkpad Spec Form（ 规格表单）
表单字段：Model（型号下拉）、RAM（下拉）、Storage（下拉）、Reason（多行文本）、Needed Date（日期选择）
按钮：Submit
交互：点击 Submit → 跳转到页面4
页面3B：lenovo xiaoxin Spec Form（规格表单）
表单字段：Brand（品牌下拉）、CPU（下拉）、RAM（下拉）、Storage（下拉）、Reason（多行文本）、Needed Date（日期选择）
按钮：Submit
交互：点击 Submit → 跳转到页面4
页面4：Confirmation（提交成功）
成功提示：Request submitted
按钮1：View in Approval Center
按钮2：Back to Home
交互：
点击 View in Approval Center → 打开一个弹窗（Modal），文案：申请详情请前往审批中心查看
弹窗底部按钮：Back to Home，点击后回到页面2或页面1（择一即可）
风格与布局要求：
左右结构：左侧导航，右侧主内容区
统一卡片样式，留白充足，页面元素不要拥挤在上半部分
所有按钮、卡片、导航项必须可点击并具备悬停态
但其实，撰写这大段的文字也很耗费时间，所以我们可以巧妙地借助AI ，帮助我们去生成完整的页面提示词，通常我会将自己的需求发送给Gemini ，然后帮我详细描述页面的布局、结构。上方的示例提示词是通过Gemini 生成的描述。
与Gemini 对话，来生成Figma Make 绘制原型图的提示词，可以参考以下提示词模板提出设计需求：
你是一个擅长使用提示词借助Figma Make 生成 B端 应用界面的UI/UX，善于根据需求进行设计页面、组件之间的交互逻辑，现在请你撰写提示词便于我在 Figma 中生成「{产品名称}」的原型图，并包含基础交互连线和页面流转逻辑。
之后再加你对页面组件/元素、整体布局的简洁描述，发送给Gemini，就能根据你的需求生成页面提示词。
3.3、补救包："拯救"页面的"丑、挤、乱"
针对3.2 中图片中出现的问题，我们可以将Figma Make原型版本先回退，再将以下"补救句"追加到你原提示词末尾。
翻车1：页面很挤、都堆在上半部分
请优化页面布局：使用居中容器（最大宽度约1120px），主内容区上下留白不少于24-32px，避免所有元素挤在页面上半部分，整体更均衡。
翻车2：文字跑出按钮/卡片
请确保所有组件使用自适应布局：按钮最小高度40px，文本需要自动换行或超出显示省略号，不允许出现文字溢出容器边界的情况。
翻车3：风格不统一、不像 B 端后台
请统一视觉风格为现代B端后台：浅灰/白色背景、轻边框卡片、圆角12px、阴影尽量轻，标题/正文/辅助文字层级清晰，间距统一按8px体系。
四、总结
熟能生巧，所以请多多尝试，结合以上原型提示词模板及技巧去撰写提示词、在Figma Make中发挥想象设计自己脑海中的产品原型。欢迎你有任何的提示词撰写方面的见解或问题，都可以在评论中与我讨论 ~