最近一直在玩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新知????，作者：絳燁