Anthropic Claudeソフトウェア開発⭐ リポ 0品質スコア 50/100

figma-implement-design

Name: figma-implement-design
Author: davila7

FigmaのノードをMCPワークフロー（デザインコンテキスト・スクリーンショット・アセット・プロジェクト規約の変換）を活用し、見た目を1:1で再現したプロダクション品質のコードに変換します。ユーザーがFigmaのURLやノードIDを提供した場合、またはFigmaの仕様に忠実なデザインやコンポーネントの実装を求めた際にトリガーされます。動作にはFigma MCPサーバーへの接続が必要です。

description の原文を見る

Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-convention translation). Trigger when the user provides Figma URLs or node IDs, or asks to implement designs or components that must match Figma specs. Requires a working Figma MCP server connection.

SKILL.md 本文

デザイン実装

概要

このスキルは、Figma デザインをピクセルパーフェクトな精度で本番環境対応のコードに変換するための構造化されたワークフローを提供します。Figma MCP サーバーとの一貫した統合、設計トークンの適切な使用、およびデザインとの 1:1 の視覚的パリティを保証します。

前提条件

Figma MCP サーバーが接続され、アクセス可能である必要があります
ユーザーは次の形式の Figma URL を提供する必要があります: https://figma.com/design/:fileKey/:fileName?node-id=1-2
- :fileKey はファイルキー
- 1-2 はノード ID（実装する特定のコンポーネントまたはフレーム）
または figma-desktop MCP を使用する場合：ユーザーは Figma デスクトップアプリで直接ノードを選択できます（URL は不要）
プロジェクトは、確立されたデザインシステムまたはコンポーネントライブラリを持つことが推奨されます

必須ワークフロー

以下のステップを順番に実行してください。ステップをスキップしないでください。

ステップ 0: Figma MCP のセットアップ（未設定の場合）

Figma MCP が接続されていないため MCP コールが失敗する場合は、一時停止してセットアップしてください:

Figma MCP を追加:
- codex mcp add figma --url https://mcp.figma.com/mcp
リモート MCP クライアントを有効化:
- config.toml で [features].rmcp_client = true を設定 または codex --enable rmcp_client を実行
OAuth でログイン:
- codex mcp login figma

ログインが成功した後、ユーザーは codex を再起動する必要があります。再度試行する際にステップ 1 に進められるよう、回答を終了してお知らせください。

ステップ 1: ノード ID を取得

オプション A: Figma URL からパース

ユーザーが Figma URL を提供する場合、ファイルキーとノード ID を抽出して MCP ツールの引数として渡します。

URL 形式: https://figma.com/design/:fileKey/:fileName?node-id=1-2

抽出内容:

ファイルキー: :fileKey （/design/ の後のセグメント）
ノード ID: 1-2 （node-id クエリパラメータの値）

注: ローカルデスクトップ MCP（figma-desktop）を使用する場合、fileKey はツール呼び出しのパラメータとして渡されません。サーバーは現在開いているファイルを自動的に使用するため、nodeId のみが必要です。

例:

URL: https://figma.com/design/kL9xQn2VwM8pYrTb4ZcHjF/DesignSystem?node-id=42-15
ファイルキー: kL9xQn2VwM8pYrTb4ZcHjF
ノード ID: 42-15

オプション B: Figma デスクトップアプリからの現在の選択を使用（figma-desktop MCP のみ）

figma-desktop MCP を使用し、ユーザーが URL を提供していない場合、ツールはデスクトップアプリで開いているファイルから現在選択されているノードを自動的に使用します。

注: 選択ベースのプロンプトは figma-desktop MCP サーバーでのみ機能します。リモートサーバーはコンテキストを抽出するためにフレームまたはレイヤーへのリンクを必要とします。ユーザーは Figma デスクトップアプリをノードを選択して開いておく必要があります。

ステップ 2: デザインコンテキストを取得

抽出したファイルキーとノード ID で get_design_context を実行します。

get_design_context(fileKey=":fileKey", nodeId="1-2")

これは以下を含む構造化データを提供します:

レイアウトプロパティ（Auto Layout、制約、サイジング）
タイポグラフィ仕様
カラー値と設計トークン
コンポーネント構造とバリアント
スペーシングとパディング値

レスポンスが大きすぎるか切り詰められた場合:

get_metadata(fileKey=":fileKey", nodeId="1-2") を実行して高レベルのノードマップを取得
メタデータから必要な特定の子ノードを特定
get_design_context(fileKey=":fileKey", nodeId=":childNodeId") で個別の子ノードを取得

