关键使用标红处理
参考步骤文档
https://zhuanlan.zhihu.com/p/1897249661569447152
https://zhuanlan.zhihu.com/p/1897249661569447152实际步骤变化：
github地址：https://github.com/grab/cursor-talk-to-figma-mcp
拉取基础代码地址：https://github.com/grab/cursor-talk-to-figma-mcp.git
1.安装bun（window11试验）:
winget install --id Oven-sh.Bun -e 
2.初始化命令
git bash终端
bash ./scripts/setup.sh3.使用bun setup报错（实际可以自己手动执行，bun install 再看是否有mcp.json文件）
javascript
//mcp.json
{
"mcpServers": {
"TalkToFigma": {
"command": "bunx",
"args": [
"cursor-talk-to-figma-mcp@latest"
]
}
}
}4.bun socket(先安装了就不会报错了) （开启本地服务连接端口）
5.开启 git bash 服务(安装figma 通话插件)
javascript
//git bash
npx cursor-talk-to-figma-mcp
6.cursor配置mcp服务
使用插件有额度，还是使用配置mcp，点击上方talktofigma，编辑，填入下面配置，开启时就不再是error了
javascript
{
"mcpServers": {
"TalkToFigma": {
"command": "bun",
"args": ["x", "cursor-talk-to-figma-mcp@latest"]
}
}
}7.安装figma软件
https://www.figma.com/downloadshttps://www.figma.com/downloads
8.安装figma插件
9.复制上面的频道
javascript
//使用cursor连接
使用channel vq23xzlk 连接服务和figma进行对话，分析figma选中页面的内容
10.使用技巧
我是一个小白第一次使用cursor，请帮我总结一些Cursor + Figma MCP 开发技巧，让我体验一下
javascript
太好了，这个组合（Cursor + Figma MCP）对新手非常友好。给你一份上手就能用的实战清单：
先记住一条主线
Figma 出设计 → Cursor 读设计 → 生成/修改代码 → 回到 Figma 对照调整。
1) 新手最稳的工作流（照着做就行）
在 Figma 里先只选中一个"局部区域"（比如一个卡片、一个表格区），不要一上来整页。
在 Cursor 里下这种指令：
分析当前选中区域，生成 Vue3 + TS 组件，包含 mock 数据和样式
让它先生成单文件组件，跑起来看效果。
再逐步追加需求：
"改成拆分组件结构"
"接入真实接口"
"把颜色和字号提到设计 token"
每一步都让它"先改代码，再帮你验证（typecheck/build）"。
2) 提示词模板（你直接复制就能用）
A. 从 Figma 到代码
请读取我在 Figma 选中的区域，先做结构分析，再生成 Vue3 + TS + scoped css 代码。
保持和设计稿一致：间距、字号、颜色、圆角、状态样式都要有。
B. 让它按工程方式写
按企业项目结构输出：views/components/types/api 四层拆分。
先给我最小可运行版本，再给可扩展版本。
C. 让它自动自检
改完后请运行 TypeScript 检查，并修复你引入的报错。
如果有 lint 报错，顺手修掉并告诉我改动点。
3) Cursor 新手最有用的 6 个习惯
小步提交需求：一次只提一个目标（先能跑，再漂亮，再抽象）。
总是给"约束"：例如"必须 Vue3 + TS + 组合式 API + 不用 UI 库"。
明确输出格式：让它"直接改文件"，不是只贴代码块。
要求验证：每次都加"请 typecheck/build 验证"。
让它解释原因：你看不懂时说"用小白能懂的话解释为什么这么改"。
保留可回滚点：重要阶段让它帮你写 commit message（你自己决定是否提交）。
4) Figma MCP 实战技巧（非常关键）
优先选中具体节点（frame/section），不要只给整页，精度会高很多。
先让它做两步：
先分析层级与语义
再生成代码
如果生成 UI 不像，补一句：
请严格按选中区域视觉还原，并标注你无法确定的地方。
遇到信息过多：
先只实现骨架布局，不填业务逻辑。
5) 常见坑（你提前避开）
一次性要求"全站改造" → 容易失控。
不指定技术栈 → 它可能给 React/别的方案。
不要求验证 → 代码看起来对，实际跑不起来。
不给上下文文件路径 → 它会猜，准确度下降。
6) 给你的"体验任务"（10 分钟就有成就感）
你现在就可以发这句：
请读取我当前 Figma 选中区域，生成 Vue3 + TS 页面（含 tabs、统计卡片、筛选区、表格），拆分成 components + types + mock api，并完成 typecheck 验证。
我也可以直接陪你做一轮"从选区到可运行页面"的完整体验（我来一步步带你下指令）。直接复制下面语句使用
javascript
请读取我当前 Figma 选中区域，生成 Vue3 + TS 页面（含 tabs、统计卡片、筛选区、表格），拆分成 components + types + mock api，并完成 typecheck 验证。11.vue文件代码高亮安装插件Vetur
12.项目中如何使用
javascript
如果说我要直接在我的项目中直接去使用cursor生成代码并试验可以吗
可以，完全可以，而且这就是最推荐的方式。
你现在就能在你的真实项目里直接让 Cursor 读 Figma 选区并落代码试验，不需要先在这个 MCP 仓库里中转。
建议你这样做（最稳）
打开你的实际 Vue3 项目（不是这个 cursor-talk-to-figma-mcp 仓库）。
在 Figma 里选中一个具体区域（比如"筛选栏"或"表格"）。
在 Cursor 里下明确指令：
根据我当前Figma选区，生成Vue3+TS组件，直接写入src/views/xxx，并补types/api/mock，最后执行typecheck。
先做局部（一个组件）再做整页，成功率最高。
给你一条可直接复制的指令
请读取当前Figma选中区域，在我的项目里生成 Vue3 + TypeScript 页面，拆分为 components + types + api(mock)，遵循我现有项目目录和代码风格，改完后运行 typecheck 并修复报错。
新手注意 3 点
指定技术栈和路径（例如 Vue3 + TS + src/views/task），别让它猜。
每次只改一块，方便你看 diff 和回滚。
永远加一句"并运行 typecheck/构建验证"。
如果你愿意，我下一条可以给你一版"按你项目目录结构定制"的精准提示词模板（比如你用 src/pages 还是 src/views，用 pinia 还是 vuex）。然后我让cursor给出精准提示词目标
javascript
很好，你现在这个阶段最需要的是可复用、可约束、可验证的提示词。下面给你一套可直接粘贴的「精准模板」，专门用于在真实项目里让 Cursor 按 Figma 产出 Vue3 + TS 代码。
通用精准模板（先用这个）
你现在是我的前端协作开发助手。请严格按以下要求执行，不要省略步骤。

