Figma Skill，实现设计稿 1:1 还原

​

💙

✨ 目标：把 Figma 设计稿稳定转换为像素级精确代码，提升前端还原效率。​

✨ 流程：Figma 申请 Token → 魔搭创建免费 MCP 服务 → Cursor 生成安装链接 → 用 skill-creator 生成可复用 Skill 提示词。​

​

为什么要这么做？​

整体流程（4 步）​

​

​

​

​

56%

​

​

​

​

44%

​

​

​

​

​

​

第一步：从 Figma 申请 Token​

打开 Figma：​

进入个人设置，创建 Personal Access Token（PAT），生成后先保存好（只会显示一次）。​

​

​

⚠️ 注意事项：​

•

Token 只在创建时可见，建议立刻保存到密码管理器​

•

不要把 Token 提交到代码仓库​

•

如泄露，立即在 Figma 撤销并重新生成​

​

​

第二步：复制 Token，到魔搭创建免费 MCP 服务​

打开魔搭的 Figma-Context-MCP 页面：​

按页面说明把刚才的 Figma Token 填入配置，创建你自己的 MCP 服务。​

​

​

​

​

第三步：在 Cursor 生成 MCP 安装链接 / 或者使用官方的mcp​

参考 Cursor 官方文档：​

​

​

复制输出的链接到浏览器打开，Cursor 会弹出安装确认。​

​

​

​

​

​

​

47%

​

​

​

​

53%

​

​

​

​

第四步：使用 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 和图片页面编码 ​

​

​

输入提示词 页面编码然后到那个目录下​

​

​

效果图如下！！！！​

​

​

​

​

52%

​

​

​

​

48%

​

​

实际落地建议​

•

先从一个小组件（按钮、卡片）验证流程，再扩展到整页，因为我这个上一个简单的弹窗​

•

把常用样式抽成设计令牌，后续页面复用率会很高​

•

每次还原后做一次“视觉检查清单”，确保 1:1 标准稳定执行​

​

​

结语​

这套“Figma Token + 免费 MCP + Cursor 安装链接 + Skill 固化流程”的组合，本质是在把“设计还原”从手工活升级为可复用的工程能力。​

如果你经常做中后台或活动页，这个流程能明显减少反复沟通和返工次数。​