figma-code-to-canvas

Figma Code To Canvas

コードやブラウザー UI を Figma キャンバスに変換する逆方向の処理に、このスキルを使用します。利用可能なツールやプライバシーの制約に左右されます。

モード

• capture-local：ローカルの開発サーバーのページを Figma レイヤーに変換します。
• capture-public：公開 URL を Figma レイヤーに変換します。
• capture-private：認証が必要なページやステージングページの安全な手順を計画します。
• reconcile：生成された Figma レイヤーと元の UI を比較し、差異をリストアップします。
• 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 を読みます。