> ## Content Index
> Fetch the complete content index at: https://www.hubwiz.com/blog/llms.txt
> Use this file to discover other available public pages before exploring further.

# Figma Make 提示工程
- URL: https://www.hubwiz.com/blog/figma-make-prompt-engineering/
- Published: 2026-02-05T14:10:37.000Z
- Updated: 2026-02-05T14:10:37.000Z
- Description: "用AI生成UI屏幕"听起来很简单——直到你尝试在一个有30多个屏幕和实际约束的真实产品上使用它。
- Author: admin
- Tags: TOOL, FIGMA MAKE, #Import 2026-10-14 14:41

*锁定上下文 → 运行检查点 → 重置"模式" → 发送两个提示，将Figma Make变成屏幕生成器。*

**透明度说明（AI使用）：** 我使用AI助手来帮助构建和验证提示。以下的工作流程、决策和提示是我的，我原样分享它们。 

**保密说明：** 我不能提及真实项目名称。我保持提示结构不变，但删除了敏感值（品牌/项目名称和令牌值，如精确的十六进制颜色代码）。

## 1、"AI设计"背后的真正工程问题

"用AI生成UI屏幕"听起来很简单——直到你尝试在一个有30多个屏幕和实际约束的真实产品上使用它。

在我的案例中，我拥有正常工作流程所需的一切：线框图、用户流程、研究、品牌指南和灵感。然而，我早期尝试使用Figma Make的方式一直在可预见的方式上失败：

- 它表现得像被困在设计系统模式中
- 即使我需要移动端，它有时也会产生类似网页的UI
- 最糟糕的情况：空白/不完整的屏幕

所以我不再把Figma Make当作魔法，而是把它当作一个需要以下内容的系统：

1. 清晰的输入
2. 清晰的"模式"（组件 vs 屏幕生成）
3. 命名的组件库引用
4. 最小布局脚手架（以便它可以可视化结构）

本文档记录了我用来将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屏幕，所以下一步变成了选择策略——修复旧的设计系统会话还是重新开始。

![无](https://www.hubwiz.com/blog/content/images/2026/02/1-SFrXf2eCfxJwZk8hqA2Lrg.png)

将屏幕生成提示分解为六个部分的图表：上下文重置、库引用、命名、框架、布局脚手架和美学指导。

### 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-627daf3f4036](https://uxdesign.cc/how-to-prompt-figma-makes-ai-better-for-product-design-627daf3f4036?ref=hubwiz.com)[https://uxplanet.org/figma-make-complete-guide-a3bf0425537e](https://uxplanet.org/figma-make-complete-guide-a3bf0425537e?ref=hubwiz.com)我找到了这两篇关于更好Figma Make提示的文章。"

逐行提示解释：

- 链接1 — 教产品设计上下文的提示框架。
- 链接2 — 教完整的Make提示结构和示例。
- "我找到了这些…" — 解释意图：你正在升级它生成可用Make提示的能力。

现在AI平台有了Make提示如何结构的示例，所以它的提示输出变得更加符合真实世界的Make使用。（这些链接也在参考文献部分。）

### 2.6 可选但强大：诊断提示（如果屏幕仍然不生成）

这个提示很长。在我的工作流程中，它充当了Make失败的"调试器清单"。所以不分享它。

![无](https://www.hubwiz.com/blog/content/images/2026/02/1-Fvl5iXERiVdBvoTIpFZIUg.png)

海报列出八种常见的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提示，让我一个接一个地运行。

![无](https://www.hubwiz.com/blog/content/images/2026/02/1--DZqR-HXFYeasnwej2mV7A.png)

并排比较显示提示修复前的空白通用移动框架，以及提示修复后的抛光结构化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](https://medium.com/design-bootcamp/prompt-engineering-for-ui-how-i-made-figma-make-generate-real-screens-at-scale-6e997c6b691e?ref=hubwiz.com)

汇智网翻译整理，标明出处