AAperture
Back/product trends

Figma MCP + Claude Code 设计循环

Updated 2026-04-11
1 min read
127 words

Figma MCP + Claude Code 设计循环

核心工作流

Thariq (Anthropic Claude Code 团队) 分享的完整设计-开发循环：

  1. 草图阶段: 在 Figma 中画一个粗糙草图
  2. AI 完善: 让 Claude Code 直接在 Figma 中完善设计
    • 匹配现有 app 风格
    • 建议额外组件
  3. 视觉微调: 在 Figma 中人工微调
  4. 代码实现: 将最终设计发回 Claude Code 实现

关键洞察

Claude 直接操作 Figma，你可以在写任何代码之前先可视化地审阅它的 UI 建议。

这改变了传统的设计-开发流程：

  • 设计建议可视化后再写代码
  • 减少来回沟通成本
  • AI 成为设计协作伙伴

示例 Prompt

In my Figma file [link], I've made a sketch of a new grocery list feature,
can you turn that mockup into something that matches the style of this app,
also add a bunch of extra components that I might want to add.

Sources

Linked from