ステップ 3: ビジュアルリファレンスをキャプチャ

同じファイルキーとノード ID で get_screenshot を実行して、ビジュアルリファレンスを取得します。

get_screenshot(fileKey=":fileKey", nodeId="1-2")

このスクリーンショットは、ビジュアル検証の出所表として機能します。実装全体を通してアクセス可能に保ってください。

ステップ 4: 必要なアセットをダウンロード

Figma MCP サーバーによって返されたアセット（画像、アイコン、SVG）をダウンロードします。

重要: 以下のアセットルールに従ってください:

Figma MCP サーバーが画像または SVG の localhost ソースを返す場合、そのソースを直接使用します
新しいアイコンパッケージをインポートまたは追加しないでください - すべてのアセットは Figma ペイロードから取得する必要があります
localhost ソースが提供されている場合、プレースホルダーを使用または作成しないでください
アセットは Figma MCP サーバーの組み込みアセットエンドポイント経由で配信されます

ステップ 5: プロジェクト規約に変換

Figma 出力をこのプロジェクトのフレームワーク、スタイル、および規約に変換します。

主要原則:

Figma MCP 出力（通常は React + Tailwind）を最終的なコードスタイルではなく、デザインと動作の表現として扱う
Tailwind ユーティリティクラスをプロジェクトの優先ユーティリティまたは設計トークンに置き換える
機能の重複を避け、既存のコンポーネント（ボタン、入力、タイポグラフィ、アイコンラッパー）を再利用する
プロジェクトのカラーシステム、タイポグラフィスケール、スペーシングトークンを一貫して使用する
既存のルーティング、状態管理、データフェッチパターンを尊重する

ステップ 6: 1:1 の視覚的パリティを実現

Figma デザインとのピクセルパーフェクトな視覚的パリティを目指します。

ガイドライン:

Figma の忠実度を優先してデザインと完全に一致させる
ハードコードされた値を避ける - 利用可能な場合は Figma の設計トークンを使用する
設計システムトークンと Figma 仕様の間に矛盾がある場合、設計システムトークンを優先しますが、ビジュアルに合わせるためにスペーシングまたはサイズを最小限に調整します
アクセシビリティのための WCAG 要件に従う
必要に応じてコンポーネントドキュメントを追加する

ステップ 7: Figma に対して検証

完了とマークする前に、最終 UI を Figma スクリーンショットに対して検証します。

検証チェックリスト:

レイアウトが一致する（スペーシング、配置、サイジング）
タイポグラフィが一致する（フォント、サイズ、ウェイト、行の高さ）
カラーが正確に一致する
インタラクティブな状態が設計通りに機能する（ホバー、アクティブ、無効）
レスポンシブ動作が Figma の制約に従う
アセットが正しく表示される
アクセシビリティ標準を満たしている

実装ルール

コンポーネント構成

UI コンポーネントをプロジェクトの指定されたデザインシステムディレクトリに配置する
プロジェクトのコンポーネント命名規則に従う
動的値に本当に必要な場合を除き、インラインスタイルを避ける

設計システム統合

常に可能な場合、プロジェクトの設計システムからコンポーネントを使用してください
Figma 設計トークンをプロジェクト設計トークンにマップする
一致するコンポーネントが存在する場合、新しいコンポーネントを作成する代わりに拡張する
設計システムに追加された新しいコンポーネントをドキュメント化する

コード品質

ハードコードされた値を避ける - 定数または設計トークンに抽出する
コンポーネントを合成可能で再利用可能に保つ
コンポーネントプロップに TypeScript タイプを追加する
エクスポートされたコンポーネントの JSDoc コメントを含める

例

例 1: ボタンコンポーネントの実装

ユーザーが言う: 「このFigmaボタンコンポーネントを実装してください: https://figma.com/design/kL9xQn2VwM8pYrTb4ZcHjF/DesignSystem?node-id=42-15」

実行内容:

URL をパースして fileKey=kL9xQn2VwM8pYrTb4ZcHjF と nodeId=42-15 を抽出
get_design_context(fileKey="kL9xQn2VwM8pYrTb4ZcHjF", nodeId="42-15") を実行
ビジュアルリファレンスのため get_screenshot(fileKey="kL9xQn2VwM8pYrTb4ZcHjF", nodeId="42-15") を実行
アセットエンドポイントからボタンアイコンをダウンロード
プロジェクトが既存のボタンコンポーネントを持っているかチェック
はいの場合、新しいバリアントで拡張; いいえの場合、プロジェクト規約を使用して新しいコンポーネントを作成
Figma カラーをプロジェクト設計トークンにマップする（例: primary-500、primary-hover）
パディング、ボーダー半径、タイポグラフィについてスクリーンショットに対して検証

