Figma Make：Claude vs.Gemini

微信 ezpoda免费咨询：AI编程 | Vibe Coding | OpenClaw安装

AI 正在重塑我们设计产品的方式，工具也在快速演进。Figma Make 是 Figma 的提示词到代码原型设计工具，现在允许你选择哪种 AI 模型为你的输出提供动力，Claude 4.6 和 Gemini 3 是两个主要选项。但模型的选择真的重要吗？

为了找出答案，我为两个模型提供了相同的详细提示词，并比较了结果。以下是我关于每个模型如何在 Figma Make 中处理复杂 UI 生成的发现，以及目前哪个能提供更好的体验。

1、什么是 Figma Make

Figma Make 是一个 AI 驱动的提示词到代码工具，是 Figma 生态系统的一部分。虽然它的名字中有"Figma"，但 Make 与传统的 Figma 设计文件截然不同。你不需要手动组装静态框架和组件，而是用普通语言描述你想要的内容，Make 就会为你生成一个完全交互式的、高保真的原型，并在底层运行可工作的 React 和 Tailwind CSS 代码。

2、创建产品的初始提示词

我将使用 Figma Make 创建一个财务仪表板。

为了获得更精确的结果，我将使用一个涵盖 6 个方面的提示词：上下文（产品是什么）、描述（这个特定屏幕做什么）、平台（移动端、桌面端、响应式）、视觉风格（调色板、排版、氛围）、UI 组件（要包含的特定元素）和交互：

上下文。这一部分告诉 Make 谁在使用产品以及该屏幕在体验流程中的位置。没有它，Make 无法判断合适的复杂度、语气或信息密度。命名产品（"Vaultline"），定义受众（25-40 岁的专业人士），并列出竞争对手，可以让 AI 有一个心理模型可以参考。提到用户已经关联了账户，可以防止 Make 生成入门引导提示词或空状态。

描述。上下文设定场景，而描述定义了这个特定屏幕的目的。三个问题的框架（"我有多少钱？钱去哪里了？我在正轨上吗？"）为 Make 提供了一个清晰的信息层次结构。关于可扫描性优先于密度的注释是一个塑造布局决策的设计原则；没有它，AI 可能会塞进它能想到的每一个数据点。时间范围选择器的指令确保所有小部件共享一致的数据范围。

平台。明确的视口宽度、网格规范和侧边栏尺寸可以防止 Make 猜测布局结构。12 列网格和 24px 的间距为 AI 提供了一个精确的空间框架。响应式断点指令（1024px 时折叠侧边栏）确保输出不仅仅是为一个屏幕尺寸设计的。没有这些数字，Make 会默认使用自己的假设，这可能不匹配你的网格系统或断点策略。

视觉风格。这是许多提示词不足的地方。像"深色模式，现代感觉"这样的模糊指令会产生通用的结果。具体的十六进制代码、字体大小、间距值和边框半径为 Make 提供了精确的目标。氛围描述（"为消费者重新设计的彭博终端"）传达了纯数字无法传达的意图——它告诉 Make 倾向于数据密度和复杂性，而不是趣味性。避免使用阴影并使用微妙的边框是区分精炼输出与粗糙输出的那种微决策。

CONTEXT
这是"Vaultline"的主仪表板，一个个人财务管理
Web 应用程序，面向千禧一代和 Z 世代专业人士（25-40 岁），
他们希望对自己的资金有一个清晰、统一的视图。用户已经
完成了入门引导，并关联了他们的银行账户、信用卡
和投资组合。仪表板是他们登录后看到的第一个屏幕。该产品
与 Mint、Copilot 和 Monarch Money 竞争。

DESCRIPTION
这个屏幕作为财务指挥中心——用户可以在不导航到
子页面的情况下评估其整体财务健康状况的单一视图。
它应该一目了然地回答三个问题：
1. 我现在有多少钱？（净资产和账户余额）
2. 我的钱这个月去哪里了？（按类别分类的支出明细）
3. 我在正轨上吗？（预算进度和储蓄目标）

仪表板应该感觉平静且信息丰富，而不是令人不知所措。
优先考虑可扫描性而不是密度。用户应该能够打开
这个屏幕 10 秒钟，然后离开时知道自己的状况。

页面包含一个时间范围选择器（本月 / 过去 30 天 /
过去 90 天 / 年初至今 / 自定义），可以同时更新所有数据小部件。
所有货币值都应使用格式正确的美元真实样本数据
（$12,450.00）。

