AI导哈

Figma MCP 代码生成工具

一个用于探索 Figma MCP 集成的演示 Web 应用，通过 AI 生成代码。

  • by madhikarma
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 madhikarma/figma-mcp-demo

使用说明

Figma MCP演示

用于探索Figma MCP集成的演示web应用程序（用于通过AI生成代码）

该项目是通过以下方式启动的 创建React应用程序.（已弃用）

  • npm install -g create-react-app
  • npx create-react-app figma-mcp-demo

环境

  • nodeJShttps://nodejs.org/en/download
  • 光标
  • Figma

安装

安装依赖项

  • npm install

启动本地web服务器（在本地web浏览器中查看结果）

  • npm run start

设置

按照以下说明配置Figma MCP服务器https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Dev-Mode-MCP-Server

光标

  • 光标设置>添加新的MCP工具
{
    "mcpServers": {
        "Figma": {
            "url": "http://127.0.0.1:3845/sse"
        }
    }
}
Expand to view screenshots ![figma-mcp-demo-cursor-settings-0](screenshots/figma-mcp-demo-cursor-settings-0.png) ![figma-mcp-demo-cursor-settings-1](screenshots/figma-mcp-demo-cursor-settings-1.png) ![figma-mcp-demo-cursor-settings-2](screenshots/figma-mcp-demo-cursor-settings-2.png)

Figma

  • 启用MCP开发服务器（注意：不适用于免费计划（仅适用于团队或企业）以及开发或全席位）
Expand to view screenshots ![figma-mcp-figma-settings](screenshots/figma-mcp-figma-settings.png)

用法

Figma

  • 将URL复制到Figma组件（或节点）
    • 例如，使用个人项目中的示例PrimaryButton组件@https://www.figma.com/design/kQSjh7sw77rH4jNflXpKX2/MCP-Demo?node-id=1-6&m=dev

光标

  • 要求Cursor（或代理）生成代码
    • 例如 Create React component for @https://www.figma.com/design/kQSjh7sw77rH4jNflXpKX2/MCP-Demo?node-id=1-6&m=dev

演示

为Figma PrimaryButton组件创建React组件

Expand to view screenshots ![figma-mcp-demo1](demo/figma-mcp-demo1.gif) ![figma-mcp-demo2](demo/figma-mcp-demo2.gif)

截图

Expand to view screenshots

演示

Expand to view demos ![figma-mcp-demo1](demo/figma-mcp-demo1.gif) ![figma-mcp-demo2](demo/figma-mcp-demo2.gif)

故障排除

  • 提示时出现403个错误？
    • 确保您拥有一个非免费帐户（专业版或企业版）和一个正式版或开发版席位
    • 确保你的Figma文件在Figma项目中
  • 将MCP添加到Cursor后，重新启动Figma
  • 检查浏览器中的MCP服务器是否正在运行http://127.0.0.1:3845/sse
Expand to view old README ## Available Scripts

在项目目录中，您可以运行：

npm start

在开发模式下运行应用程序。
打开 http://localhost:3000 在浏览器中查看。

当您进行更改时，页面将重新加载。
您还可以在控制台中看到任何lint错误。

npm test

在交互式观察模式下启动测试运行器。
请参阅以下部分 运行测试 了解更多信息。

npm run build

为生产构建应用程序 build 文件夹。
它正确地将React捆绑在生产模式中，并优化构建以获得最佳性能。

构建被缩小，文件名包括哈希值。
您的应用程序已准备好部署！

请参阅以下部分 部署 了解更多信息。

npm run eject

注意：这是一个单向操作。曾经的你 eject你不能回去！

如果您对构建工具和配置选择不满意，可以 eject 在任何时候。此命令将从项目中删除单个生成依赖项。

相反，它会将所有配置文件和可传递依赖项（webpack、Babel、ESLint等）直接复制到您的项目中，这样您就可以完全控制它们。除以下命令外的所有命令 eject 仍然可以工作，但它们会指向复制的脚本，以便您可以对其进行调整。此时，你只能靠自己了。

你永远不必使用 eject。精心策划的功能集适用于中小型部署，您不应该觉得有义务使用此功能。但是，我们理解，如果您在准备使用时无法对其进行自定义，则此工具将毫无用处。

了解更多

您可以在 创建React应用程序文档.

要学习React，请查看 React文档.

代码拆分

本节已移至此处： https://facebook.github.io/create-react-app/docs/code-splitting

分析捆绑包大小

本节已移至此处： https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

制作渐进式Web应用程序

本节已移至此处： https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

高级配置

本节已移至此处： https://facebook.github.io/create-react-app/docs/advanced-configuration

部署

本节已移至此处： https://facebook.github.io/create-react-app/docs/deployment

npm run build 无法缩小

本节已移至此处： https://facebook.github.io/create-react-app/docs/troubleshooting#npm-运行构建无法缩小

相关 MCP