Figma Make 提示工程
锁定上下文 → 运行检查点 → 重置"模式" → 发送两个提示，将Figma Make变成屏幕生成器。
透明度说明（AI使用）： 我使用AI助手来帮助构建和验证提示。以下的工作流程、决策和提示是我的，我原样分享它们。
保密说明： 我不能提及真实项目名称。我保持提示结构不变，但删除了敏感值（品牌/项目名称和令牌值，如精确的十六进制颜色代码）。
1、"AI设计"背后的真正工程问题
"用AI生成UI屏幕"听起来很简单——直到你尝试在一个有30多个屏幕和实际约束的真实产品上使用它。
在我的案例中，我拥有正常工作流程所需的一切：线框图、用户流程、研究、品牌指南和灵感。然而，我早期尝试使用Figma Make的方式一直在可预见的方式上失败：
- 它表现得像被困在设计系统模式中
- 即使我需要移动端，它有时也会产生类似网页的UI
- 最糟糕的情况：空白/不完整的屏幕
所以我不再把Figma Make当作魔法，而是把它当作一个需要以下内容的系统：
- 清晰的输入
- 清晰的"模式"（组件 vs 屏幕生成）
- 命名的组件库引用
- 最小布局脚手架（以便它可以可视化结构）
本文档记录了我用来将Figma Make转变为可靠屏幕输出的工作流程——包含我确切的提示和逐行解释，这样你可以学习提示模式（而不仅仅是复制粘贴）。
2、开始大型Figma Make项目前必须具备的条件
以下是我准备好的内容：
- 用户流程
- 线框屏幕
- 用户故事
- 应用功能列表
- 品牌指南
- 市场研究报告
- 反馈表
如果你没有这些，Make会猜测太多。而猜测就是产生通用UI的原因。
2.1 使用AI平台将你的上下文"编译"成更好的Make提示
我并没有从Figma Make内部开始。我从一个AI平台作为"提示工程助手"开始：我上传了上面的文档并解释了真正的问题——Make没有生成屏幕。
提示#1（AI平台）——我的初始上下文和问题陈述
"我有线框图。用户流程。研究。品牌指南还有一些设计灵感某种风格指南我也有。现在我必须制作UI。但我想用Figma Make制作这个UI。 我已经尝试过了。设计系统用Figma make准备好了。很好但不完美。另外，Figma make即使我要求移动设计也会给我网页设计元素。但这还不是主要问题。 主要问题是它无法创建UI屏幕。也许我的提示不对或者Figma make有问题。所以我决定创建一个新的Figma make。在那里我将基于线框和设计系统生成UI屏幕。"
逐行提示解释（每行在做什么）：
"我有线框图。用户流程。研究。品牌指南…" — 告诉助手你不是在做头脑风暴；你有真正的约束和产物。
"现在我必须制作UI。但我想用Figma Make制作这个UI。" — 锁定输出格式：Make就绪的提示，而不是通用的UX建议。
"我已经尝试过了…设计系统…好但不完美。" — 传达迭代：DS存在，但端到端有些东西不工作。
"Figma make给我网页设计元素…" — 命名一个常见失败模式：除非强制移动上下文，否则会漂移到网页模式。
"主要问题是它无法创建UI屏幕。" — 将错误定义为屏幕生成失败，而不是设计质量。
"所以我决定创建一个新的Figma make…" — 声明一个干净的复位策略，而不是修补一个混乱的会话。
AI平台理解了真正的问题：Figma Make没有生成UI屏幕，所以下一步变成了选择策略——修复旧的设计系统会话还是重新开始。
将屏幕生成提示分解为六个部分的图表：上下文重置、库引用、命名、框架、布局脚手架和美学指导。
2.2 选择策略：修复旧的DS还是干净地重置
提示#2（AI平台）
"好的。让我给你我现有的用Figma make制作的设计系统。你给我修复提示。我只会粘贴到现有的Figma make。让我们看看修复设计系统是否能修复空白的UI输出。 或者 我们会忘记这些，基于线框和颜色指南在新的Figma make上创建UI？"
逐行提示解释：
"让我给你我现有的设计系统…" — 选项A：在同一个Make会话中修复和继续。
"让我们看看修复设计系统是否能修复空白的UI输出。" — 陈述一个可测试的假设：空白屏幕可能是由DS差距或破坏的结构引起的。
"或者…我们会忘记这些…" — 选项B：重置并用线框+品牌约束重建。
这强制了一个干净的决策路径，而不是混合方法。我继续前进，采用"新文件"方法，并准备正确地提供线框+灵感。
2.3 锁定输入序列（不要让它过早生成提示）
提示#3（AI平台）
"好的。如果我们要新的。那让我上传线框这样你就能抓取UI组件包含在设计系统中。 你有品牌指南的颜色和字体大小。 我会给出设计灵感这将帮助理解我的UI主题。 之前的设计指南——我们可以从中重用一些元素。 然后也从Google Material中获取灵感。 在所有这些锁定后。然后你会给我提示。"
逐行提示解释：
"如果我们要新的…上传线框图…" — 线框图成为必须存在什么的蓝图。
"你有品牌指南的颜色和字体大小。" — 提前锁定排版和颜色，这样样式就不会漂移。
"我会给出设计灵感…" — 添加视觉调性和现代抛光参考（外观和感觉）。
"之前的设计指南…重用一些元素。" — 防止从零开始重新开始；重用已经有效的部分。
"从Google Material中获取灵感。" — 设置一个熟悉的结构，这样设计师/开发者的学习曲线最小。
"在所有这些锁定后…" — 建立规则：在上下文完成之前不生成提示。
我再次上传了线框图、设计灵感以及之前设计系统的截图，这样AI平台在生成Make提示之前可以"看到"一切。
2.4 在提示生成前运行"理解检查点"
这是大多数人跳过的一步——然后 later 指责Make产生幻觉。
提示#4（AI平台）
"这是线框图。 设计灵感。 之前生成的系统两张图片。 告诉我你有什么。你能用这些做什么？你还需要什么？ 现在不要生成任何提示代码。"
逐行提示解释：
"这是线框图…设计灵感…两张图片…" — 用简单的语言确认确切的输入集。
"告诉我你有什么。" — 强制助手总结（你的反幻觉门）。
"你能用这些做什么？" — 强制它根据你的输入声明它能产生什么。
"你还需要什么？" — 在你浪费时间生成提示之前揭示缺失的部分。
"现在不要生成任何提示代码。" — 防止过早的提示倾倒（这通常会变得通用）。
给出这个提示后发生了什么：
这个检查点让我验证AI平台真正理解了资产和范围。一旦它能准确地总结"它有什么"和"它能做什么"，我就继续进行。
2.5 给它参考，让它学习"好的Make提示"是什么样的
提示#5（AI平台）
"https://uxdesign.cc/how-to-prompt-figma-makes-ai-better-for-product-design-627daf3f4036https://uxplanet.org/figma-make-complete-guide-a3bf0425537e我找到了这两篇关于更好Figma Make提示的文章。"
逐行提示解释：
- 链接1 — 教产品设计上下文的提示框架。
- 链接2 — 教完整的Make提示结构和示例。
- "我找到了这些…" — 解释意图：你正在升级它生成可用Make提示的能力。
现在AI平台有了Make提示如何结构的示例，所以它的提示输出变得更加符合真实世界的Make使用。（这些链接也在参考文献部分。）
2.6 可选但强大：诊断提示（如果屏幕仍然不生成）
这个提示很长。在我的工作流程中，它充当了Make失败的"调试器清单"。所以不分享它。
海报列出八种常见的AI UI生成失败模式，症状和修复在卡片网格中
提示#6（AI平台）——诊断+修复
这一步不是强制性的。
"让我给你一些我之前无法用Figma Make生成UI屏幕的猜测。这样我们评估这些事项不再犯同样的错误。[我之前失败的分析]"
此时，我认为上下文是完整的。我转移到一个干净的、标题为Figma Make的文件，并要求AI平台给我最终的Make提示。
2.7 "我准备好了"信号：当我切换到Figma Make时
提示#7（AI平台）
"现在我创建了一个标题为的Figma make。 只是让你知道，我有线框图、设计灵感、之前的Figma设计系统。在Figma make中给出提示时我可以一个一个粘贴/附加它们。 我准备好了。给我提示"
逐行提示解释：
"创建了一个标题为的Figma make" — 确认存在一个干净的工作空间。
"我有线框图…灵感…之前的设计系统…" — 信号你可以在Make内增量附加输入。
"我准备好了。给我提示" — 触发最终的提示传递。
AI平台给了我两个Figma Make提示，让我一个接一个地运行。
并排比较显示提示修复前的空白通用移动框架，以及提示修复后的抛光结构化UI屏幕。
2.8 两个最终有效的Figma Make提示
提示#1（Figma Make）——系统设置（值已删除，结构保留）
// 系统设置提示：[项目] 移动组件库 V1.1 // 1. 全局样式和令牌 设置库名称 "[项目] 移动组件库 V1.1" 设置字体家族 "[字体家族]" 设置主要颜色 [主要颜色十六进制] // 深蓝色（[品牌] 主色） 设置强调颜色 [强调颜色十六进制] // 浅蓝色（强调/次要） 设置背景颜色 [背景颜色十六进制] // 最浅灰色/米白色 设置文本颜色 [文本颜色十六进制] // 所有文本的深基色 设置设计令牌 "半径/卡片" 值 12px // 主容器/卡片半径（来自灵感） 设置设计令牌 "半径/元素" 值 8px // 按钮/输入半径（来自线框图） 设置阴影样式 "柔和低海拔Material 3风格阴影" // 来自灵感的审美 // 2. 布局和屏幕容器 创建组件 "移动_屏幕_容器" 属性 { 宽度：375，// 标准移动端宽度 高度：812， 背景颜色：背景颜色， 圆角：20， 内边距_x：16， 内边距_顶部：44，// 状态栏安全区域 布局："垂直自动布局"， 描述："所有UI生成的固定尺寸屏幕容器。" } // 3. 核心原子组件 // 主要按钮 创建组件 "按钮/主要_CTA" 变体 "状态：默认" 属性 { 高度：52， 宽度："填充容器"， 背景颜色：主要颜色， 文本颜色：#FFFFFF， 圆角："半径/元素"， 字体权重："粗体"， 描述："全宽主要行动按钮。" } // 移动列表项（例如，用于设置、文件视图） 创建组件 "列表_项目/标准_64px" 属性 { 高度：64，// 最佳移动触摸目标高度 内边距_x：0， 内边距_y：12， 背景颜色：#FFFFFF， 圆角："半径/元素"， 布局："水平自动布局，带前导图标/头像和尾随chevron。"， 描述："用于设置和内容行的标准64像素高列表项。" } // 底部导航栏 创建组件 "导航/底部_标签_栏" 属性 { 宽度：375， 高度：80， 背景颜色：#FFFFFF， 阴影：阴影样式， 布局："水平自动布局，5个相等的图标槽（首页、文件、我等）"， 是_粘性：true， 描述："固定在屏幕底部的移动导航栏。" } // 4. 品牌组件 // 云徽标标记（使用分层美学） 创建组件 "品牌/徽标_云" 属性 { 资产："使用从主要颜色到强调颜色的渐变的3D、分层、平滑蓝色云图标。"， 描述："主要[项目]徽标标记。" }
逐行提示解释（如何思考这个提示）：
- 全局样式和令牌 — 防止Make发明自己的样式。令牌充当护栏。
- 屏幕容器 — 标准化框架大小、内边距、安全区域和布局行为。
- 原子组件 — 提供可重用的构建块，而不是随机占位符。
- 品牌/徽标组件 — 确保品牌作为跨屏幕的可重用资产存在。
在第一个Figma Make提示之后，它生成了一个屏幕。
提示#2（Figma Make）——授权屏幕生成（值已删除）
// 屏幕生成提示：授权屏幕 // 上下文重置：切换到屏幕设计模式并使用内置库。 切换到屏幕设计模式。 使用"[项目] 移动组件库 V1.1"中的组件。 创建一个名为"授权_登录_屏幕"的新移动屏幕。 // 布局说明（基于报告的第13页） 使用"移动_屏幕_容器"作为屏幕框架。 在顶部居中放置"品牌/徽标_云"标记，后面是标题"[项目]"。 下面是居中的文本标题"登录"。 使用两个突出的按钮式字段创建主要登录区域（列表_项目/标准_64px适合视觉一致性）： 字段1："用你的号码注册"（前导图标：电话/SIM） 字段2："用邮箱登录"（前导图标：邮件） 包含链接"没有账户？注册"。 在绝对底部添加法律/条款页脚文本。 // 美学指导 保持干净、现代、可信的外观，浅色背景和主要蓝色的突出使用。
逐行提示解释（为什么这个提示产生真实的屏幕）：
"切换到屏幕设计模式。" — 将Make从组件构建行为中切换出来。
"使用…库的组件。" — 通过强制重用你的组件防止通用UI。
"创建一个名为…的新移动屏幕。" — 锚定输出并减少重复。
"使用移动_屏幕_容器…" — 确保屏幕继承正确的框架+布局规则。
"脚手架（徽标/标题 → 登录 → 字段 → 链接 → 页脚）" — 最小结构，这样Make可以可视化布局。
美学指导 — 保持一致（干净+可信+浅色背景+主要颜色强调）。
在第二个提示之后，它生成了另一个屏幕。
3、为什么这有效
这个工作流程有效，因为它将"生成UI"变成可重复的提示工程：首先锁定输入；助手证明它理解了资产；Make被明确重置到屏幕模式；组件库总是按名称被引用；每个屏幕提示包含最小结构脚手架。输出变得足够可预测，可以扩展到许多屏幕而不会随机漂移。
关键要点
- 不要从Figma Make开始—— 从用AI助手编译上下文开始。
- 使用检查点提示（"告诉我你有什么…还不要生成提示。"）来防止幻觉。
- 如果屏幕不生成，运行一个诊断提示命名失败模式和修复。
- 使用两个Make提示： 一个用于系统/库设置，一个用于带有布局脚手架的真实屏幕。
- 始终命名你的组件库并强制Make使用它。
原文链接: Prompt Engineering for UI: How I made Figma Make generate real screens at scale
汇智网翻译整理，标明出处