最近一直在玩claude code，發(fā)現(xiàn)它的潛力可不止這些。

這篇文章將教大家使用 Claude Code 配置 Figma MCP 來構(gòu)建像素級(jí)的前端組件。

包括：

• 配置 Composio Figma MCP，這是最好的 Figma MCP 服務(wù)器。
• 將 Figma MCP 服務(wù)器與 Claude Code 集成以構(gòu)建前端組件。

接下來將帶你一步一步進(jìn)行實(shí)操。

設(shè)置Figma MCP服務(wù)器和Claude Code

首先使用 Composio 將 Figma MCP 服務(wù)器支持添加到我們的 Claude code中。

關(guān)于Composio是什么，可以簡(jiǎn)單看看，

Composio是一個(gè)為AI代理提供生產(chǎn)就緒工具集的平臺(tái)，旨在通過功能調(diào)用支持超過250種工具，這些工具涵蓋了軟件工具、操作系統(tǒng)功能及搜索能力等多個(gè)領(lǐng)域，包括Github、Notion、Gmail、Slack和Google等。

Composio不僅提供了支持多種框架的集成，還加強(qiáng)了工具調(diào)用的準(zhǔn)確性，并且提供了一種白標(biāo)解決方案用于后端整合。

之前沒有創(chuàng)建賬戶沒關(guān)系，直接前往 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

運(yùn)行此命令后，會(huì)看到如下內(nèi)容：

在計(jì)劃運(yùn)行 Claude Code 的項(xiàng)目中，確保將該文件復(fù)制到本地文件。

將每個(gè)項(xiàng)目的 MCP 服務(wù)器分開，這在將來為其他項(xiàng)目添加多個(gè)服務(wù)器時(shí)非常有用。

運(yùn)行以下命令將文件復(fù)制到當(dāng)前目錄：

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

然后運(yùn)行 Claude，會(huì)看到如下內(nèi)容：

點(diǎn)擊 yes，在 Claude Code 中運(yùn)行

目前我們只添加了服務(wù)器，還沒有對(duì) Composio 進(jìn)行身份驗(yàn)證，以連接到我們的 Figma 帳戶。

最后一步是使用 Composio 進(jìn)行身份驗(yàn)證。

前往該 URL，進(jìn)行身份驗(yàn)證：

現(xiàn)在可以克隆任何 Figma 設(shè)計(jì)了！

接下來只需要指向figma的文件鏈接，就可以與 Claude Code 聊天，讓他幫你克隆設(shè)計(jì)頁(yè)面。

這是 Figma 模板：

最終為我生成的。

最終幾乎精確地為我像素級(jí)復(fù)刻了頁(yè)面。

還可以要求它使用 Tailwind 和任何 JS 框架（如 Next.js）進(jìn)行構(gòu)建，為了簡(jiǎn)單起見，使用純 HTML、CSS 和 JS做得最好。

寫在最后

MCP、AI編程和 LLM 的發(fā)展速度令人驚嘆。

然而，也存在新出現(xiàn)的挑戰(zhàn)，特別是在安全性、可用性和可靠性方面。

在沒有適當(dāng)安全控制、認(rèn)證的情況下信任隨機(jī)服務(wù)器提供商可能是致命的。

本文轉(zhuǎn)載自????AIGC新知????，作者：絳燁