Claudeでデザインを「おしゃれに」仕上げる技として、これまでこの連載ではfrontend-design skillやTaste Skill、DESIGN.mdといった「型を教え込む」アプローチを何度か取り上げてきた。今回は少し切り口を変えて、UIコンポーネントそのものの「調達」に注目する。shadcn/uiのCLIがMCPを公式サポートし、Tweakcnが画像やプロンプトからテーマを生成し、21st.devのMagic MCPが1万点超のコンポーネントを検索・生成する——Claudeと会話しながら部品を集めてくる2026年8月時点の実務フローをまとめた。
shadcn CLI 3.0 ― MCPがついに公式機能に
shadcn/uiのCLIがバージョン3.0でMCPサーバーを公式サポートした。これまでサードパーティ製のMCPサーバーを個別に立てる必要があったが、今後は次の1行でClaude Code向けの設定が済む。
npx shadcn@latest mcp init --client claude実行するとプロジェクト直下に.mcp.jsonが生成され、Claudeが自然言語で「このレジストリにあるボタンコンポーネントを探して」「カレンダーブロックを入れて」といった指示を出せるようになる。裏側ではshadcn CLIのコマンド（npx shadcn list @aceternityでレジストリの一覧、npx shadcn search @aceternity -q "typewriter-effect"で検索）がそのまま呼び出される仕組みで、Claudeが人間の代わりにCLI操作をこなすイメージに近い。
レジストリの合成とバリデーションが強化
2026年5月のshadcnの変更履歴では、複数のregistry.jsonを1つに合成できるregistry includeと、公開前に構成をチェックするshadcn registry validateが追加された。自社の独自レジストリを大きな1ファイルとして手作業で保守しなくても、機能単位でファイルを分割・合成できるようになったのが大きい。社内向けの「デザインシステム・レジストリ」を育てているチームには地味だが効く更新だ。
Tweakcn ― 画像やひと言のプロンプトからテーマを作る
配色やトークンのチューニングではTweakcnが定番になりつつある。GitHubスター9,800超のオープンソースで、shadcn/uiとTailwind CSS v4向けのビジュアルテーマエディタとしてリアルタイムプレビューを備える。2026年に加わったAIテーマ生成機能では、画像をアップロードするとその配色を抽出してテーマ化したり、「Supabase風のテーマ」のようなひと言のプロンプトから配色・タイポグラフィを生成したりできる。エディタ本体は無料で、AI生成部分だけが有料アドオンという構成なので、色味の微調整だけならペイウォールに当たらない。
21st.dev Magic MCP ― 1万点超のコンポーネントを検索・生成
21st.devのMagic MCPは「エディタの中にあるv0」と形容されるツールで、Claude Code・Cursor・Windsurfから直接、React/Tailwindコンポーネントを検索・生成できる。導入は次のコマンドだけで済む。
npx @21st-dev/cli@latest init --client claudeセットアップ後はチャットで/uiと打つか、そのまま自然文で「月額/年額切り替え付きの3プラン料金表がほしい」のように頼めば、generate（新規コンポーネント生成）、get_inspiration(用途別の参考実装取得)、search_logo（企業ロゴ検索）といった機能が呼び出される。生成されるスタックはReact + TypeScript、shadcn/uiとRadix、Tailwind CSSという組み合わせで統一されているため、既存のshadcnベースのプロジェクトにそのまま馴染みやすい。
v0（Vercel）との橋渡し ― Open in v0
自社レジストリを公開URLとして持っている場合、Open in v0という仕組みでv0にそのまま引き渡せる。https://v0.dev/chat/api/open?url=[URL]のようなエンドポイントにレジストリアイテムのURLを渡すだけで、v0チャットがコンポーネント・テーマ・関連コードを読み込んだ状態で立ち上がる。Vercelが配布するshadcn/ui Registry Starterを土台にすれば、自前のデザインシステムをv0にもClaudeにも「共通のレジストリ」として渡せるようになる。
4つのツールの使い分け
| ツール | 主な役割 | 得意なこと | 料金の目安 |
|---|---|---|---|
| shadcn CLI MCP | レジストリの検索・追加を自然言語化 | 既存レジストリの部品をClaudeから直接インストール | 無料（OSS） |
| Tweakcn | 配色・トークンのテーマ生成 | 画像/プロンプトからのテーマ抽出、リアルタイム編集 | エディタ無料・AI生成は有料 |
| 21st.dev Magic MCP | コンポーネントの検索・新規生成 | 1万点超のReact/Tailwind実装から近いものを探す | 無料枠＋有料プラン |
| v0（Open in v0） | レジストリを起点にした対話生成 | デザインシステムを踏まえたプロトタイピング | 無料枠＋有料プラン |
大まかな役割分担としては、配色・トークン設計はTweakcn、部品探しと差し込みはshadcn CLI MCPか21st.dev Magic、会話しながらのプロトタイピングはv0という組み合わせが扱いやすい。いずれもshadcn/ui・Tailwind CSSという共通言語の上に乗っているため、途中でツールを乗り換えてもコードの互換性は保たれやすい。
主な情報源
- MCP Server – shadcn/ui
- May 2026 – Registry Include and Validate – shadcn/ui
- Image to shadcn/ui theme. Generate with AI — tweakcn
- 21st-dev/magic-mcp – GitHub
- Open in v0 – shadcn/ui
- shadcn/ui Registry Starter – Vercel
各ツール・サービスは提供元の規約に従ってご利用ください。情報は各情報源の公開時点のものです。収集・要約はAI、公開判断は人。