figma-design-to-code

Figma デザインからコードへ

コンテキスト

• **get_design_context の呼び出し時は、カンマ区切りの skillNames パラメーターに必ず figma-design-to-code を含めてください。このスキルを MCP リソース経由で読み込んだ場合は、名前の先頭に必ず resource: を付けてください（例：resource:figma-design-to-code）。**これはスキルの使用状況を追跡するためのログ用パラメーターであり、実行には影響しません。
• 最初の get_design_context 呼び出しでは、必ずスクリーンショットもリクエストしてください。そのデザインのレンダリング結果を、実装のレンダリング結果が視覚的に一致しなければならない視覚的な目標として使用します。
• get_design_context からスクリーンショットが返されない場合は、編集する前に必ず get_screenshot を直接呼び出してください。
• get_design_context がレスポンスを情報不足と判定した場合、そのレスポンスを実装に直接使用することはできません。階層構造にある子ノード ID をスクリーンショットと照合し、表示されている子ノードを対象に get_design_context を並列で一括呼び出しして、高忠実度のレスポンスを取得する必要があります。
• 実装には、高忠実度の get_design_context レスポンスのみを使用してください。デザインのスクリーンショットは視覚的な目標であり、実装アセットとしてコード内で使用してはなりません。

実装

• 返されたコードは、編集する前にプロジェクトのスタックと規約に合わせて調整し、該当する可能性のあるプロジェクトのパスを確認してください。返されたコードは視覚的な忠実度は高いものの、操作できないプロトタイプとして扱います。生の絶対位置指定を、固定位置指定でしかデザインを表現できない場合を除き、プロジェクト標準のレイアウトに置き換えてください。デザイン内でどの部分がインタラクティブであるべきかを特定し、操作可能なコードとして実装してください。
• 編集する前に、該当する可能性のあるプロジェクトのパスと、インストール済みのデザインライブラリの依存関係を確認し、デザインに一致するコードコンポーネント、アセット、トークンを探してください。生のマークアップ、インラインスタイル、ハードコードされた値で再作成するのではなく、適切なものを再利用または組み合わせてください。デザインを正確に表現できない場合に限り、変更または補足してください。
• Code Connect は、マッピングされたノードに正確に適用してください。接続済みコンポーネントでデザインを表現できない場合を除き、必ずそのコンポーネントを直接再利用してください。スタイリングや配線に手間がかかることは、例外の理由になりません。
• 目に見える静的アセット（画像または SVG）はすべて、デザインで使用されている位置に正確に配置してください。コードベースまたはデザインライブラリに完全に一致するものがある場合に限り、それで置き換えられます。アセットを省略、編集、描き直し、パスの抽出、インライン化、代用したり、誤って使用したりしてはなりません。ただし、API、プロパティ、データから提供される画像は動的なままにしてください。提供される SVG はすべてルート要素に width と height 属性があり、ラッパーのスタイルを変更する際にこれらを上書きしてはなりません。幅と高さを広範囲にわたって 100% に設定することは避けてください。
• get_design_context のレスポンスで説明されているとおり、使用する静的アセットはすべてダウンロードし、コード内に一時的な Figma アセット URL への参照が残らないようにしてください。明示的に指示されない限り、アセットのダウンロードに他のツールを使用してはなりません。必要な場合はメタデータとルートの寸法のみを確認し、タスクで明示的に求められない限り、アセットのバイト列を読み取らないでください。

検証

• リクエストされた画面またはコンポーネントのみを検証し、対象外の既存の不一致には言及するだけにとどめ、変更してはなりません。
• 目に見える静的アセットはすべて、ローカルファイルが空でないこと、デザイン内のスロット／レイヤー、呼び出し箇所、実効レンダリング寸法が正しいことを検証してください。完了前に、対象範囲内の不一致をすべて修正してください。置き換え、相違、比率の誤りがあるアセットが一つでもあれば、不合格です。