mcpField
S
senior-figma-orchestrator

senior-figma-orchestrator

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

关于 senior-figma-orchestrator

面向 UI/UX 工作流的 Figma 子编排技能，根据任务将工作分派给专门技能，涵盖设计读取、画布编辑、代码转换、资产和工作流审计。它还要求在修改前明确范围，并对隐私、安全和操作证据进行检查。

主要功能

  1. 01按任务路由至 Figma 专项技能
  2. 02读取设计与代码上下文
  3. 03协调画布编辑和设计系统同步
  4. 04检查隐私、权限与修改范围
  5. 05要求操作结果提供验证证据

适用场景

  1. 01将 Figma 设计转换为实现计划
  2. 02把网页界面采集到可编辑画布
  3. 03同步设计变量与组件库
  4. 04审查 Figma 工作流的安全性

MCP 相关

该技能要求检查当前 Figma MCP 能力，并且只有在当前会话中存在已连接工具或技能时才可声称能够访问 Figma。它会根据任务将工作路由给 Figma 专项技能。

安装

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

$npx skills add https://github.com/sergekostenchuk/ui-ux-agent-skill-system --skill senior-figma-orchestrator

安装后在 Claude Code 中输入/senior-figma-orchestrator确认已加载。

包含的文件

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

agents/
openai.yaml
assets/
figma-handoff-template.md
evals/
evals.json
references/
figma-mcp-compatibility.md
routing-matrix.md
safety-and-evidence.md

详细介绍

高级 Figma 编排器

这是 UI/UX 技能组的 Figma 子编排器。当工作依赖 Figma 文件、选定的画框、Design Variables、Code Connect、代码转画布、直接编辑画布、资源、效果或工作流治理时，请在 $senior-ui-ux-orchestrator 下使用它。

运行模式

  • route：选择最精简的 Figma 专家组合。
  • read-context：路由至 figma-context-reader。
  • design-to-code：路由至 figma-design-to-code-bridge。
  • code-to-canvas：路由至 figma-code-to-canvas。
  • edit-canvas：路由至 figma-canvas-editor。
  • sync-system：路由至 figma-design-system-sync。
  • manage-assets：路由至 figma-assets-manager。
  • apply-effects：路由至 figma-apply-effects。
  • audit-workflow：路由至 figma-workflow-auditor。

必需工作流

  1. 路由前阅读 references/routing-matrix.md。
  2. 当当前 Figma MCP 功能与任务有关时，阅读 references/figma-mcp-compatibility.md。
  3. 确认可用输入：Figma URL、选定节点上下文、本地代码库、实时 URL、屏幕截图、导出的资源或设计系统简介。
  4. 使用 Figma 上下文前，先对隐私进行分类。将非公开的 Figma 文件、屏幕截图、设计变量、组件库和导出的资源视为敏感信息。
  5. 对于任何 use_figma 操作，先调用已安装的 figma:figma-use 技能。对于 FigJam 或 Slides，也要调用相关的已安装 Figma 技能。
  6. 对画布进行创建、更新或删除操作时，必须明确范围：目标文件或节点、预期更改、回滚或副本策略，以及之后要收集的证据。
  7. 将任务路由给专家，并要求其将结果标记为 Ran、Skipped、Planned 或 Manual。

默认路由

  • 理解文件、画框、节点、变量集、组件树或 Dev Mode 规范：figma-context-reader。
  • 将选定设计转换为实现计划或组件映射：figma-design-to-code-bridge。
  • 将浏览器或应用中的实时 UI 捕获为可编辑的 Figma 图层：figma-code-to-canvas。
  • 创建或编辑画框、组件、自动布局、变量、FigJam 对象或 Slides 对象：figma-canvas-editor。
  • 同步令牌、变量、组件库、Code Connect 或样式偏差：figma-design-system-sync。
  • 导出、下载或准备图片、SVG、字体或设计资源：figma-assets-manager。
  • 添加、移除、绑定或审查 Figma Effects：figma-apply-effects。
  • 检查 Figma 工作流是否有效、最新、隐私安全且有证据支撑：figma-workflow-auditor。

安全与证据规则

  • 除非当前会话中有可用的已连接工具或技能，否则不要声称可以访问 Figma MCP。
  • 除非工具响应、元数据回读、屏幕截图或导出的产物能够证明，否则不要声称已完成 Figma 更改。
  • 未经明确批准，不要将私人 Figma 内容、屏幕截图、URL、源代码或资源上传至非 Figma 外部服务。
  • 当 Figma MCP 不可用时，提供受阻或备用方案：手动 Figma 操作说明、本地代码实现、屏幕截图审查或资源导出请求。
  • 进行大范围破坏性编辑前，优先复制画框或组件。

输出

路由交接和最终报告请使用 assets/figma-handoff-template.md。

验证

编辑此技能时，运行：

python3 $CODEX_SKILLS_DIR/.system/skill-creator/scripts/quick_validate.py $CODEX_SKILLS_DIR/senior-figma-orchestrator
python3 $CODEX_SKILLS_DIR/senior-skill-architect/scripts/lint_production_skill.py $CODEX_SKILLS_DIR/senior-figma-orchestrator
python3 -m json.tool $CODEX_SKILLS_DIR/senior-figma-orchestrator/evals/evals.json >/dev/null

评论

支持 Markdown