Figma Make 中文教程：从设计稿生成可交互应用并发布

Figma Make 最有效的用法不是让 AI 从一句模糊描述猜完整产品，而是把已有设计、交互目标、数据边界和验收标准组织成可执行上下文。本教程用一个“团队项目仪表盘”作为案例：从 Figma 设计稿生成可交互应用，完成响应式、代码与安全检查，再发布给测试用户。

开始前请确认：Figma Make 的功能、席位和 AI credits 会随计划与管理员设置变化。Starter 或非 Full seat 可以试用部分能力，但团队文件、library、共享与发布可能受限。组织管理员也可以关闭 AI 或公开发布。

最终要完成什么

案例包含五个页面或状态：

1. 登录页；
2. 项目列表；
3. 项目详情与任务；
4. 空状态与错误状态；
5. 手机端导航。

完成后应能点击登录演示、切换项目、创建测试任务、查看空状态，并在桌面与手机宽度下保持可用。这里先使用模拟数据，不接真实客户、支付或生产 API。

第一步：整理 Figma 输入

不要直接选中几十个页面。先建立一个专门用于 Make 的上下文区域，只保留：

• 一张代表整体布局的桌面页面；
• 一张手机页面；
• 按钮、输入框、卡片、导航和弹窗等核心组件；
• 默认、hover、focus、disabled、loading、empty、error 状态；
• 颜色、字体、间距、圆角和阴影 token；
• 三到五条不可破坏的品牌规则。

给图层和组件使用可理解的名字。删除过期方案、隐藏实验图层和真实客户信息。AI 上下文越大不一定越好，无关内容会增加 credits 消耗，也会让生成结果混淆。

如果团队已有 Figma library、Make kit 或 guidelines 文件，执行前确认版本。Make kit 可以把 npm package、Figma library 与规则结合，为生成过程提供更稳定的设计系统上下文。

第二步：写清产品和交互目标

好的 prompt 应该同时回答六个问题：

• 谁使用这个应用？
• 用户最重要的任务是什么？
• 哪些页面和状态必须实现？
• 数据来自模拟数据还是真实 API？
• 哪些视觉与组件规则不能改？
• 怎样判断结果合格？

可以直接复制下面的首轮提示词，再替换方括号内容：

根据我附加的 Figma 设计，创建一个可交互的团队项目仪表盘。

用户：5–20 人的小团队成员。
核心任务：登录后查看所属项目、打开项目详情、创建测试任务并查看状态。

必须实现：
1. 登录页，只做演示登录，不接真实认证；
2. 项目列表，包含 loading、empty 和 error 状态；
3. 项目详情，包含任务列表、负责人和截止日期；
4. 手机端导航；
5. 键盘可访问的弹窗和表单。

设计约束：
- 复用附加设计中的颜色、字体、间距和现有组件；
- 不新增品牌颜色；
- 不改变主导航的信息架构；
- 所有按钮包含 default、hover、focus 和 disabled 状态；
- 不使用真实客户数据、API key 或第三方受限素材。

请先给出实现计划，列出页面、组件、状态、模拟数据结构和验收检查，不要立即生成代码。