概要
Figma で選択されたデザインを元に、ブレークポイントごとのデザインを順に取得し、レスポンシブコンポーネントとして実装する Claude Code スキル。 プロジェクト固有の UI ライブラリやコード規約をカスタマイズすれば、どの Web プロジェクトでも流用できる。
使い方
.claude/skills/implement-figma-component/SKILL.mdとして配置- 下記テンプレートをコピーし、
<!-- ここに ... -->のコメント部分をプロジェクト固有の設定（UI ライブラリ、コード規約、レスポンシブヘルパー、共通コンポーネント、カラートークン、ファイル配置規約）に書き換える - Figma Desktop MCP サーバー（Figma Desktop アプリ + MCP プラグイン）が必要
context7MCP サーバーがあると UI ライブラリの API ドキュメントを参照できる- ブレークポイント数やサイズはプロジェクトに合わせて調整可能
SKILL.md テンプレート（汎用版）
---
name: implement-figma-component
description: Figma でブレークポイントごとにデザインを選択し、レスポンシブコンポーネントとして実装する
disable-model-invocation: false
argument-hint: [component-name]
allowed-tools: Read, Grep, Glob, Write, Edit, Bash, Agent, mcp__figma-desktop__get_design_context, mcp__figma-desktop__get_screenshot, mcp__context7__resolve-library-id, mcp__context7__query-docs, AskUserQuestion
---
# Figma デザインからコンポーネントを実装する
コンポーネント名: $ARGUMENTS
`$ARGUMENTS` が空の場合は、ユーザーにコンポーネント名とファイル配置先を `AskUserQuestion` で確認してから開始する。
## 概要
Figma で選択されたデザインを元に、sm → md → lg → xl の4ブレークポイント分のデザインを順に取得し、レスポンシブコンポーネントとして実装する。
## 事前準備
実装前に以下を確認する:
1. **既存パターンの把握**: 既存コンポーネント構造、共通コンポーネント、テーマ設定を確認
2. **レスポンシブヘルパー**: プロジェクト固有のレスポンシブユーティリティを確認
3. **テキストコンポーネント**: テキストスタイルの適用方法を確認
## 手順
### Step 1: デザイン取得（sm → md → lg → xl）
ブレークポイントごとに以下を繰り返す:
1. ユーザーに Figma でデザインを選択してもらう
2. `get_design_context` でコード参照とメタデータを取得
3. `get_screenshot` でスクリーンショットを取得
4. 取得したデザインの構成要素、寸法、色、タイポグラフィを記録
全4サイズ取得後、ブレークポイント間の差分を整理する:
- レイアウト構造の変化（配置、方向）
- 要素の表示/非表示
- サイズ、パディング、マージンの変化
- テキストスタイルの変化
### Step 2: アセット確認
デザインに含まれる画像・アイコンについてユーザーに確認する:
- 既存アセットを使えるか
- 新規 SVG の書き出しが必要か
- インライン SVG にするか画像ファイルとして配置するか
### Step 3: 実装
以下の規約に従ってコンポーネントを実装する:
<!-- ここにプロジェクト固有のファイル配置、コード規約、UI ライブラリの注意点、
レスポンシブ実装方法、共通コンポーネント、カラートークン等を記述 -->
#### 汎用ルール
- Figma の生成コードは Tailwind CSS ベース。必ず使用する UI ライブラリのスタイルシステムに変換する
- Figma の localhost アセット URL はそのまま使わず、プロジェクトのアセットパスに置き換える
- デザイントークン（色等）はプロジェクトのトークン定義を参照する
### Step 4: Storybook 作成
既存の stories パターンに従い作成:
- `meta` を `satisfies Meta<typeof Component>` で定義
- `parameters.layout` を適切に設定（`'fullscreen'` or `'centered'`）
- デコレーターで適切なラッパーを追加
### Step 5: 検証
1. 型チェック
2. Lint チェック
3. 必要に応じて Storybook での表示確認をユーザーに促す
## 注意事項
- Figma の生成コードは Tailwind CSS ベース。必ず使用する UI ライブラリのスタイルシステムに変換する
- Figma の localhost アセット URL はそのまま使わず、プロジェクトのアセットパスに置き換える
- 不明な API は `context7` で確認する