在网上看到了很多网友对于Figma Make 提示词的看法，总结来说：想到哪说到哪，每次需要生成与以往设计类似的设计需求时，还需要重新进行撰写提示词，而且生成的页面结果和以往的页面不一致，还出现组件乱、交互缺、风格飘等问题。
在我使用Figma Make进行设计产品原型时，也深有体会，但有了些自己的经验总结：把提示词规范化，固定结构进行描述，常用组件的描述进行收纳归档。从而形成自己"可复用的 Prompt 框架"，让你从"描述很散"升级到"可稳定复刻、可迭代交付"的写法。
一、提示词结构化模板：System / Goals / Pages / Components / Interactions
将发送给Figma Make 的提示词以五个模块进行描述，分别是System 执行规则（说明页面的大小、适用设备、页面统一交互说明等信息）、Goals 目标（说明本次设计的任务、背景）、Pages 页面清单（说明有哪些页面）、Components 页面组件，Interactions交互说明。
1.1 结构化 Prompt 模板
【System】
画布尺寸：1440×900（PC端）
请严格按我给出的页面名称、结构与交互生成；不要擅自新增页面
所有可点击元素必须加原型链接（Prototype Link）并有悬停态
页面整体留白充足，避免元素挤在上半部分
【Goals】
生成一个可交互原型，用于演示"IT设备申请工作流"
能完成：发起申请 → 选择设备类型 → 填写表风格风格单 → 提交成功
支持 Mac / Windows 两条分支路径
【Pages】
1）Request Start（发起）
2）Device Type（选择设备类型）
3A）Mac Spec Form（Mac规格）
3B）Windows Spec Form（Windows规格）
4）Confirmation（确认页）
【Components】
Request Start：说明卡片 + Start按钮
Device Type：两张可选择卡片（Mac / Windows）+ Continue按钮（默认禁用）
Spec Form：表单（下拉/日期/多行文本）+ Submit按钮
Confirmation：成功提示 + "查看审批中心"按钮 + "返回首页"按钮 + 弹窗Modal
【Interactions】
Start → Device Type
选择 Mac → Continue → Mac Spec Form → Submit → Confirmation
选择 Windows → Continue → Windows Spec Form → Submit → Confirmation
Confirmation 点击"查看审批中心"→ 打开Modal（文案：申请详情请前往审批中心查看）
Modal 点击"Back to Home"→ 返回 Request Start
1.2 布局提示词：PC 端信息架构怎么描述更稳定
页面整体布局没写好，常见症状就是：拥挤、卡片错位、层级不清、页面边界不明显 。PC 端稳定的关键是：容器宽度 + 栅格 + 留白规则。
1）PC 端布局
-
居中容器：主内容区最大宽度（如 1120px）
-
左右结构：左侧导航固定，右侧内容滚动
-
间距体系：8px/16px/24px/32px 统一使用
2）布局提示词
【布局规则示例】
- 使用左右结构：左侧为固定侧边栏（宽约240px），右侧为主内容区
- 主内容区使用居中容器（最大宽度约1120px），左右内边距至少24px
- 页面垂直方向留白充足：顶部与底部至少32px，避免内容全部挤在上半部分
- 表单使用两列布局（在需要时），卡片之间间距16-24px
比如你想设计一个AI 对话的聊天界面时，可以这么写：
使用上中下结构来构造整个AI对话的聊天界面。
- 顶部：页面为AI Assistant 名称。
`
- 中间：主卡片（聊天对话主内容区）。`
- 底部：用户输入区（输入框/添加附件/发送）。
这样就可以将整个界面的内容布局说清楚，之后只需要对对每个区域分别进行详细的设计即可。
二、组件提示词：归纳成集，高效复用（以对话、列表、Tab为例）
你一定注意到了在我们使用Axure、墨刀等原型设计软件进行设计应用的界面时，都会遇到一个"组件"概念，其实我们所使用的网页、手机App、小程序等等应用界面，都是由一个个小组件构成的页面界面。
如果能将每个组件、页面元素的描述提示词整理出来，下一次我们在Figma Make 上需要设计到类似的组件时，只需要在原有的组件提示词框架进行简单调整，就能够生成想要的效果。
2.1 对话消息区
比如说，我们继续以刚才设计"一个AI 对话的聊天界面"为例，现在我们对"对话消息区域"进行设计，则可以按照以下描述：
对话聊天区的模板：
在聊天对话消息区中，自身与对方的消息气泡以左右对齐的方式呈现。（左侧为对方、右侧为自己）
每条消息显示：头像、姓名、发送时间、文本内容
插入 1~2 条「文件消息」和「图片消息」的占位块，体现丰富消息类型。
对方消息气泡距离内容区左边界约 25px，自身消息气泡距离右边界约 25px。
我们就可以将聊天对话消息区的描述语句进行沉淀，后续需要生成对话场景页面，就可以直接复用该描述，非常高效方便。
2.2 列表
在B端应用中，通常涉及大量业务对象（如订单、员工、合同、资产），列表将这些离散的、结构化的数据整齐排列，方便用户快速掌握整体概况。因此"列表"是B端产品中用户最高频使用的组件之一（如图所示，图片来自浏览器搜索）。
列表类似于Excel中的表格，因此至少包含表格头、表格行数据，以及对于每行数据的编辑功能。
先来看看我一个翻车现场，看看没有规范提示词的描述会出现的情况。我使用以下语句，给到Figma Make 生成我预想的列表形式。
在"Details"面板上呈现一个列表，列表表头为英文"字段名称、报告设置"。
"字段名称"列数的数据为"Employee_ID 、Employee_Name 、Department 、Job_Title 、Employment_Type、Order_Fulfillment_Rate、Laptop_Model 、RAM_Size 、Storage_Size 、Laptop_Type、Required_Software 、Priority_Level"。
"报告设置"列的每行与图一中的"设置权限"列相似，为单选按钮，每个按钮右侧的文字分别为英文"添加、不添加、删除、编辑"。
在该面板的底部增加一个"取消"、"确认"按钮，"确认"按钮为蓝色填充，取消按钮为灰色填充。点击确认/取消按钮后关闭该面板。
随后Figma Make给我生成了如下图所示的列表：
反思：
只说了"列表""表头"，但没有明确说是两列表格布局。Figma Make 很容易按【字段 + 同行操作】，进行生成列表。
改正方向：
明确说明将列表按照"两列"进行展示，并提供图表供Figma Make进行参考。
可直接复制的提示词模板：
我想要的页面效果是上图(可网上找和你预想中类似的图片作为参考图)这样的，将字段Field name 与字段Report Setting分为两列，两列表格布局 、左列只放字段Field name 名 、右列只放操作 Report Setting、所有行上下对齐，不要混排。
"列表"组件 ：
表格列 + 每行数据 + 特定行内容设定 + 特殊情况
表格列：Request ID / Type / Status / Updated Time / Action
每行采用模拟的数据进行填充。
每行Action包含"Delete"按钮。
当列表数据为空：列表区域显示暂无数据（含插画占位 + 引导按钮）
2.3 Tab 组件
Tab组件（选项卡）是一种在相同上下文中对信息进行分类、切换的组件，无论是在B端还是在C端产品都十分常见。在B端中最常见的用法是作为数据的"预设过滤器"。比如订单列表顶部的"全部、待审批、处理中、已完成"，帮助用户按任务优先级处理工作。在 C 端（消费级/移动端）应用中，Tab侧重于降低认知成本和激发用户点击欲，比如微信应用底部的"微信、通讯录、发现、我"，方便用户快速获取决策信息。
Tab 组件描述模板：
位置：在二级导航栏的顶部放置一个Tab：Complete、Uodo
点击一个Tab 选项，右侧主内容区切换到对应的页面面板（主导航栏不变）
这个Tab 组件的描述比较简单，但通过这个描述就能够基本实现Tab 选项卡的功能，值得注意的是在这里可以先将每个Tab选项对应的页面先进行命名，之后再进行页面的详细设计。
三、交互提示词：点击、悬浮、弹窗、跳转怎么表达
写清你给Figma Make 的交互要求，按照写成"动作 → 反馈 → 结果"的结构进行撰写，说清触发的动作，触发后的反馈效果，能够让figma 更加清晰地知道如何构建组件间的交互效果，才能更准确地把你脑海里的原型绘制出来。
3.1 交互表达公式
-
触发：点击/悬浮/选择/输入
-
反馈：高亮/禁用变可用/打开弹窗/打开抽屉
-
结果：页面跳转/状态更新/关闭弹窗
3.2 可直接复制的交互片段
【点击按钮跳转页面】
- 点击"Start"按钮 → 跳转到"Device Type"页面。
【悬浮态】
- 所有可点击按钮、卡片、列表行，当鼠标悬浮时显示轻微高亮或阴影变化
【禁用态变可用】
- Continue 按钮默认禁用（disabled）；当用户将表单中所有字段中的必填输入框填写完成后变为可用
【打开弹窗 Modal】
点击"查看信息中心" → 打开Modal
Modal 文案：信息详情请前往信息中心查看
Modal 底部按钮：Back to Home（点击后关闭Modal并返回首页）
【打开抽屉 Drawer（右侧滑出）】
点击列表行的"more" → 右侧滑出抽屉面板，命名为"......"
抽屉包含表单字段与保存按钮，点击Close关闭抽屉
【Tab切换】
- 点击顶部Tab → 切换展示对应端的页面内容（Undo/Done）
如果中文描述出现偏差，可以使用英文来帮助figma进行确认你的设计需求。比如：
【点击按钮跳转页面】：
Click the "Start" button → Navigate to the "Device Type" page.
四、风格提示词：字体、间距、卡片阴影的一致性写法
你在使用figma make设计原型时会发现：同样的页面结构、同样的交互路径，生成出来的原型质量还是差异很大，因为没明确的风格，就需要每次都手动修、修不完。所以在产品原型构造之初就制定好产品的整体风格扩展全系统，原型才会稳定、统一、可复用。
在产品设计之初，可能还不明确产品的品牌色/ logo 等信息，现需将产品的Demo 设计出来，能够在最短时间内看到产品初期构想的功能设计。但产品的用户对象是明确的，To B、To c 的产品风格是差异很大的。
这里提供一个长期实践下来汇总得到的**"风格提示词模板"作为参考**：
【视觉风格模板｜Design System Lite】
1）整体基调（Tone）
产品类型：[B端后台 / C端应用 / 管理控制台 / 工作流系统]
风格关键词：[现代 / 极简 / 专业 / 克制 / 轻量]
目标感受：[清晰、可信、效率优先，减少装饰性元素]
2）颜色语义（Color Semantics）
背景：浅色中性背景（避免纯白刺眼）
卡片：白色/接近白色，与背景有轻微区分
边框：浅灰细边框为主
强调色：用于主按钮、选中态、关键高亮（保持全局一致）
状态色：成功/警告/错误分别有明确颜色语义（不要混用）
3）字体层级（Typography）
页面标题：大字号+加粗
区块标题：中字号+半粗
正文：常规字号
辅助说明/提示：更小字号+弱化颜色
行高舒适、避免字挤在一起
4）间距与栅格（Spacing & Grid）
统一使用8px间距体系：8/16/24/32
页面内边距 ≥ 24px，区块间距 ≥ 24px
主内容区使用居中容器（如最大宽度1120px）或明确栅格布局
5）卡片与容器（Cards & Surfaces）
卡片圆角统一：[10~12px]
卡片padding统一：[16~24px]
阴影：轻阴影（存在但不抢眼）
不同层级的容器要有明确区分（背景/卡片/弹窗/抽屉）
6）组件一致性（Component Consistency）
输入框高度统一（例如40px），按钮高度统一（例如40px）
表格行高统一，表头与内容对齐
Tab、Badge、Tag风格统一（圆角、颜色、字号）
7）交互状态（States）
Hover：轻微背景高亮或阴影变化
Disabled：降低透明度、不可点击表现明确
Loading：按钮内显示loading态（或提示）
Success/Error：Toast或Inline提示样式统一
8）禁忌（Do Not）
不要出现多种不同圆角、多种阴影强度、多套字体大小
不要让页面过度装饰（渐变、强阴影、大面积高饱和）
在使用该模板时，可以根据自己的需要选择其中部分作为自己的原型提示词，再与第一章中写好的"布局提示词"结合起来，就能够去生成一个结构稳定、风格确定、可扩展的产品框架，之后再进行详细的产品功能设计就会简单不少。
五、总结
光说不练是难以看到成效的，所以可以多多尝试，结合以上原型提示词模板及技巧去撰写提示词、在Figma Make中发挥想象设计自己脑海中的产品原型。欢迎你有任何的提示词撰写方面的见解，在评论中与我讨论 ~