从 Figma 设计到使用 Figma MCP 和 Claude Code 制作像素级精细组件 🧙🪄

Figma 是近十年来涌现出的最佳工具之一。无论组织规模大小，几乎所有人都用 Figma 来做所有事情，从落地页到仪表盘。如果你也曾是那些被指派将设计稿转化为像素级完美应用组件的倒霉蛋之一，我完全理解你的感受。因为我也经历过。

好消息是，有了这些先进的技术，LLM、CLI 代理和 MCP，事情将会变得容易得多。

GIF

是的，我最近一直在使用 Claude Code；这是继梅西的 FIFA 22 活动之后人类遇到的最好的事情（请不要生气），用它连接 MCP 服务器可以产生奇效。

在这篇博文中，我将分享如何将 Figma MCP 与 Claude Code 结合使用，以构建像素级完美的前端组件。

涵盖哪些内容？

配置 Composio Figma MCP（顺便说一句，这是最好的 Figma MCP 服务器！）。试试就知道了。

将 Figma MCP 服务器与 Claude Code 集成，用于构建前端组件。（您也可以将其与 Cursor 和 Gemini CLI 一起使用，但我更喜欢 Claude Code。）

设置 Figma MCP 服务器和 Claude Code

💁 我们将使用 Composio 为我们的 Claude Code 添加 Figma MCP 服务器支持。

您无需创建帐户；前往 mcp.composio.dev，然后在 Figma 集成下生成命令。

命令应该类似于这样：

npx @composio/mcp@latest setup "<https://mcp.composio.dev/partner/composio/figma/mcp?customerId=><customer_id>" "figma-605dcr-13" --client claude

💡注意：您也可以使用几乎相同的命令来设置 Cursor。唯一的区别是将 `--client` 参数更改为 `--client` 以使用 Cursor，仅此而已。之后，您就可以开始克隆任何设计了。
运行此命令后，您应该会看到类似这样的输出：

如您所见，默认情况下，它会保存到 .mcp.json 文件~/.config/Claude/claude_desktop_config.json。
但是，我更倾向于不将其保存到全局目录。因此，在您计划运行 Claude Code 的项目中，请确保将该文件复制到本地的 .mcp.json 文件中。

这有助于将 MCP 服务器按项目分开，这对于将来为其他项目添加多个服务器非常有用。

运行以下命令将文件复制到当前目录：

cp ~/.config/Claude/claude_desktop_config.json .mcp.json

这样做的话，整个设置过程就基本完成了。

在您刚刚复制了 .mcp.json 文件的项目中运行 Claude，您应该会看到类似这样的内容：

点击“是”，然后在 Claude Code 中运行 /mcp。您应该会看到 MCP 服务器的最新状态为已连接，您还可以查看所有工具的列表。

现在，Claude这边需要做的设置就这些了。还剩最后一个小步骤，正如你所料，那就是通过Composio进行身份验证。

目前，我们只添加了服务器，但尚未对 Composio 进行身份验证以连接到我们的 Figma 帐户。因此，请在 Claude Code 中，让它发起与 Figma MCP 服务器的连接，它应该会提供一个 URL。

访问该网址，您应该可以像这样完成身份验证：

就这样，大功告成！现在你可以克隆任何 Figma 设计，无论它多么复杂！

演示

💁 在这个演示中，我将克隆 Figma 中的一个 CRM 仪表板设计示例。

您只需要提供 Figma 文件的链接。和 Claude Code 聊聊，然后就可以坐等了。您的克隆人将在几秒钟内准备就绪。

提示：请根据这个 Figma 设计克隆仪表盘。使用 HTML、CSS 和 JS。务必完全复制原设计，不要发挥创意，务必做到一模一样。

这是 Figma 模板：

它生成了以下结果：

正如你所见，它几乎完全复制了原始设计。你可以让它使用 Tailwind 和任何 JS 框架（例如 Next.js）构建，但为了简单起见，我让它使用纯 HTML、CSS 和 JS，它的表现相当不错。

以下是视频演示：

您可以在这里找到它生成的完整代码：Figma 仪表板的代码。

结论

MCP、编码代理和LLM的发展速度令人瞩目。然而，随之而来的是一些新的挑战，尤其是在安全性、可用性和可靠性方面。在缺乏适当安全保障的情况下，随意信任服务器提供商可能会造成致命的后果。这正是Composio的宗旨所在。更多信息，请访问信任页面。

此外，如果您在我们基础上进行开发，请在 Twitter 和 LinkedIn 上标记我们，即可获得免费积分。