Integrate Figma MCP and Shadcn MCP to build UI

通过 Figma MCP 与 Shadcn MCP 通过与 AI 聊天打造前端界面

#unsorted

前言

UI 通常仰赖设计者与前端耗费大量时间精力进行组织与维护，近期工作上进行前端翻新也遇到大量陈旧代码需要翻皮的作业，问题是谁有时间一个一个重新替换？

身为开发者就是要又懒又聪明，尝试串上 Figma MCP 与 Shadcn MCP Server 让我们通过与 AI 聊天就能精准打造前端界面。

Figma MCP

目前本地 Figma 软件🔗 提供 beta MCP Server🔗 功能，且设置起来十分简单，不到三步骤！

  "mcpServers": {
    "Figma Dev Mode MCP": {
      "url": "http://127.0.0.1:3845/mcp"
    }
  }

开始 Prompt！举例：

Take the selected frame in Figma and convert it to a website layout using HTML and tailwind CSS

以上就能通过和 AI 对话直接从 Figma 生成可用的界面代码，最好可以留意 Figma MCP 最佳实践🔗：

对任何需要重复使用的元素使用组件（例如按钮、卡片、输入框等）。
通过 Code Connect🔗 将组件链接到代码库。这是确保代码中一致性重用组件的最佳方式。若没有这么做，模型只能依靠猜测。
使用变量来设置间距、颜色、圆角和字体。
语义化命名图层（例如用 CardContainer，而不是 Group 5）。
使用 Auto layout🔗 来表达响应式设计的意图。

如果对重复提醒 AI 如何更好的使用 Figma MCP，官方也有提供通用的示例规则🔗：

- IMPORTANT: Always use components from `/path_to_your_design_system` when possible
- Prioritize Figma fidelity to match designs exactly
- Avoid hardcoded values, use design tokens from Figma where available
- Follow WCAG requirements for accessibility
- Add component documentation
- Place UI components in `/path_to_your_design_system`; avoid inline styles unless truly necessary

很多时候从头打造一个可用的设计系统不太实际，于是最成熟最快速且免费开源的方案接下来我选择 Shadcn。

Shadcn MCP

Shadcn 是目前前端最热门的开源组件集，各种主流框架皆有支持（React、Vue、Svelte），通过 Shadcn MCP🔗 安装提供 AI 适当的工具快速搭建对应框架的组件集。最好能附上 GitHub Token🔗，原因是因为 Shadcn MCP 背后是通过 GitHub API 来取得 Shadcn 组件集相关资料，为了避免频繁查询被限速阻挡才需要提供。

  "mcpServers": {
    "shadcn-ui": {
      "command": "npx",
      "args": [
        "@jpisnice/shadcn-ui-mcp-server",
        "--github-api-key",
        "ghp_your_token_here"
      ]
    }
  }

官方也有提供示例 Prompts🔗 与其互动，例如：

"Show me the shadcn/ui button component"
"Show me how to use the card component"
"Get the dashboard-01 block implementation"
"Help me build a login form using shadcn/ui components"

Figma & Shadcn & AI 的组合互动

当开发环境设置好 Figma MCP 与 Shadcn MCP 后，通过适当的指令和操作就能从 AI 调用 MCP 的工具与上下文达成更好且更一致的 UI 创建：

Take the selected frame in Figma and covert it to a website layout using Shadcn vue as much as possable, modify content in baz.vue

举例通过引入现成的 Figma 组件与变量实践：@shadcn/ui components with variables & Tailwind classes - Updated July 2025🔗 能够快速的打造产品的视觉并与前端切齐所有使用到的 UI 变量与常见组件。通过 Figma MCP + Shadcn MCP，在 Vibe Coding 同时也能使用现成的组件集或画面变量，鼓励组件逻辑的重复使用与采纳现有轮子。

总结

发现对于小团队来说维护一套设计系统与前端组件是不太实际的事，如果前端能把时间着重在进行产品商业层面与使用体验的规划，且交由 AI 学会引用已经定义好的最佳实践，我们将能解放生产力做更多有意义的事。

在这基础之上还有许多细节可以更好的地方，像是如果 Figma 稿件实践起来模糊不清，产生的代码也会相同的烂，还有自动测试案例的撰写。

上面看起来一连套串接好像很厉害，能做出不错的东西，但实际尝试 AI 还是有不少很蠢的时候，这项技术尝试很好，但距离实际应用还待实验与观望⋯⋯

全站搜寻

通过 Figma MCP 与 Shadcn MCP 通过与 AI 聊天打造前端界面

前言

Figma MCP

Shadcn MCP

Figma & Shadcn & AI 的组合互动

总结

延伸阅读