結果: Figma デザインに一致し、プロジェクト設計システムと統合されたボタンコンポーネント。

例 2: ダッシュボードレイアウトの構築

ユーザーが言う: 「このダッシュボードを構築してください: https://figma.com/design/pR8mNv5KqXzGwY2JtCfL4D/Dashboard?node-id=10-5」

実行内容:

URL をパースして fileKey=pR8mNv5KqXzGwY2JtCfL4D と nodeId=10-5 を抽出
ページ構造を理解するため get_metadata(fileKey="pR8mNv5KqXzGwY2JtCfL4D", nodeId="10-5") を実行
メタデータから主要セクション（ヘッダー、サイドバー、コンテンツエリア、カード）とその子ノード ID を特定
各主要セクションについて get_design_context(fileKey="pR8mNv5KqXzGwY2JtCfL4D", nodeId=":childNodeId") を実行
フルページについて get_screenshot(fileKey="pR8mNv5KqXzGwY2JtCfL4D", nodeId="10-5") を実行
すべてのアセット（ロゴ、アイコン、チャート）をダウンロード
プロジェクトのレイアウトプリミティブを使用してレイアウトを構築
可能な場合、既存コンポーネントを使用して各セクションを実装
Figma 制約に対してレスポンシブ動作を検証

結果: Figma デザインに一致し、レスポンシブレイアウトを備えた完全なダッシュボード。

ベストプラクティス

常にコンテキストから開始

仮定に基づいて実装しないでください。常に get_design_context と get_screenshot を最初に取得してください。

段階的な検証

実装の終わりだけでなく、実装中に頻繁に検証してください。これは問題を早期に発見します。

逸脱を文書化

Figma デザインから逸脱する必要がある場合（例: アクセシビリティまたは技術的制約のため）、コードコメントで理由を文書化してください。

再作成よりも再利用

新しいコンポーネントを作成する前に常に既存のコンポーネントをチェックしてください。コード全体の一貫性は Figma の完全な複製よりも重要です。

設計システム優先

疑問がある場合は、リテラル Figma 変換よりもプロジェクトの設計システムパターンを優先してください。

一般的な問題と解決策

問題: Figma 出力が切り詰められている

原因: デザインが複雑すぎるか、ネストされたレイヤーが多すぎて単一のレスポンスで返すことができない。 解決策: get_metadata を使用してノード構造を取得し、次に get_design_context で特定のノードを個別に取得します。

問題: 実装後にデザインが一致しない

原因: 実装されたコードと元の Figma デザイン間の視覚的な不一致。 解決策: ステップ 3 のスクリーンショットとサイドバイサイドで比較してください。デザインコンテキストデータのスペーシング、カラー、タイポグラフィ値をチェックしてください。

問題: アセットが読み込まれない

原因: Figma MCP サーバーのアセットエンドポイントにアクセスできないか、URL が変更されている。 解決策: Figma MCP サーバーのアセットエンドポイントにアクセス可能であることを確認してください。サーバーは localhost URL でアセットを配信します。変更せずにこれらを直接使用してください。

問題: 設計トークン値が Figma と異なる

原因: プロジェクトの設計システムトークンの値が Figma デザインで指定されているものと異なる。 解決策: プロジェクトトークンが Figma 値と異なる場合、一貫性のためにプロジェクトトークンを優先しますが、視覚的忠実度を維持するためにスペーシング/サイジングを調整してください。

デザイン実装の理解

Figma 実装ワークフローは、デザインをコードに変換するための信頼できるプロセスを確立します:

デザイナー向け: 実装がデザインと完全にピクセルパーフェクトに一致するという確信。 開発者向け: 推測を排除し、往復修正を削減する構造化されたアプローチ。 チーム向け: デザインシステムの整合性を維持する一貫性のある高品質な実装。

このワークフローに従うことで、すべての Figma デザインが同じレベルの注意と細部へのこだわりで実装されることを保証します。

追加リソース

ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ

詳細情報

作者: davila7
リポジトリ: davila7/claude-code-templates
ライセンス: MIT
最終更新: 不明

GitHubで原本を見る →フィードバックを送る

Source: https://github.com/davila7/claude-code-templates / ライセンス: MIT