/ ディレクトリ / プレイグラウンド / Claude Code Design Skills
← 全サーバー ↗ GitHub
● コミュニティ scoobynko ⚡ 即起動

Claude Code Design Skills

作者 scoobynko · scoobynko/claude-code-design-skills

Figma-to-Next.js の正しい方法 - 最初にコンポーネントを再利用し、Figma バリアントは props、厳密な TypeScript、デフォルトで a11y にマップします。

scoobynko/claude-code-design-skills は、デザインからコードへのワークフローのためのクロード コード スキル パックです。 主力の「Figma to Code」スキルは、明示的なルールを使用して、Figma デザインを本番環境に対応した React/Next.js コードに変換します。既存のコンポーネントの再利用を優先し、Figma バリアントを型指定されたプロップにマップし、フロントエンドとバックエンドの境界を強制し、最初から配線します。 Figma MCP と組み合わせます。 ピクセルの完璧さよりも、チームが実際にマージするコードの作成に重点を置きます。

▶ デモを見る 📦 インストール 💡 ユースケース

なぜ使うのか

主な機能

ライブデモ

実際の動作

claude-code-design-skills.replay ▶ 準備完了
0/0

インストール

作者のリポジトリ · Claude Skills の公式ドキュメント

ユースケース

実用的な使い方： Claude Code Design Skills

Figma フレームから新しいページをスキャフォールディングする

👤 設計をコードに変換するフロントエンド エンジニア ⏱ ~45 min intermediate

使うタイミング： Figma フレームが準備できており、コードベースに適合する React/Next.js コードが必要です。

フロー
  1. フレームをポイントする
    この Figma フレームを Next.js ページに変換します: <figma URL>。 src/components/ のコンポーネントを再利用します。✓ コピーしました
    → エージェントは、新しいコンポーネントを作成する前に既存のコンポーネントのインベントリを作成します。
  2. プロップマップのバリアント
    Figma バリアントを型付きプロパティ (サイズ、意図、無効) にマップします。✓ コピーしました
    → 生成される TS タイプ。 いいえ
  3. モックデータ
    モックデータを使用します。 API 呼び出しを考え出さないでください。 バックエンドを外したままにします。✓ コピーしました
    → モックファイルを使用したフェッチレスコンポーネントのクリーンアップ

結果： 実際の Next.js ページが 1 つの PR にマージされ、レビュー担当者が書き直す必要はありません。

注意点
  • 既存のコンポーネント ライブラリの隣に並列コンポーネント ライブラリを生成する — 「既存のコンポーネントをリストする」ことから始めて、エージェントがそこにあるものを再利用できるようにします
組み合わせ： figma · magic-ui-mcp

コンポーネントのプロップを Figma バリアントに同期する

👤 デザインシステムを維持するチーム ⏱ ~25 min intermediate

使うタイミング： デザイナーが Figma に新しいバリアントを追加したため、コードを追いつく必要があります。

フロー
  1. Figma とコンポーネントの差分
    Button (Figma) バリアントを src/components/Button.tsx props と比較します。✓ コピーしました
    → デルタのリストをクリア: 新しいバリアント、名前変更されたバリアントなど。
  2. 差分を適用する
    Button.tsx を更新して、新しい「ghost」バリアントを含めます。 API を保存します。✓ コピーしました
    → 呼び出し元を中断しないデフォルトを使用した型指定された更新

結果： デザインシステムのドリフトは、消費者を損なうことなく閉じられました。

正しいセマンティクスとフォーカス管理を使用して Figma フローを変換する

👤 アクセシビリティを重視したフロントエンド エンジニア ⏱ ~45 min intermediate

使うタイミング： スクリーン リーダーのレビューに合格するダイアログ/メニュー/フォームが必要です。

フロー
  1. コード内でフローを尋ねる
    Figma からチェックアウト ダイアログを構築します — フォーカス トラップ、エスケープ、モーションの削減を尊重します。✓ コピーしました
    → 適切な役割、ラベル付け、フォーカス管理、Esc で閉じる
  2. 監査人を実行する
    結果に対して claude-design-auditor スキルを実行します。✓ コピーしました
    → A11y スコア ≥ 85

結果： 各コンポーネントを手に持つことなくアクセス可能な実装。

組み合わせ： claude-design-auditor-skill

組み合わせ

他のMCPと組み合わせて10倍の力を

claude-code-design-skills + figma

MCP 経由で Figma フレームをプルします。 このスキルで変換

Figma フレーム X をフェッチします。 スキルを使用して、既存のコンポーネントを再利用して変換します。✓ コピーしました
claude-code-design-skills + magic-ui-mcp

Figma パターンが存在する Magic UI コンポーネントにマッピングします。

Figma がブラーイン ヒーローを使用する場合は、ブラーイン ヒーローを作成する代わりに、Magic UI のブラーフェードを使用します。✓ コピーしました
claude-code-design-skills + claude-design-auditor-skill

生成されたコードが 18 ルールの監査に合格することを確認する

変換後、設計監査を実行し、高い結果があれば修正します。✓ コピーしました

ツール

このMCPが提供する機能

ツール入力呼び出すタイミングコスト
figma-to-code (SKILL) Figma frame URL + repo conventions 設計をコードベースに適合するコードに変換する 0

コストと制限

運用コスト

APIクォータ
スキルに関しては何もありません。 Figma MCP には独自の割り当てがあります
呼び出しあたりのトークン
Figma フレーム + 既存のコード + 出力 — サイズが大きくなる場合があります。 フレームを正確にスコープする
金額
無料
ヒント
一度に 1 フレームずつ変換します。 膨大な選択はコンテキストとレビューの両方のエネルギーを無駄にします。

セキュリティ

権限、シークレット、影響範囲

認証情報の保管： Figma PAT はこのスキルではなく Figma MCP に属します
データ送信先： スキルによるものはありません。 Figma MCP でネットワーク コールが発生する

トラブルシューティング

よくあるエラーと対処法

エージェントは既存のボタンを再利用する代わりに新しいボタンを作成します

プロンプトにリポジトリのコンポーネント ディレクトリを明示的にリストします。

確認： Include 'check src/components/ first' in the request
新しい Figma バリアントには小道具がありません

変換する前にバリアントの差分を要求します。 フォークする代わりにコンポーネントを更新します。

確認： Agent output includes a 'variants' section
型が緩すぎる (どこにでもある)

「何もありません」が必要です。 バリアントを入力できない場合は大声で失敗します。」

確認： Search the diff for ': any'

代替案

Claude Code Design Skills 他との比較

代替案代わりに使う場面トレードオフ
magic-ui-mcpFigma コンバータではなく、事前に構築されたアニメーション コンポーネントが必要な場合デザインファーストではなく、ライブラリファースト
claude-design-auditor-skillコードを生成するのではなく、設計の品質を評価したい生産ではなく監査
hue-brand-skill必要なのはフレーム変換ではなくデザイン言語ですフレームファーストではなくシステムファースト

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

🔍 400以上のMCPサーバーとSkillsを見る