PLATFORM
桌面优先的响应式 Web 应用程序。
- 主视口：1440px 宽
- 布局应使用固定的左侧侧边栏（240px）用于导航
  和可滚动的主内容区域
- 内容区域应使用 12 列网格和 24px 间距
- 设计应在缩小到 1024px 时仍然可用，而无需水平
  滚动（侧边栏在此断点处折叠为图标）

VISUAL STYLE
- 调色板：深色主题界面，带有近乎黑色的背景
  （#0D0F14）和深灰色卡片表面（#161920）。使用柔和的蓝绿色
  （#3ECFB4）作为正值和 CTA 的主要强调色。使用
  柔和的珊瑚色（#FF6B6B）用于负值、超支和警报。
  辅助文本使用柔和的灰色（#8A8F9C）。白色（#F2F3F5）用于主要文本。
- 排版：使用 Inter。仪表板标题为 24px/半粗体。卡片标题
  为 14px/中等，带大写字母间距（0.04em）。关键财务
  数据为 32px/粗体。正文文本和标签为 13px/常规。
- 边框半径：卡片上为 12px，按钮和输入框上为 8px，头像和状态指示器上为完全圆角。
- 间距：卡片之间的间距为 24px。卡片内部填充为 20px。
  卡片标题和卡片内容之间的间距为 16px。
- 氛围：精致、值得信赖且极简——就像为消费者重新设计的
  彭博终端。避免俏皮的插图或卡通图标。通过非常轻微的
  卡片提升（8% 白色不透明度的 1px 边框，无阴影）使用微妙的深度。

UI COMPONENTS

1. 左侧侧边栏导航
   - 顶部有 Vaultline 标志（仅图标，无文字）
   - 带有图标和标签的导航项：仪表板（活动状态）、
     交易、预算、目标、投资、信用评分、设置
   - 活动状态：左侧有蓝绿色强调条、蓝绿色图标、
     白色标签文本
   - 非活动状态：灰色图标和标签
   - 侧边栏底部有用户头像（32px 圆形）和名字
   - 侧边栏右上角有折叠切换按钮

2. 顶部栏
   - 左侧有页面标题"Dashboard"
   - 中间有时间范围选择器（分段控件）
   - 右侧有带红点指示器的通知铃铛图标和"Connect Account"按钮

3. 净资产摘要卡（内容区域的全宽）
   - 大的净资产数据（$47,832.19），带有绿色/蓝绿色百分比
     变化徽章（与上月相比 +2.4%）
   - 下方：显示个人余额的 4 个迷你账户卡的横向行：
     • 支票账户（$8,240.50 — Chase）
     • 储蓄账户（$22,100.00 — Marcus）
     • 投资（$14,891.69 — Fidelity）
     • 信用卡（-$2,400.00 — Amex，以珊瑚色显示）
   - 每个迷你卡片显示：账户图标、账户名称、机构
     和余额

4. 支出分类卡（两列行的左侧三分之二）
   - 中心显示按类别分类的支出的圆环图
   - 类别：住房（35%）、餐饮（22%）、交通（14%）、
     购物（12%）、订阅（9%）、其他（8%）
   - 每个类别在图表右侧都有彩色点图例标签
   - 图表下方：本期支出总额（$3,820.00）与
     上期（$3,540.00）的比较及百分比

5. 预算进度卡（同一行的右侧三分之一）
   - 4 个预算类别的垂直列表，每个包含：
     • 类别名称和图标
     • 水平进度条（填充部分为类别颜色，
       轨道为深灰色）
     •"已支出 / 预算"文本（例如，"$640 / $800"）
     • 如果支出超过预算的 90%，则显示警告图标
   - 类别：杂货、外出就餐、娱乐、购物

6. 储蓄目标卡（下一行的左侧三分之一）
   - 两个堆叠的目标项：
     •"应急基金"——径向进度环显示 72%（$14,400
       of $20,000），预计完成日期
     •"度假基金"——径向进度环显示 45%（$2,250
       of $5,000），预计完成日期
   - 每个目标都有一个小的蓝绿色"添加资金"文本链接

7. 月度现金流卡（同一行的右侧三分之二）
   - 条形图显示过去 6 个月每个月的收入与支出
   - 收入条为蓝绿色，支出条为柔和的板岩蓝（#3A4055）
   - X 轴：月份标签（9 月、10 月、11 月、12 月、1 月、2 月）
   - Y 轴：美元金额
   - 一条水平虚线表示平均每月盈余
   - 悬停状态：工具提示显示该月的确切收入、支出和
     净额

