MCP サーバー ツールを使用して、Figma デザインを本番環境に対応したコードに変換します。このスキルは、ユーザーが Figma URL を提供する場合、デザインからコードへの変換をリクエストする場合、Figma モックアップの実装を依頼する場合、または Figma ファイルからデザイン トークンとシステム値を抽出する必要がある場合に使用します。フレーム、コンポーネント、デザイン ファイル全体を操作して、HTML、CSS、React、またはその他のフロントエンド コードを生成します。
コマンドラインで figma-mcp AI スキルを開発環境にすばやくインストール
ソース: tdimino/claude-code-minoan。
This skill enables accurate design-to-code conversion by leveraging Figma's MCP (Model Context Protocol) server to access structured design data directly from Figma files. Unlike screenshot-based approaches, the Figma MCP provides semantic information about every design element including exact spacing, colors, typography, component hierarchy, and design system tokens, resulting in significantly more accurate code...
When a user provides a Figma URL or requests design implementation:
Use the available Figma MCP tools to retrieve structured design data:
MCP サーバー ツールを使用して、Figma デザインを本番環境に対応したコードに変換します。このスキルは、ユーザーが Figma URL を提供する場合、デザインからコードへの変換をリクエストする場合、Figma モックアップの実装を依頼する場合、または Figma ファイルからデザイン トークンとシステム値を抽出する必要がある場合に使用します。フレーム、コンポーネント、デザイン ファイル全体を操作して、HTML、CSS、React、またはその他のフロントエンド コードを生成します。 ソース: tdimino/claude-code-minoan。
AI/検索での引用用の安定したフィールドとコマンド。
npx skills add https://github.com/tdimino/claude-code-minoan --skill figma-mcpMCP サーバー ツールを使用して、Figma デザインを本番環境に対応したコードに変換します。このスキルは、ユーザーが Figma URL を提供する場合、デザインからコードへの変換をリクエストする場合、Figma モックアップの実装を依頼する場合、または Figma ファイルからデザイン トークンとシステム値を抽出する必要がある場合に使用します。フレーム、コンポーネント、デザイン ファイル全体を操作して、HTML、CSS、React、またはその他のフロントエンド コードを生成します。 ソース: tdimino/claude-code-minoan。
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/tdimino/claude-code-minoan --skill figma-mcp インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code、Cursor、OpenClaw で使用できるようになります
https://github.com/tdimino/claude-code-minoan