【任务目标】
根据我当前在 Figma 选中的区域，实现对应的 Vue3 + TypeScript 页面/模块代码，并直接落到我的项目中可运行。

【项目约束】
- 技术栈：Vue 3 + TypeScript + <Vite/webpack>
- UI库：<Element Plus/Ant Design Vue/Naive UI/自研>
- 状态管理：<Pinia/Vuex/无>
- 路由：<Vue Router 配置方式>
- HTTP层：<axios/请求封装路径>
- 样式方案：<SCSS/CSS Modules/Tailwind/UnoCSS>
- i18n：<有/无>
- 目录约定：
- 页面目录：<src/views 或 src/pages>/<模块名>
- 组件目录：<src/components 或模块内components>
- 类型目录：<src/types 或模块内types>
- API目录：<src/api>
- Mock目录：<src/mock 或 mocks>
- 代码风格：严格遵循项目现有 ESLint/Prettier/命名规范，不引入新风格。

【实现范围】
仅实现当前 Figma 选区对应的这一个模块，不要扩展整页未选中内容。
优先复用项目已有组件、hooks、工具函数、样式变量和设计 token；不要重复造轮子。

【你必须执行的步骤】
1) 先扫描项目并总结将复用的：
- 基础组件
- 请求封装
- 类型写法
- 同类页面结构
2) 给出"将新增/修改的文件清单"（精确到路径）。
3) 开始生成并写入代码，拆分为：
- 页面容器
- 子组件（components）
- 类型定义（types）
- API与mock（api/mock）
4) 若有交互（筛选、分页、表格操作、弹窗等），补齐最小可用逻辑与事件流。
5) 完成后必须执行：
- typecheck
- lint（若项目有）
- build（若耗时可接受）
6) 如果报错：
- 先自动修复
- 再次执行验证命令直到通过或给出明确阻塞点
7) 最终输出：
- 改动文件列表
- 关键实现说明
- 验证命令与结果
- 后续建议（仅3条，且与本模块直接相关）

【硬性限制】
- 不修改与当前选区无关的业务模块。
- 不大改全局配置，除非是通过 typecheck 的必要最小改动。
- 不创建"示例假文件"或无引用死代码。
- 若信息不足，先基于现有代码最保守实现，并在最后列出"待我确认项"。

现在开始执行。

