design-dna (Claude Skill) — ユースケース, インストール & ライブデモ

なぜ使うのか

主な機能

リファレンスからトークン（色・タイプ・スペーシング・半径）を抽出
定性的なスタイルをキャプチャ（エディトリアル・ブルータリスト・グラッシー）
パラメータ付きで視覚効果（シャドウ・ブラー・グレイン・グラデーション）をキャプチャ
ポータブルな JSON を出力。任意のコード生成 LLM に渡せる
画像・スクリーンショット・ライブ URL から動作する

ライブデモ

実際の動作

準備完了

インストール

クライアントを選択

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "design-dna-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/zanwei/design-dna",
        "~/.claude/skills/design-dna"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop → Settings → Developer → Edit Config を開く。保存後、アプリを再起動。

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "design-dna-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/zanwei/design-dna",
        "~/.claude/skills/design-dna"
      ],
      "_inferred": true
    }
  }
}

Cursor は Claude Desktop と同じ mcpServers スキーマを使用。プロジェクト設定はグローバルより優先。

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "design-dna-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/zanwei/design-dna",
        "~/.claude/skills/design-dna"
      ],
      "_inferred": true
    }
  }
}

Cline サイドバーの MCP Servers アイコンをクリックし、"Edit Configuration" を選択。

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "design-dna-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/zanwei/design-dna",
        "~/.claude/skills/design-dna"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop と同じ形式。Windsurf を再起動して反映。

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "design-dna-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/zanwei/design-dna",
        "~/.claude/skills/design-dna"
      ]
    }
  ]
}

Continue はマップではなくサーバーオブジェクトの配列を使用。

~/.config/zed/settings.json

{
  "context_servers": {
    "design-dna-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/zanwei/design-dna",
          "~/.claude/skills/design-dna"
        ]
      }
    }
  }
}

context_servers に追加。保存時に Zed がホットリロード。

claude mcp add design-dna-skill -- git clone https://github.com/zanwei/design-dna ~/.claude/skills/design-dna

ワンライナー。claude mcp list で確認、claude mcp remove で削除。

ユースケース

実用的な使い方： design-dna

気に入ったスクリーンショットに合わせたコンポーネントを作る

👤 デザイナーなしで洗練された UI を構築する開発者 ⏱ ~25 min intermediate

使うタイミング： Twitter で素晴らしい UI スクリーンショットを見てその雰囲気を捉えたいとき。

前提条件

スキルのインストール — git clone https://github.com/zanwei/design-dna ~/.claude/skills/design-dna

フロー

DNA を抽出する

Use design-dna. Extract DNA from /screens/inspiration.png. Save as dna.json.✓ コピーしました

→ トークン・スタイル・視覚効果を含む JSON が生成される
コンポーネントを生成する

Using dna.json, generate a React Card component. Match the radii, shadow, gradient parameters.✓ コピーしました

→ 一致した美観を持つ TSX が生成される
視覚的に比較する

Render side-by-side; tweak any drift in shadow strength.✓ コピーしました

→ 許容範囲内での視覚的一致

結果： 元のコードをコピーすることなく、ブランドに沿ったコンポーネントが完成する。

注意点

DNA が細かい視覚効果（グレインテクスチャなど）を見落とす — --high-fidelity を渡す。低速だが抽出がより詳細になる

組み合わせ： filesystem

既存プロダクトのデザインに合った新しいコンポーネントを生成する

👤 デザイン済みのプロダクトに機能を追加する開発者 ⏱ ~30 min intermediate

使うタイミング： 既存のアプリに画面を追加する際に、ネイティブに見せたいとき。

フロー

ライブ URL から DNA を抽出する

Use design-dna. Extract DNA from https://app.example.com/dashboard (logged-in screenshot).✓ コピーしました

→ 実際のプロダクトを反映した DNA が生成される
トークンの差異を監査する

Compare DNA to our existing tailwind.config — flag drift.✓ コピーしました

→ 乖離一覧が表示される（例：「shadow-md がページ間で一致していない」）
新しい画面を生成する

Generate the new 'Settings' screen using our reconciled DNA.✓ コピーしました

→ アプリの他の部分と区別がつかない画面が生成される

