mcpField
F
figma-code-to-canvas

figma-code-to-canvas

github.com/sergekostenchuk设计与 UI3250 次安装18 周前更新
代码仓库

关于 figma-code-to-canvas

用于将本地或公开网页转换为 Figma 图层，并与源界面对照的技能。它支持为需认证页面规划隐私安全路径，也可在转换工具不可用时提供手动重建指导。

主要功能

  1. 01将本地页面捕获为 Figma 图层
  2. 02将公开 URL 捕获为 Figma 图层
  3. 03规划私有页面的安全处理
  4. 04比较生成图层与源界面
  5. 05提供手动重建说明

适用场景

  1. 01将本地开发页面导入 Figma
  2. 02把公开网页转换为可编辑图层
  3. 03规划已认证预发布页面的捕获
  4. 04记录生成后的视觉偏差

MCP 相关

Figma MCP 不可用时，该技能改为提供手动重建画框和组件的方案。若已安装 `figma:figma-generate-design` 技能，也可调用它。

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/sergekostenchuk/ui-ux-agent-skill-system --skill figma-code-to-canvas

安装后在 Claude Code 中输入/figma-code-to-canvas确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

agents/
openai.yaml
assets/
code-to-canvas-report.md
evals/
evals.json

详细介绍

Figma 代码转画布

当需要将代码或浏览器界面反向转换为 Figma 画布时，使用此技能。此技能对工具可用性和隐私敏感。

模式

  • capture-local：将本地开发服务器页面转换为 Figma 图层。
  • capture-public：将公开 URL 转换为 Figma 图层。
  • capture-private：为经过身份验证的页面或预发布页面规划安全路径。
  • reconcile：比较生成的 Figma 图层与源界面，并列出偏差。
  • fallback：当代码转画布工具不可用时，提供手动重建说明。

工作流

  1. 确认 URL/应用来源、视口、目标 Figma 文件/页面和隐私类别。
  2. 对于本地页面，启动或验证开发服务器，并在生成 Figma 内容前截取屏幕截图。
  3. 如果请求代码转画布或生成设计，且已安装 figma:figma-generate-design 技能，则调用该技能。
  4. 未经明确批准，不要通过远程服务发送经过身份验证的私密页面、Cookie、客户数据或内部 URL。
  5. 生成后，尽可能读取 Figma 元数据或截取 Figma 屏幕截图。
  6. 生成对照报告：源 URL、视口、生成的目标、可见的不匹配项和后续编辑。

输出格式

使用 assets/code-to-canvas-report.md。

后备方案

  • 如果 Figma MCP 不可用：提供手动重建画框/组件的计划。
  • 如果无法访问页面：请求提供屏幕截图/导出文件，并转交给 figma-canvas-editor。
  • 如果隐私要求禁止远程生成：将工作保留在本地，并说明由人工协助导入的方案。

资源

  • 在承诺具备相关能力之前，先阅读 $CODEX_SKILLS_DIR/senior-figma-orchestrator/references/figma-mcp-compatibility.md。

评论

支持 Markdown