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. 01Figma デザインから実装計画を作成
  2. 02ライブ UI を編集可能なレイヤーとして取得
  3. 03デザイン変数とコンポーネントライブラリを同期
  4. 04Figma ワークフローの安全性を監査

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

詳細

Senior Figma Orchestrator

これは、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 エフェクトを追加・削除・バインド・監査する：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 対応