Cursor Talk To Figma MCP 使用教程

Cursor Talk To Figma MCP 使用教程

cursor-talk-to-figma-mcp Cursor Talk To Figma MCP cursor-talk-to-figma-mcp 项目地址: https://gitcode.com/gh_mirrors/cu/cursor-talk-to-figma-mcp

1. 项目的目录结构及介绍

Cursor Talk To Figma MCP 项目是一个开源项目,它实现了Cursor AI和Figma之间的模型上下文协议(MCP)集成。以下是项目的目录结构及其介绍:

cursor-talk-to-figma-mcp/
├── images/                      # 存放项目相关图片
├── scripts/                     # 存放JavaScript脚本文件
├── src/                         # 源代码目录
│   ├── talk_to_figma_mcp/       # TypeScript MCP服务器,用于Figma集成
│   ├── cursor_mcp_plugin/       # Figma插件,用于与Cursor通信
│   ├── socket.ts                # WebSocket服务器,用于MCP服务器与Figma插件之间的通信
├── .gitignore                   # 指定Git忽略的文件和目录
├── Dockerfile                   # Docker配置文件
├── LICENSE                      # 项目许可证文件
├── bun.lock                     # bun包管理器的锁定文件
├── package.json                 # Node.js项目配置文件
├── readme.md                    # 项目自述文件
└── tsconfig.json                # TypeScript配置文件

2. 项目的启动文件介绍

项目的启动主要涉及到几个关键脚本:

  • bun setup: 这个命令用于设置项目环境,并安装必要的依赖。
  • bun socket: 启动WebSocket服务器,它是Cursor AI和Figma插件之间的通信桥梁。
  • bunx cursor-talk-to-figma-mcp: 启动MCP服务器,它是Figma集成的核心。

在项目的根目录下,通过命令行执行上述命令,可以启动整个项目。

3. 项目的配置文件介绍

项目的主要配置文件是 ~/.cursor/mcp.json,它用于配置Cursor AI的MCP服务器。以下是一个配置示例:

{
  "mcpServers": {
    "TalkToFigma": {
      "command": "bunx",
      "args": ["cursor-talk-to-figma-mcp"]
    }
  }
}

在这个配置文件中,你需要指定一个MCP服务器,这里名为 "TalkToFigma"。command 字段指定了启动MCP服务器的命令,而 args 字段则指定了该命令的参数。

此外,WebSocket服务器在 src/socket.ts 中配置。如果需要在Windows WSL环境下运行,需要取消注释该文件中的 hostname 配置:

// uncomment this to allow connections in windows wsl
hostname: "0.0.0.0",

以上是Cursor Talk To Figma MCP项目的启动和配置文件的基本介绍。按照这些步骤操作,可以顺利地启动并运行该项目。

cursor-talk-to-figma-mcp Cursor Talk To Figma MCP cursor-talk-to-figma-mcp 项目地址: https://gitcode.com/gh_mirrors/cu/cursor-talk-to-figma-mcp

创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

### Figma MCP 下载与安装 Figma MCP(Model Context Protocol)工具或插件的下载和安装需要根据具体的项目需求进行操作。以下内容详细说明了如何获取并配置 Figma MCP 工具。 #### 1. 获取 Figma-Context-MCP 开源项目 Figma-Context-MCP 是一个开源项目,用于通过 Model Context Protocol (MCP) 授权 Cursor 访问 Figma 文件的设计数据[^3]。可以直接从其 GitHub 仓库下载源代码: ```bash git clone https://github.com/GLips/Figma-Context-MCP.git ``` 将上述命令复制到终端中运行,即可克隆该项目到本地环境。 #### 2. 安装依赖 进入克隆下来的项目目录后,使用以下命令安装项目所需的依赖: ```bash npm install ``` 或者如果项目支持 `bun`,可以使用: ```bash bun install ``` #### 3. 配置 CursorMCP 文件 为了使 Cursor 能够与 Figma MCP 正常通信,需要修改 CursorMCP 配置文件 `~/.cursor/mcp.json`。以下是配置示例: ```json { "mcpServers": { "TalkToFigma": { "command": "bunx", "args": ["cursor-talk-to-figma-mcp"] }, "figma-developer-mcp": { "command": "npx", "args": ["-y", "figma-developer-mcp", "--stdio"], "env": { "FIGMA_API_KEY": "YOUR_FIGMA_API_KEY" }, "disabled": false, "alwaysAllow": [], "timeout": 300 } } } ``` 请确保替换 `YOUR_FIGMA_API_KEY` 为您的实际 Figma API 密钥[^4]。 #### 4. 获取 Figma API 密钥 登录 [Figma 官网](https://www.figma.com/) 后,按照以下步骤生成 API 密钥: 1. 进入个人账户设置。 2. 点击“安全”选项卡。 3. 在“开发者访问令牌”部分,点击“生成新令牌”。 4. 设置 Scopes 权限(建议选择所有权限以确保正常工作),然后生成令牌。 5. 将生成的令牌复制并保存在安全的地方,稍后用于配置 MCP 文件。 #### 5. 安装并启用 Figma 插件 根据引用[2]中的说明,安装并启用 Figma 插件。插件的具体安装方式可能因项目而异,通常可以通过以下步骤完成: 1. 打开 Figma 并进入插件市场。 2. 搜索相关插件名称(如 Cursor 提供的插件)。 3. 安装并授权插件访问您的设计文件。 #### 6. 测试连接 完成上述步骤后,可以通过以下方式测试 Figma MCP 的连接是否成功: - 输入类似以下的 Prompt:`https://www.figma.com/design/peQdY7TFFFKqt9BzH0yeGd/Figma-basics?node-id=0-739&m=dev 使用 figma MCP 实现它,写入 src/app/index.html 中`[^3]。 - 如果配置正确,Cursor 应该能够解析 Figma 设计稿并生成相应的代码。 --- ### 注意事项 - 输出结果的质量高度依赖于设计稿的结构化程度。如果设计稿不规范,生成的代码质量可能会受到影响[^3]。 - 确保所有配置文件中的路径和命令正确无误,否则可能导致连接失败。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

宁姣晗Nessia

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值