8. 最近交易列表（全宽，卡片下方）
   - 表格标题：日期 | 描述 | 类别 | 账户 | 金额
   - 显示 5 个最近的交易，带有真实数据
   - 正数金额（收入/退款）为蓝绿色，负数为白色
   - 每行都有一个类别图标/颜色点
   - 表格右下角有"查看所有交易"链接

INTERACTIONS
- 所有图表都应显示确切数值的悬停工具提示
- 单击任何账户迷你卡会导航到该账户的详细信息视图
- 单击预算类别会打开详细分类
- 时间范围选择器以平滑过渡更新所有小部件
- 侧边栏导航项显示微妙的悬停状态（背景
   高亮为 6% 白色不透明度）
- "Connect Account"按钮具有轻微背景
   颜色变化的悬停状态

3、Claude 4.6

Figma Make 允许你选择 Claude 4.6 Opus（旗舰智能模型）或 Claude 4.6 Sonnet（接近旗舰的性能，但成本要低得多）。根据 NXCode 的测试结果，Claude 4.6 Opus 和 4.6 Sonnet 在编码方面表现出几乎相同的结果（Sonnet 4.6 为 79.6%，Opus 4.6 为 80.8%，但 Sonnet 约便宜 40%）。

对于我的测试，我会选择 Opus，因为我的目标是用 AI 创建尽可能好的设计。一旦我提交初始提示词并在 Figma Make 中选择 Claude 4.6 Opus 作为模型，AI 就开始处理任务，不到 5 分钟，它就会生成以下结果：

设计是根据我在初始提示词中提供的说明创建的。布局完全响应式，并具有交互元素（例如，图表的加载动画）。然而，有 8 个次要的警告消息，AI 注意到了这些消息并邀请我们修复。这些警告都不会严重影响此设计的性能，所以我们可以跳过它。

4、Gemini 3

Gemini 3 是来自 Google 的顶级 AI 模型。它是 Claude 4.6 的直接竞争对手，在各种任务（包括编码）中都表现出扎实的性能。非常有趣的是，Gemini 3 Flash 模型（更快、更具成本效益的模型）在许多任务中的表现优于 Gemini 3 Pro（例如，根据 Introl 的研究，Gemini 3 Flash 的代码输出质量为 78%，而 Gemini 3 Pro 仅为 76.2%）。

但因为我想要进行公平的比较，我会选择 Gemini 3 Pro 模型进行初始尝试。

一旦我提交了提示词，AI 在任务上工作了大约 5 分钟，最终得到了以下错误消息。我点击了 Try again 几次，但反复遇到相同的状态（模型过载），所以我放弃了，并将 AI 模型切换到 Gemini 3 Flash。

使用 Gemini 3 Flash 的情况要好得多（仅仅因为它正在构建东西，而不仅仅是立即向我显示错误消息），但从文本提示词到实现仍然花了大约半个小时。在此期间，我看到了一个空白的深色屏幕（版本 2），它本应该是一个真正的产品，一个带有 AI 自动检测到的错误的空白白屏（版本 4），最后，版本 5 展示了 AI 为我创建的设计。

下面是 Gemini 3 Flash 为我的仪表板创建的设计，正如你所见，它在视觉上看起来不错（就像 Claude 4.6 一样，Gemini 3 Flash AI 遵循了提示词并生成了一个很好的输出），但它缺少一个重要的元素（月度现金流）。

很难说 Gemini 3 的问题是一次性的还是持续性的，但我强烈认为 Gemini 3 模型在 Figma Make 中的集成没有像 Claude 那样经过严格的测试（Figma Make 是在底层使用 Claude 创建的，而 Gemini 3 是后来作为不错的补充添加的）。

5、最终比较与总结

Claude 4.6 和 Gemini 3 都是优秀的 AI 模型，它们在编码方面表现出惊人的性能。这些模型遵循了我的提示词，并生成了几乎相似的输出（你可以在下面看到并排比较）

然而，我认为 Figma Make 目前对 Claude 4.6 的优化更好。如果预选 Gemini 3，你可能需要进行多轮初始迭代才能修复问题。

原文链接：Figma Make with Claude 4.6 or Gemini 3

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