Design Extract (MCP server) — ユースケース, インストール & ライブデモ

なぜ使うのか

主な機能

3層DTCGトークン出力（primitive → semantic → composite）
マルチプラットフォームエミッター：SwiftUI・Compose・Flutter・Tailwind v4・Figma
WCAGリメディエーションパス — 失敗ペアにフラグを立てて修正案を提示
CSS健全性監査（詳細度・デッドルール・冗長トークン）
ワンクリックキャプチャ用Chrome拡張機能
Playwrightベース、Node 20+、MITライセンス

ライブデモ

実際の動作

design-extract-mcp.replay ▶ 準備完了

0/0

インストール

クライアントを選択

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

{
  "mcpServers": {
    "design-extract-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "design-extract-mcp"
      ]
    }
  }
}

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

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

{
  "mcpServers": {
    "design-extract-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "design-extract-mcp"
      ]
    }
  }
}

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

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "design-extract-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "design-extract-mcp"
      ]
    }
  }
}

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

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "design-extract-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "design-extract-mcp"
      ]
    }
  }
}

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

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "design-extract-mcp",
      "command": "npx",
      "args": [
        "-y",
        "design-extract-mcp"
      ]
    }
  ]
}

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

~/.config/zed/settings.json

{
  "context_servers": {
    "design-extract-mcp": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "design-extract-mcp"
        ]
      }
    }
  }
}

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

claude mcp add design-extract-mcp -- npx -y design-extract-mcp

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

ユースケース

実用的な使い方： Design Extract

ブランドのビジュアルシステムをDTCGトークンにクローンする方法

👤 デザインエンジニア、代理店チーム、ブランドアライン済みプロダクトチーム ⏱ ~25 min intermediate

使うタイミング： 参考サイトからマーケティングサイトやアプリを再構築する際に、Figmaで手作業するのではなく10分でトークンが必要な場合。

前提条件

参考サイトの公開URL — 例：https://stripe.com — 公開アクセス可能である必要があります

フロー

抽出する

Use design-extract on https://stripe.com. Output DTCG tokens, SwiftUI, and Tailwind v4. Save to /tokens/.✓ コピーしました

→ tokens.json + tokens.swift + tailwind.css が書き込まれ、カバレッジレポートが表示される
監査する

Run the CSS health pass and the WCAG remediation. Flag everything below AA.✓ コピーしました

→ 失敗ペアと提案を含む監査レポート
適用する

Now generate a starter Next.js page using these tokens — nav, hero, 3 feature cards.✓ コピーしました

→ ページがブランドビジュアルアイデンティティでレンダリングされる

結果： 1つのURLからトークンセット・監査・スターターページがすべて生成される。

注意点

サイトが重いSSRゲートまたはログイン保護下にある — 拡張機能またはカスタムPlaywrightの前処理ステップでログイン済みcookieを提供してください

組み合わせ： filesystem

自社サイトのデザインシステムドリフトを監査する

👤 社内デザインシステムのメンテナー ⏱ ~30 min intermediate

使うタイミング： 47個の不正な色がプロダクションに紛れ込んでいると疑っている場合。確認しましょう。

フロー

インベントリを取る

Run design-extract against https://yoursite.com. Don't emit code — just report unique colors, font stacks, spacing values used.✓ コピーしました

→ カテゴリごとの固有値の数
ソースと比較する

Compare against /design/tokens.json. Flag every value used in production that's not in the source-of-truth.✓ コピーしました

→ ファイル/コンポーネント参照付きのドリフトテーブル
クリーンアップを計画する

Group drift by likely cause (legacy CSS, ad-hoc style, wrong token). Suggest a 3-PR cleanup plan.✓ コピーしました

→ PRプランが書き込まれる

結果： 「一貫性がない」という感覚的な訴えではなく、エンジニアリングに渡せる具体的なドリフトレポート。

注意点

ランタイムで解決するCSS変数のせいでツールが過剰報告する — --resolve-varsを渡してvar(--x)チェーンを数える前にトレースさせてください

組み合わせ： filesystem

ライブサイトからFigmaの変数を生成する

👤 Figmaでコードを反映させる必要があるデザイナー ⏱ ~15 min beginner

使うタイミング： コードが先にリリースされた場合；デザインがFigmaで追いつく必要がある場合。

フロー

Figma JSONを出力する

Use design-extract on https://yoursite.com with output=figma-variables. Save to /design/figma-vars.json.✓ コピーしました

→ インポート可能なFigmaの変数JSON
インポートする

Walk me through importing this with the Figma Variables Import plugin.✓ コピーしました

→ プラグインの手順がステップごとに説明される

結果： 手動でスポイトを使わずに、リリースされたコードと同期したFigmaファイル。

注意点

トークン名が既存のFigma変数と衝突する — --prefixフラグを使って名前空間を指定してください（例：site/color.bg.primary）

組み合わせ

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

design-extract-mcp + filesystem

トークン出力をリポジトリに保存して連続実行時に差分を確認できるようにする

Run extract every Friday and save under /design/snapshots/$(date +%F)/.✓ コピーしました

design-extract-mcp + Figma-Context-MCP

双方向同期 — ライブから抽出し、Figmaにプッシュバックする

After extract, push the token file to Figma via Figma-Context-MCP.✓ コピーしました

ツール

このMCPが提供する機能

ツール	入力	呼び出すタイミング	コスト
extract	url, output_format[]: dtcg\|swiftui\|compose\|flutter\|tailwind\|figma\|wordpress\|shadcn	主要エントリーポイント	1 Playwright crawl
audit_css_health	url	クローニングではなく健全性が目的の場合、extractの後または代わりに使用	1 crawl
wcag_remediate	tokens	extractの後、トークンをリリースする前に使用	free (post-process)
diff_tokens	url, source_tokens_path	自社サイトのドリフト監査	1 crawl

コストと制限

運用コスト

APIクォータ: ローカル — マシンのスペックに依存
呼び出しあたりのトークン: 抽出サマリーあたり1500〜6000
金額: 無料（MIT）
ヒント: 毎PRで実行しないでください — 結果をキャッシュして変更時のみ実行してください

セキュリティ

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

認証情報の保管： ターゲットが認証を必要とする場合を除いてなし（その場合はcookieファイル経由）

データ送信先： 指定したURLのみ。Playwrightはローカルで実行されます。

robots.txtとターゲットサイトのToSを遵守してください — ブラウザのように取得しますが、大規模ではスクレイピングです。

トラブルシューティング

よくあるエラーと対処法

Playwright Chromiumの起動に失敗する

npx playwright install chromiumを一度実行してください

確認： `npx playwright --version`でバージョンが表示されること

サイトがヘッドレスブラウザをブロックする

--headedを渡すか、住宅用プロキシ/cookieファイルを提供してください

出力トークンが不完全に見える

サイトがCSS-in-JSを多用している — --wait-for-selector mainを試してSPAの描画完了を待ってください

代替案

Design Extract 他との比較

代替案	代わりに使う場面	トレードオフ
Figma-Context-MCP (GLips)	ソースオブトゥルースがライブサイトではなくFigmaの場合	Figma MCPはFigmaファイルが必要；design-extractは任意のURLから動作します
Tokens Studioプラグイン	すでにFigma内にいてトークン管理UIが欲しい場合	手動；design-extractは初期抽出を自動化します

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

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