implement-design
✓Figma のデザインを 1:1 の視覚的忠実度で実稼働対応のコードに変換します。 Figma ファイルから UI を実装するとき、ユーザーが「デザインの実装」、「コードの生成」、「コンポーネントの実装」、「Figma デザインのビルド」に言及したとき、Figma URL を提供したとき、または Figma 仕様に一致するコンポーネントのビルドを要求したときに使用します。 Figma MCP サーバー接続が必要です。
SKILL.md
This skill provides a structured workflow for translating Figma designs into production-ready code with pixel-perfect accuracy. It ensures consistent integration with the Figma MCP server, proper use of design tokens, and 1:1 visual parity with designs.
When the user provides a Figma URL, extract the file key and node ID to pass as arguments to MCP tools.
Note: When using the local desktop MCP (figma-desktop), fileKey is not passed as a parameter to tool calls. The server automatically uses the currently open file, so only nodeId is needed.
Figma のデザインを 1:1 の視覚的忠実度で実稼働対応のコードに変換します。 Figma ファイルから UI を実装するとき、ユーザーが「デザインの実装」、「コードの生成」、「コンポーネントの実装」、「Figma デザインのビルド」に言及したとき、Figma URL を提供したとき、または Figma 仕様に一致するコンポーネントのビルドを要求したときに使用します。 Figma MCP サーバー接続が必要です。 ソース: figma/mcp-server-guide。
引用可能な情報
AI/検索での引用用の安定したフィールドとコマンド。
- インストールコマンド
npx skills add https://github.com/figma/mcp-server-guide --skill implement-design- カテゴリ
- *クリエイティブ
- 認証済み
- ✓
- 初回登録
- 2026-02-01
- 更新日
- 2026-02-18
クイックアンサー
implement-design とは？
Figma のデザインを 1:1 の視覚的忠実度で実稼働対応のコードに変換します。 Figma ファイルから UI を実装するとき、ユーザーが「デザインの実装」、「コードの生成」、「コンポーネントの実装」、「Figma デザインのビルド」に言及したとき、Figma URL を提供したとき、または Figma 仕様に一致するコンポーネントのビルドを要求したときに使用します。 Figma MCP サーバー接続が必要です。 ソース: figma/mcp-server-guide。
implement-design のインストール方法は？
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/figma/mcp-server-guide --skill implement-design インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code や Cursor で使用できるようになります
ソースリポジトリはどこですか？
https://github.com/figma/mcp-server-guide
詳細
- カテゴリ
- *クリエイティブ
- ソース
- skills.sh
- 初回登録
- 2026-02-01