这篇文章带你走通一条非常实用的链路：
Figma 申请 Token → 魔搭创建免费 MCP 服务 → Cursor 生成安装链接 → 用 skill-creator 生成可复用 Skill 提示词。
目标是把 Figma 设计稿稳定转换为像素级精确代码，提升前端还原效率。
为什么要这么做？
传统“看图写页面”流程里，开发和设计经常在这些点上反复拉扯：
- 间距、字号、圆角、阴影很难一次对齐
- 颜色和层级常常出现“看着差不多”
- 多轮沟通成本高，效率低
通过 MCP + Skill，我们可以把“读取设计信息 + 输出 CSS/结构 + 持续对比修正”固化成标准流程。
整体流程（4 步）
- 从 Figma 申请 Token
- 把 Token 配到魔搭，创建免费的 MCP 服务
- 在 Cursor 生成 MCP 安装链接并安装
- 用 Cursor 的 skill-creator 生成 figma-mcp skill 提示文案
第一步：从 Figma 申请 Token
打开 Figma：
www.figma.com/files
进入个人设置，创建 Personal Access Token（PAT），生成后先保存好（只会显示一次）。
注意事项：
- Token 只在创建时可见，建议立刻保存到密码管理器
- 不要把 Token 提交到代码仓库
- 如泄露，立即在 Figma 撤销并重新生成
第二步：复制 Token，到魔搭创建免费 MCP 服务
打开魔搭的 Figma-Context-MCP 页面：
www.modelscope.cn/mcp/servers…
按页面说明把刚才的 Figma Token 填入配置，创建你自己的 MCP 服务。
第三步：在 Cursor 生成 MCP 安装链接 / 或者使用官方的mcp
参考 Cursor 官方文档：
cursor.com/cn/docs/con…
Cursor 的安装链接格式如下：
cursor://anysphere.cursor-deeplink/mcp/install?name=NAME&config=BASE64_ENCODED_CONFIG
复制输出的链接到浏览器打开，Cursor 会弹出安装确认。
官方的mcp www.figma.com/mcp-catalog…
第四步：使用 Cursor 的 skill-creator 生成 Skill 提示文案
下面这段可以直接给 skill-creator 作为核心需求描述（你要的“figma-mcp-skills”文案）：
请帮我创建一个 Cursor Skill，名称建议：figma-mcp-pixel-codegen。
目标：
使用 Framelink MCP 将 Figma 设计稿转换为像素级精确代码。
触发条件：
当用户提供 Figma 设计链接、节点链接，或提出“根据设计稿还原页面/组件”需求时自动使用。
执行流程要求：
-
解析 Figma 链接并提取 fileKey、nodeId；
-
通过 MCP 系统化提取设计信息（布局、尺寸、间距、字体、颜色、边框、圆角、阴影、约束）；
-
输出结构化代码（HTML/React/Vue + CSS/Tailwind 可按项目上下文适配）；
-
生成与设计对应的 CSS 变量/设计令牌（color、font、spacing、radius、shadow）；
-
对关键视觉点进行持续对比（间距、对齐、字号、层级、交互态），迭代修正直到 1:1；
-
明确标注未确定信息与假设（如缺失字体、动态数据、响应式断点）；
-
最终交付包含：代码、样式映射说明、偏差清单（若有）与验证步骤。
质量标准：
-
像素级还原优先于“差不多”；
-
不凭空臆造设计数据；
-
优先复用已有组件规范，避免重复造轮子；
-
输出可直接落地到工程，并便于二次维护。
最后让ai转成英文的
使用示例
- 复制url 和图片页面编码
- 输入提示词 页面编码然后到那个目录下
3. 效果图如下！！！！
实际落地建议
- 先从一个小组件（按钮、卡片）验证流程，再扩展到整页，因为我这个上一个简单的弹窗
- 把常用样式抽成设计令牌，后续页面复用率会很高
- 每次还原后做一次“视觉检查清单”，确保 1:1 标准稳定执行
结语
这套“Figma Token + 免费 MCP + Cursor 安装链接 + Skill 固化流程”的组合，本质是在把“设计还原”从手工活升级为可复用的工程能力。
如果你经常做中后台或活动页，这个流程能明显减少反复沟通和返工次数。
