设计师专属 ：用 Cursor + Figma 从界面设计到代码落地

Focus一、Cursor 下载

Cursor 官网地址为： https://www.cursor.com 。进入官网后，直接点击「Download for free」按钮，系统会自动识别您的操作系统，无论是 Windows、macOS 还是 Linux，都能获取对应的安装包。

Focus二、安装中文语言包

• 开启扩展面板
• 若您使用 Windows 系统，按下快捷键 Ctrl + Shift + X 。
• 要是用的是 macOS 系统，则按下 Cmd + Shift + X 。
• 或者点击左侧边栏类似方块的扩展图标。

• 搜索并安装中文语言包 在扩展面板中输入 “Chinese” 进行搜索，找到微软官方提供的 “Chinese (Simplified)”（简体中文）选项，点击 “Install” 完成安装。
• 重启 Cursor 安装结束后，留意左下角是否出现 “Change Language and Restart” 的提示，点击它即可自动重启。若没看到提示，手动关闭并重新打开 Cursor，这时界面就会变成中文啦。

Focus三、新建工作区

• 1. 打开 Cursor 软件。
• 2. 在菜单栏中，依次点击 “文件” - “打开文件夹”。
• 3.选择您想作为项目的文件夹，以此来新建工作区。

Focus四、认识 Cursor 界面（与 VS Code 极为相似）

左侧：活动栏（文件、搜索、Git、调试、扩展）

中间：编辑区（写代码 / 文本）

右侧：AI 聊天面板（Cursor 灵魂）

底部：状态栏（行号、编码、AI 模型）

• 模式介绍

Agent ： 是全自动帮你写代码、改文件的主动模式；

Plan ： 只给你规划方案、不直接改代码；

Debug ： 专门帮你分析和修复代码错误；

Ask ： 则是纯问答模式，只解释问题、不碰代码。

Focus最核心的 4 个快捷键

• Tab ：AI 自动补全代码（输入一点，按 Tab 接受）

• Ctrl+K ：选中代码 → 给 AI 发指令（改、写、重构）

• Ctrl+L ：打开 AI 聊天面板（问问题、解释代码）

• Ctrl+Shift+P ：命令面板（搜所有功能）

Focus五、链接 Figma MCP

Focus1. 获取 Figma 用户 Key

• 登录 Figma 账户，点击左上角头像，选择 “settings”。

• 在弹出页面中切换到 “Security” 页签，向下滑动找到 “Generate new token”。

• 随意填写一个名称，有效期建议选择 90 天，并勾选所有选项。

• 保存后立即复制生成的 token，因为关闭页面后若需再次查看，就得重新申请，token 仅显示一次哦。

Focus2. 配置 MCP

• 在 Cursor 中，依次选择 “服务器” - “精选” - “Framelink Figma MCP Server”

• 跳转到 GitHub 页面。

• 在 GitHub 页面向下滚动，根据您的电脑系统选择相应代码。

• 打开 Cursor，点击 “tools”，选择 “添加 mcp”。

• 将从 GitHub 复制的代码粘贴到指定位置，

• 并把红框处替换为您刚才获取的 Figma key。

若返回 Cursor 后发现链接按钮一直显示红色，即链接失败，别着急。在旁边的对话框输入 “检查一下这个 figma mcp 为什么没有启动成功”，Cursor 会提示您电脑缺少某些开发环境，您只需让它安装这些开发环境即可。

Focus查看可用额度

您可通过此链接查看使用额度： https://cursor.com/cn/dashboard/usage

Focus六、UI界面转代码与制作界面

Focus还原 UI 界面为HTML

选中要还原的页面，复制链接，加上提示词“按照提供的 Figma 链接来实现页面还原”

设计图和开发图对比，还原度还算ok

Focus利用 cursor制作界面比较复杂

Focus一、安装 Figma 插件

在 Figma 中搜索并安装 “Talk To Figma MCP Plugin” 插件。

Focus二 检查 Bun 是否安装

• 检查方法 在终端输入 “bun --version”。
• 如果显示版本号（如 1.2.x ），表明已安装，可直接跳到下一步。
• 如果提示 “command not found”，则需要安装 Bun。

• 安装 Bun 在终端运行命令 “curl -fsSL https://bun.sh/install | bash” 进行安装。安装完成后，运行 “source /Users/user/.zshrc” 激活 Bun（注意：此处路径可能因系统及用户设置不同而有所差异，需根据实际情况调整）。之后直接关闭终端，重新打开一个新窗口。
• 验证安装 再次在终端输入 “bun --version”，若输出类似 “1.2.x”，则表示安装成功。
• 启动 WebSocket 服务器 在终端运行 “bunx cursor - talk - to - figma - socket”，出现相应提示即代表安装成功。

Focus配置与使用

• 回到 Figma，打开 “Talk To Figma MCP Plugin” 插件窗口，点击 “Connect” 按钮。

• 配置 Cursor MCP
• 在 Cursor 里添加 MCP 配置： 打开 Cursor Settings（Cmd/Ctrl+Shift+J）

• 点击 Tools & MCP

• 点击 + Add

• 粘贴以下配置：

• { "mcpServers" : { "cursor - talk - to - figma" : { "command" : "bunx" , "args" : [ "cursor - talk - to - figma - mcp" ] , "env" : { "FIGMA_WEBSOCKET_PORT" : "3055" } } } }

若配置过程遇到问题，可直接让 Cursor 帮忙配置。

配置完成后即可进行测试，比如给 Cursor 一个 Figma 草稿地址，并要求在该 Figma 中创建一个 400x300 的矩形。这时 Cursor 可能会向您索要一个通道（频道）ID，将红框中的数字发给它就能完成操作。

Focus使用自己的组件库做界面

需要注意的是，使用自己的组件库做界面时，要先在相应位置拖入几个组件，否则 Cursor 可能找不到您的组件库。

虽然最终能实现界面制作，但视觉效果可能不太理想。

来源：https://mp.weixin.qq.com/s/2dlaZbmTaAGIXbWuv94DNg