AI导哈

Figma MCP代码生成工具

一款基于Figma MCP服务器的代码生成工具，支持通过提示词自动生成React组件代码，适用于前端开发效率提升。

  • by hoang-minh-ekn
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 hoang-minh-ekn/figma-mcp-demo

使用说明

Figma MCP电源快速测试

设置

  • 在figma应用程序中启用MCP服务器
  • 添加MCP服务器
{
  "figma-desktop": {
    "type": "http",
    "url": "http://127.0.0.1:3845/mcp"
  }
}

代理上下文

  • 型号：GPT-4
  • 确保所有上下文文件都已导入代理聊天中

开始

  • 运行dev
 yarn && yarn dev

示例

示例1-Figma代币

A.不良按钮提示

Create this button with default and hover state:
https://www.figma.com/design/4lOOrIjgpDR2pR1QHfkGVm/For-gen-code?node-id=133-1041&m=dev

File: /components/example-1/bad-button.tsx

Context (strict follow these files):
#file:figma-mcp.prompt.md
#file:copilot-instructions.md
#file:tailwindcss.prompt.md

B.良好按钮提示

Create this button:
https://www.figma.com/design/4lOOrIjgpDR2pR1QHfkGVm/For-gen-code?node-id=1-1057&m=dev

File: /components/example-1/good-button.tsx

Context:
#file:figma-mcp.prompt.md #file:copilot-instructions.md #file:tailwindcss.prompt.md

示例2-组件

A.非组件版本

Create this link button with default and hover state:
https://www.figma.com/design/4lOOrIjgpDR2pR1QHfkGVm/For-gen-code?node-id=158-1023&m=dev

File:/components/example-2/bad-link-button.tsx

Context (strict follow these files):
#file:figma-mcp.prompt.md
#file:copilot-instructions.md
#file:tailwindcss.prompt.md

B.组件化版本

Create this link button with default and hover state:
https://www.figma.com/design/4lOOrIjgpDR2pR1QHfkGVm/For-gen-code?node-id=1-1062&m=dev

File: /components/example-2/good-link-button.tsx

Context (strict follow these files):
#file:figma-mcp.prompt.md
#file:copilot-instructions.md
#file:tailwindcss.prompt.md

示例3-命名

A.带有BEM命名的标题

Create this header component:
https://www.figma.com/design/4lOOrIjgpDR2pR1QHfkGVm/For-gen-code?node-id=182-1081&m=dev

File: /components/example-3/header-with-bem.tsx

Context (strict follow these files):
#file:figma-mcp.prompt.md
#file:copilot-instructions.md
#file:tailwindcss.prompt.md

示例4-自动布局

A.没有自动布局的页眉

Create this header component:
https://www.figma.com/design/4lOOrIjgpDR2pR1QHfkGVm/For-gen-code?node-id=182-1083&m=dev

File: /components/example-4/bad-header.tsx

Context (strict follow these files):
#file:figma-mcp.prompt.md
#file:copilot-instructions.md
#file:tailwindcss.prompt.md

B.带有自动布局的页眉

Create this header component:
https://www.figma.com/design/4lOOrIjgpDR2pR1QHfkGVm/For-gen-code?node-id=182-1081&m=dev

File: /components/example-4/good-header.tsx

Context (strict follow these files):
#file:figma-mcp.prompt.md
#file:copilot-instructions.md
#file:tailwindcss.prompt.md

相关 MCP