メニュー
Figma デザインからコードを生成する際に使用するスキル。Figma MCP サーバーを活用して、デザインの取得・コード生成・コンポーネントマッピングを行う。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Get structured design feedback on usability, hierarchy, and consistency. Trigger with "review this design", "critique this mockup", "what do you think of this screen?", or when sharing a Figma link or screenshot for feedback at any stage from exploration to final polish.
Generate developer handoff specs from a design. Use when a design is ready for engineering and needs a spec sheet covering layout, design tokens, component props, interaction states, responsive breakpoints, edge cases, and animation details.
Audit, document, or extend your design system. Use when checking for naming inconsistencies or hardcoded values across components, writing documentation for a component's variants, states, and accessibility notes, or designing a new pattern that fits the existing system.
切り欠き（ノッチ）、コーナーカット、平行四辺形などの幾何学的な形状を CSS clip-path polygon() で設計・実装するためのスキル。
| name | figma-mcp |
| description | Figma デザインからコードを生成する際に使用するスキル。Figma MCP サーバーを活用して、デザインの取得・コード生成・コンポーネントマッピングを行う。 |
Figma デザインからコードを生成する際に使用するスキル。Figma MCP サーバーを活用して、デザインの取得・コード生成・コンポーネントマッピングを行う。
ユーザーが以下のいずれかを要求した場合にこのスキルを使用する:
ユーザーから Figma URL を受け取ったら、以下を抽出する:
fileKey: URL の /design/:fileKey/ 部分nodeId: URL の ?node-id=:int1-:int2 部分 (- を : に変換)/branch/:branchKey/ の branchKey を fileKey として使用mcp__figma__get_design_context を使ってデザイン情報とコード生成用のコンテキストを取得する。これが最も優先されるツール。
取得したデザインコンテキストをもとに、プロジェクトの技術スタックに合わせてコードを生成する:
src/components/ 配下get_design_context が返すアセット URL から必要な画像等をダウンロードし、public/ ディレクトリに配置する。
| ツール | 用途 |
|---|---|
mcp__figma__get_design_context | デザインからコード生成用コンテキストを取得 (最優先) |
mcp__figma__get_screenshot | ノードのスクリーンショットを取得 |
mcp__figma__get_metadata | ノードの構造・メタデータを XML で取得 |
mcp__figma__get_variable_defs | デザイン変数 (色・サイズ等) の定義を取得 |
mcp__figma__get_code_connect_map | ノードとコードコンポーネントのマッピングを取得 |
mcp__figma__add_code_connect_map | ノードとコードコンポーネントのマッピングを追加 |
mcp__figma__get_code_connect_suggestions | Code Connect マッピングの提案を取得 |
mcp__figma__generate_diagram | FigJam でダイアグラムを生成 (Mermaid.js) |
get_design_context を get_metadata より優先して使用するclientFrameworks には react を指定するclientLanguages には typescript,html,css を指定するnr lint, nr format)