三个高频场景短模板（更快）
1) 做"筛选栏 + 表格"模块
根据当前 Figma 选区实现"筛选栏 + 表格"模块，技术栈 Vue3+TS。
落地到 <src/views/xxx>，拆分 components/types/api/mock，复用项目现有表格和表单组件。
必须支持：查询、重置、分页、加载态、空态。
完成后运行 typecheck 并修复报错，再给我改动文件清单和验证结果。
2) 做"弹窗表单"模块
根据当前 Figma 选区实现弹窗表单（新增/编辑）模块，Vue3+TS。
写入 <目标目录>，包含：表单字段类型、校验规则、提交接口、mock返回。
遵循项目既有表单封装与命名方式，不新增无必要依赖。
完成后执行 typecheck（有lint也跑），报错自动修复并汇总。
3) 做"整页（分步）"
根据当前 Figma 选区先实现第1块（仅<头部/筛选区/列表区>），不要一次做整页。
Vue3+TS，按 components/types/api/mock 拆分，写入 <src/views/xxx>。
先保证这1块可运行并通过 typecheck，再等我确认后继续下一块。

你只要替换的参数（复制前改掉）
• <src/views 或 src/pages>
• <模块名/目标目录>
• <UI库>
• <Pinia/Vuex/无>
• <axios封装路径>
• <样式方案>

如果你愿意，我下一条可以直接给你一版**"可直接粘贴、已填好占位符"**模板：
你只要回复我这 5 项即可：页面目录、UI库、状态管理、API封装文件路径、样式方案。然后我回复它：页面目录src/views、UI库@arco-design/web-vue, arco-design-pro-vue、状态管理pinia、API封装文件路径src/api、样式方案scss
javascript
太好了，按你给的项目信息，我帮你填成可直接粘贴版本（已针对 src/views + Arco + Pinia + src/api + SCSS）：
你现在是我的前端协作开发助手。请严格按以下要求执行，不要省略步骤。
【任务目标】
根据我当前在 Figma 选中的区域，实现对应的 Vue3 + TypeScript 页面/模块代码，并直接落到我的项目中可运行。
【项目约束】
- 技术栈：Vue 3 + TypeScript
- UI库：@arco-design/web-vue、arco-design-pro-vue
- 状态管理：Pinia
- API封装路径：src/api
- 样式方案：SCSS
- 页面目录：src/views
- 代码风格：严格遵循项目现有 ESLint/Prettier/命名规范，不引入新风格
【目录与拆分要求】
- 页面主文件：src/views/<模块名>/index.vue
- 子组件目录：src/views/<模块名>/components
- 类型文件目录：src/views/<模块名>/types
- API文件：src/api/<模块名>.ts（如已有同模块文件则在原文件增量维护）
- mock文件：按项目现有 mock 组织方式新增/维护对应文件
- 样式：仅使用 SCSS，优先复用现有变量/mixin/主题token
【实现范围】
仅实现当前 Figma 选区对应的这一个模块，不要扩展整页未选中内容。
优先复用项目已有组件、hooks、工具函数、样式变量和设计 token；不要重复造轮子。
【你必须执行的步骤】
1) 先扫描项目并总结将复用的：
- Arco/Pro 现有页面范式与布局
- Pinia store 组织方式（命名、state、actions）
- src/api 下同类接口写法（请求封装、返回类型）
- SCSS 变量与公共样式入口
2) 给出"将新增/修改的文件清单"（精确到路径）。
3) 开始生成并写入代码，拆分为：
- 页面容器（index.vue）
- 子组件（components）
- 类型定义（types）
- API 与 mock（src/api + mock）
4) 若包含交互（筛选、分页、表格操作、弹窗等），补齐最小可用逻辑与事件流。
5) 完成后必须执行：
- typecheck
- lint（若项目有）
- build（若耗时可接受）
6) 如果报错：
- 先自动修复
- 再次执行验证命令直到通过或给出明确阻塞点
7) 最终输出：
- 改动文件列表
- 关键实现说明
- 验证命令与结果
- 待我确认项（如有）
- 后续建议（仅3条，且与本模块直接相关）
【硬性限制】
- 不修改与当前选区无关的业务模块。
- 不大改全局配置，除非是通过 typecheck 的必要最小改动。
- 不创建无引用死代码。
- 不新增无必要依赖。
- 若 Figma 信息不完整，基于现有代码最保守实现，并明确标注占位与待确认点。
现在开始执行。
你还可以再准备一个"分步整页"版本（成功率更高）：
根据当前 Figma 选区，仅实现第1块（先做：<头部/筛选区/列表区>），不要一次做整页。
使用 Vue3 + TypeScript + Arco Design，写入 src/views/<模块名>，并按 components/types/src/api/mock 拆分，样式使用 SCSS，状态管理遵循 Pinia 现有写法。
先保证这一块可运行并通过 typecheck + lint，再等我确认后继续下一块。
另外你刚才写的"pinai"应为 pinia，我在模板里已按 Pinia 处理。