我用 Figma MCP + Claude Code 构建了像素级UI设计

最近一直在玩claude code，发现它的潜力可不止这些。

这篇文章将教大家使用 Claude Code 配置 Figma MCP 来构建像素级的前端组件。

包括：

• 配置 Composio Figma MCP，这是最好的 Figma MCP 服务器。
• 将 Figma MCP 服务器与 Claude Code 集成以构建前端组件。

接下来将带你一步一步进行实操。

设置Figma MCP服务器和Claude Code

首先使用 Composio 将 Figma MCP 服务器支持添加到我们的 Claude code中。

关于Composio是什么，可以简单看看，

Composio是一个为AI代理提供生产就绪工具集的平台，旨在通过功能调用支持超过250种工具，这些工具涵盖了软件工具、操作系统功能及搜索能力等多个领域，包括Github、Notion、Gmail、Slack和Google等。

Composio不仅提供了支持多种框架的集成，还加强了工具调用的准确性，并且提供了一种白标解决方案用于后端整合。

之前没有创建账户没关系，直接前往 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

运行此命令后，会看到如下内容：

在计划运行 Claude Code 的项目中，确保将该文件复制到本地文件。

将每个项目的 MCP 服务器分开，这在将来为其他项目添加多个服务器时非常有用。

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

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

然后运行 Claude，会看到如下内容：

点击 yes，在 Claude Code 中运行

目前我们只添加了服务器，还没有对 Composio 进行身份验证，以连接到我们的 Figma 帐户。

最后一步是使用 Composio 进行身份验证。

前往该 URL，进行身份验证：

现在可以克隆任何 Figma 设计了！

接下来只需要指向figma的文件链接，就可以与 Claude Code 聊天，让他帮你克隆设计页面。

这是 Figma 模板：

最终为我生成的。

最终几乎精确地为我像素级复刻了页面。

还可以要求它使用 Tailwind 和任何 JS 框架（如 Next.js）进行构建，为了简单起见，使用纯 HTML、CSS 和 JS做得最好。

写在最后

MCP、AI编程和 LLM 的发展速度令人惊叹。

然而，也存在新出现的挑战，特别是在安全性、可用性和可靠性方面。

在没有适当安全控制、认证的情况下信任随机服务器提供商可能是致命的。

本文转载自​​​​AIGC新知​​​​，作者：绛烨