ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 20px;font-weight: bold;display: table;margin: 2em auto 1.5em;padding: 6px 0px 6px 16.75px;background: linear-gradient(135deg, rgb(113, 23, 234), rgba(113, 23, 234, 0.667), rgba(234, 96, 96, 0.533), rgba(217, 57, 205, 0.267), rgba(217, 57, 205, 0));color: rgb(255, 255, 255);border-radius: 8px;width: 318.25px;">核心技术栈与架构基础ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 18px;font-weight: bold;margin: 2em 8px 1.5em;color: rgb(63, 63, 63);border-width: 1px;border-style: dashed;border-color: rgba(161, 27, 218, 0.65);padding: 12px 12px 8px;border-radius: 8px;">大语言模型ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;margin: 1em 8px;letter-spacing: 0.1em;color: rgb(33, 37, 41);padding: 8px 12px;background: rgba(237, 242, 255, 0.8);border-radius: 8px;">代码生成的核心离不开大语言模型。 Figma Make 的核心驱动是Claude Sonnet 4.5（最新版本）和早期的 Claude 3.7 Sonnet 模型。ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;margin: 1em 8px;letter-spacing: 0.1em;color: rgb(33, 37, 41);padding: 8px 12px;background: rgba(237, 242, 255, 0.8);border-radius: 8px;">根据 Figma 的博客说他们选择这些模型的原因在于这两个模型在在代码生成和复杂推理任务上表现最优。ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;padding: 8px 12px;border-radius: 0px;color: rgba(0, 0, 0, 0.5);background: rgb(244, 238, 255);margin: 1em 8px;border-top-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-left: 3px solid rgb(201, 132, 255) !important;">ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 1em;letter-spacing: 0.1em;color: rgb(80, 80, 80);display: block;margin: 0px;">比如在 SWE-bench 验证评估中的顶级表现，能够处理超过 30 小时的复杂多步骤任务，并具有出色的计算机使用能力。ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 20px;font-weight: bold;display: table;margin: 2em auto 1.5em;padding: 6px 0px 6px 16.75px;background: linear-gradient(135deg, rgb(113, 23, 234), rgba(113, 23, 234, 0.667), rgba(234, 96, 96, 0.533), rgba(217, 57, 205, 0.267), rgba(217, 57, 205, 0));color: rgb(255, 255, 255);border-radius: 8px;width: 318.25px;">设计数据解析管道（Design-to-Context Pipeline）ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;margin: 1em 8px;letter-spacing: 0.1em;color: rgb(33, 37, 41);padding: 8px 12px;background: rgba(237, 242, 255, 0.8);border-radius: 8px;">Figma Make 支持使用 Figma 设计文件作为输入，进行提示和应用创作。ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;margin: 1em 8px;letter-spacing: 0.1em;color: rgb(33, 37, 41);padding: 8px 12px;background: rgba(237, 242, 255, 0.8);border-radius: 8px;">这方面的能力来自其多层次的设计数据提取，以此为基础来增强 LLM 的理解能力。其层次结构主要体现在下面三个方面：
ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;margin-left: 0px;padding-left: 1em;color: rgb(63, 63, 63);" class="list-paddingleft-1">1.结构化元数据提取：系统从 Figma 设计文件中抽取完整的布局、组件层级、自动布局约束、颜色令牌、字体和间距变量。 这个过程远超简单的图像分析，因为它能够收集语义级的设计意图信息。2.Model Context Protocol（MCP）集成：Figma MCP 服务器为 LLM 提供三类主要工具，使 AI 能够获得超越视觉层面的设计上下文：- •
get_variable_defs：获取所有设计令牌和变量定义
- 3.设计系统对齐：如果通过Code Connect建立了设计与代码的映射关系， MCP 服务器可直接提供代码文件路径和变量命名，使生成的代码自动遵循项目的架构模式。
代码生成管道和多模式输入处理前面提到，Figma Make 支持多种输入模式，每种都经过不同的处理流程： - •从 Figma Design 导入：直接接入现有设计文件，保留完整的设计元数据和组件结构
Prompt-to-App 转换引擎我们拿最简单的 Prompt 输入举例，系统将用户 Prompt 与设计上下文结合，通过以下步骤生成代码： - 1. 用户输入详细的 Prompt，包含任务描述、设计元素、交互行为和约束条件
- 2. Claude 模型结合提供的设计元数据理解设计意图
- 3. 生成器自动推断响应式布局、交互流程和状态管理逻辑
特定元素级编辑（Point-and-Edit） Figma Make 实现了基于位置的精确编辑机制： - • 支持快速调整颜色、间距、字体、圆角半径等视觉属性
- • 使用
go to source功能快速跳转到控制特定元素的代码
当然，不只是 Prompt 编辑，Figma Make 的画布也融合了设计能力，可以让设计师直接在画布上进行元素级的编辑。  运行时与预览环境还有值得一提的是其运行环境：基于浏览器的 Node 运行时。 Figma Make 运行在自定义的浏览器 Node.js 运行时环境中，该环境与本地开发环境有重要差异： - • 具有特定的库导入配置，不同于标准 npm 安装
- • 提供额外的 CSS 预处理，这些在代码导出时不会完整包含
也就是说，看起来和本地开发环境一样，导出来也有package.json文件，但还是有着不同，这也是你为什么有些提示词不会生效。 React/JSX 代码生成当前 Figma Make 主要输出 React 组件（.tsx文件），使用 Tailwind CSS 作为默认样式解决方案：  - • 生成的代码包含特殊的版本标记（如
@1.2.3），允许运行时动态加载库 - • 支持状态管理和条件渲染的完整 React 模式
作为原型开发工具，这些功能和限制足够了，但是如果想把生成的代码用于生产环境，还需要做一些额外的工作来适配你自己的项目配置。 状态管理与交互流即使作为原型，也不只是一个静态页面就能满足的。 Figma Make内置状态管理机制来支持复杂的交互： - •状态记忆化：保存用户交互后的组件状态（如切换状态、输入值）
设计系统与代码一致性Figma Make 支持设计系统以及设计库集成，也就是说可以实现完全符合你设计规范的原型应用： 同时用户可将现有 Figma Design 库的组件粘贴到 Make 中作为视觉参考： - • Figma Make自动匹配库组件的样式和间距
- • 生成的代码遵循设计系统的视觉规则而无需额外说明
- • 通过 Point-and-Edit 可将泛型组件替换为特定的库组件变体
变量与令牌映射同样的，系统会将设计令牌自动映射到代码中，包含： - • 提取的设计变量（颜色、间距、圆角等）映射为 CSS 变量或 Tailwind 类
这样一套组合下来，生成的应用几乎就可以以假乱真。如果是从零开始的项目，你甚至直接对接后端之后就可以上线使用。 协作与集成能力Figma Make 作为 Figma 平台的原生组件，默认支持实时多人协作，这也是基于 Web 实现的 SaaS 软件的天然优势。 可以给团队成员带来如下好处： 与 Figma Design 的双向集成最新功能Copy Design允许将 Make 输出带回设计画布， 也就是说你用 Prompt 生成的应用可以直接在 Figma 设计器中让设计师进行修改： - • Make 预览可直接复制为可编辑的 Figma 图层
数据与 API 支持另外还有一些功能我看看文档看到的，自己也没有使用过，比如 可集成实时数据源： Prompt 工程最佳实践官网也给出了适合 Make 的 Prompt 最佳实践：结构化 Prompt 设计。 定义了一个有效的 Figma Make Prompt 应包含五个关键维度： - 1.任务（Task）：清晰的行动描述（如「使此按钮触发动画」）
- 2.上下文（Context）：设计在产品流程中的位置和用途
以及如何使用提示词开发一个复杂的项目：分解为可管理的步骤： - • 初始 Prompt 应包含尽可能多的细节以最小化后续迭代
- • 对于大型项目，可显式要求 Make 为每个功能元素创建独立代码文件
- • 如果初始生成效果不理想，重新开始通常比多次修补更高效
文件导出与本地开发最后大家觉得 Make 生成的效果不错，可以把代码下载到本地进行开发，如果用于生产的话， 还是需要一些特殊处理来获得更好的工程特性： - • 使用 Vite 等现代构建工具配置本地项目结构（这个默认就是，尽量不要更改）
- • 需要覆盖运行时特定的库导入路径（移除我们前面提到的版本标记）
- • Tailwind CSS 配置需调整以匹配 Make 的预处理输出（这个可以让 AI 来帮你修改）
限制虽然其对于设计的还原度很高，但是还是存在一些限制，比如： - • 代码输出主要针对 React/Tailwind，暂不直接支持 Vue、SwiftUI 等框架
最后Figma Make 非常适合使用了 Figma 生态的用户，特别是对于项目快速上线来说有很大帮助。 你的设计系统越完善，一次性生成的代码质量就越高，越符合你的设计规范。 当然，如果你没有使用 Figma 来进行 UI 设计，Figma Make 对你来说就完全不必要。 毕竟我们说到 Make 的设计和优点，都是为其生态服务的。如果没有 Design，对于大家来说也就是一个玩具，还要改造他的代码或者你的项目， 意义不是很大。不如直接用 Claude Sonnet 4.5 来的实在。
|
