designlang MCP Server
designlang MCPサーバーでClaude連携・Webサイトのデザイン抽出を自動化
npx designlang mcp概要
designlang MCP Serverの設定方法と使い方。
任意のWebサイトのデザインシステムを丸ごと抽出するMCPサーバー「designlang」（design-extract）をClaudeから利用できる。
DTCGトークン、Tailwind v4 / shadcn/ui 設定、Figma 変数、SwiftUI / Compose / Flutter / WordPress 等のマルチプラットフォーム出力、複数サイト比較、CI/CD連携のデザイン回帰検査が可能。
Claudeとdesignlangの MCPサーバー連携により、競合デザインのトークン化や本番デプロイ後の崩れ監視を自動化できる。
設定方法は npx designlang mcp を登録するだけで完結する。
料金・APIキー情報
料金
完全無料APIキー
🔓 不要✅このMCPはAPIキー不要です。別途セットアップが必要な場合があります（上記参照）。
こんな使い方ができます
本番Webサイトのデザインシステムを丸ごと抽出して DTCG トークン化できる
複数サイトを Claude に比較させ、デザイン言語の共通点・差分を可視化できる
CI/CD に組み込んで本番のデザインドリフトを Claude に検知させられる
Tailwind v4 / shadcn/ui / Figma 変数 / 各種ネイティブ向けの設定を一括生成できる
セットアップ手順
- 1
Node.js 20+ を用意する（Playwright は designlang に同梱）
- 2
認証必須ページを扱う場合は事前に --cookie-file 用のクッキーファイルを準備する
- 3
Claude Code に追加：claude mcp add designlang -- npx designlang mcp
設定ファイル
コピー前に確認
Node.js 20+。Playwright は designlang に同梱。対象URLへのネットワーク到達性が必要。認証保護ページは --cookie-file でクッキー指定が可能。MITライセンス。
claude mcp add designlang -- npx designlang mcp注意事項
ベンダー保護されていない範囲を対象とし、各サイトの利用規約・robots.txtに従って利用すること。一括生成できる出力先（Tailwind v4 / shadcn/ui / Figma変数 / SwiftUI / Compose / Flutter / WordPress）が広い。