結果： 数ヶ月後に画面を追加しても、プロダクトとして統一感がある。

注意点

ライブ URL が認証背後にある。公開のランディングページの DNA では誤解を招く — マーケティングページではなく認証済みスクリーンショットを使用する

リファレンスからデザインシステムを一からブートストラップする

👤 デザイナーなしの個人創業者・小規模チーム ⏱ ~60 min advanced

使うタイミング： アプリを始めるにあたって、一貫したデザインシステムを素早く作りたいとき。

フロー

3 つのリファレンスを選ぶ

Use design-dna. Extract DNA from 3 screenshots I admire (editorial, app, marketing).✓ コピーしました

→ 3 つの独立した DNA オブジェクトが生成される
合成する

Synthesize a single DNA emphasizing the editorial type scale and the app's spacing.✓ コピーしました

→ マージされた DNA が生成される
スターターシステムを出力する

Generate tailwind.config, CSS vars, and a Button + Card + Input set using the merged DNA.✓ コピーしました

→ リポジトリにスターターデザインシステムが作成される

結果： デフォルトの Tailwind から始めるのではなく、反復できる一貫したベースラインが完成する。

注意点

大きく異なる美観を合成するとカオスになる — 同じ「ファミリー」に属するリファレンスを選ぶ。スタイル内のバリエーション。対極のものは避ける

組み合わせ： frontend-slides-skill

組み合わせ

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

design-dna-skill + filesystem

DNA と生成されたコンポーネントをリポジトリに永続化する

Save design.dna.json under /design/ and check in; treat it as design source-of-truth.✓ コピーしました

design-dna-skill + frontend-slides-skill

プロダクトの美観に合ったスライドデッキを生成する

Use design-dna to capture our brand; pass to frontend-slides-skill for matching deck templates.✓ コピーしました

ツール

このMCPが提供する機能

ツール	入力	呼び出すタイミング	コスト
extract_dna	image_path or url, fidelity?	任意のリファレンスの最初のステップ	Vision LLM tokens
synthesize_dna	dna[]	複数のリファレンスを組み合わせるとき	LLM tokens
generate_component	dna, component_spec	ブランドに沿ったコンポーネント生成	LLM tokens
diff_dna	dna_a, dna_b	リファレンスと現プロダクトの乖離を監査する	0

コストと制限

運用コスト

APIクォータ: ビジョン LLM の利用に依存する
呼び出しあたりのトークン: 抽出は約 3000〜8000 トークン（画像入力 + JSON 出力）
金額: 無料。LLM プロバイダーへの支払いが必要
ヒント: プロジェクトごとに DNA をキャッシュする。実際のブランド更新時のみ再抽出する

セキュリティ

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

最小スコープ： filesystem-read (images) Outbound HTTPS (URL refs)

認証情報の保管： なし（ビジョン LLM の認証は環境変数で管理）

データ送信先： ビジョン LLM プロバイダー。URL フェッチャー（使用する場合）

著作権のある素材をリファレンスとして抽出しないこと。出力にシグネチャとなる特徴が含まれる可能性がある

トラブルシューティング

よくあるエラーと対処法

抽出がグラデーションを見逃す

--fidelity high を使用する。デフォルトはトークン節約のため細かいグラデーションをスキップする

DNA トークンが実行ごとに異なる

ビジョンモデルは確率的。サポートされている場合はシードを設定する。または 2 回抽出して中央値を取る

生成されたコードがデザイントークンではなくインラインスタイルを使う

--token-mode strict を渡す。トークンとして存在する値のインライン化をスキルが拒否する

ライブ URL の抽出が空白になる

サイトに JS が必要。URL フェッチではなく完全にレンダリングされたスクリーンショットを使用する

代替案

design-dna 他との比較

代替案	代わりに使う場面	トレードオフ
design-extract (Manavarya09)	DTCG + マルチプラットフォームエミッタを含む完全なデザイントークンエクスポートが欲しいとき	より重い。軽量 DNA ではなく完全なデザインシステムパイプライン
Manual style guide curation	デザイナーがいてパターンライブラリがある場合	時間がかかる。より信頼性が高い

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

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