はじめに
Next.js + TypeScriptの開発で、Claude CodeなどのAIコーディングエージェントに画面を作らせるときに使えるUIライブラリ・テンプレート・プロンプト集・AIツールをまとめました。
「料金」の列は次の意味です。
- 無料：有料プランなし
- 一部有料：本体は無料で、Pro版やテンプレートなどが有料
- 有料：基本的に有料
掲載している情報は、2026年10月時点で各サービスの公式サイト・GitHub・料金ページを確認したものです。料金やライセンスは変わることがあるので、利用する際は最新の情報を確認してください。
おすすめの構成
AIに画面を作らせながら、実装の速さとUIの品質を両方上げたいなら、次の構成から試すのがおすすめです。
| 用途 | おすすめ |
|---|---|
| 基本のUIライブラリ | shadcn/ui |
| Claude Codeから部品を探して入れる | shadcn/ui MCP、21st.dev |
| アニメーション・視覚効果 | Magic UI、Aceternity UI、React Bits |
| AIに渡すデザイン指示 | VibePrompts |
| テーマ調整 | Tweakcn |
| 実装後の確認 | Storybook |
基本の方針は、中心に使うUIライブラリを1つ決めて、足りない部品や演出だけを別のライブラリから足すことです。役割が同じライブラリを複数入れると、依存関係やCSSの管理が大変になり、デザインもバラつきます。
1. アニメーション・リッチなUIパーツ
LPのヒーローセクションや、目を引く演出を足したいときの候補です。ほとんどがshadcn/uiのレジストリに対応していて、npx shadcn addで1つずつ取り込めます。
| サービス | 得意なこと | 料金 | ライセンス |
|---|---|---|---|
| Magic UI | テキスト演出、Marquee、背景エフェクト | 一部有料 | MIT |
| Aceternity UI | 3D、スクロール演出、印象的なヒーロー | 一部有料 | 独自 |
| React Bits | テキストアニメーション、背景、インタラクション | 一部有料 | MIT + Commons Clause |
| Animate UI | shadcn/uiに足せるアニメーション付き部品 | 無料 | MIT + Commons Clause |
| Motion Primitives | テキスト効果、トランジション | 一部有料 | MIT |
| Arc UI | モーション付き部品とブロック。Tailwind不要（CSS Modules） | 一部有料 | MIT |
| EasyUI | 動きのあるReactコンポーネント | 無料 | MIT |
| Obsidian UI | canvas・WebGLも使う視覚効果 | 無料 | MIT |
| Cult UI | 個性的な見た目と質感のアニメーション部品 | 無料 | MIT |
| Eldora UI | LP向けのテキスト演出・ビジュアル部品 | 無料 | MIT |
| Kokonut UI | AI UI・カード・ボタンなどの動きのある部品 | 一部有料 | MIT |
| Fancy Components | 遊び心のあるマイクロインタラクション | 無料 | MIT |
| Motion | アニメーションライブラリ本体（旧Framer Motion） | 一部有料 | MIT |
React BitsとAnimate UIは純粋なMITではなく「MIT + Commons Clause」です。自分のアプリに組み込んで商用利用するのは問題ありませんが、コンポーネント自体を販売・再配布することは禁止されています。Aceternity UIも独自ライセンスで、ソースの再配布はできません。
選び方の目安です。
- 印象的なLP・ヒーローセクション：Aceternity UI、Magic UI
- 個別のアニメーション：React Bits、Motion Primitives、Motion
- shadcn/uiの部品にそのまま動きを足す：Animate UI、Cult UI
2. 汎用コンポーネント・デザインシステム
ボタン、フォーム、モーダル、メニュー、テーブルなど、アプリ全体で使う基本部品の候補です。
| サービス | 得意なこと | 料金 | ライセンス |
|---|---|---|---|
| shadcn/ui | ソースコードを自分のリポジトリに取り込むUI基盤 | 無料 | MIT |
| Base UI | スタイルなしのアクセシブルな部品 | 無料 | MIT |
| Radix UI | アクセシブルなUIプリミティブ | 無料 | MIT |
| React Aria | アクセシビリティ・国際化に強いAdobe製の部品とフック | 無料 | Apache-2.0 |
| coss UI（旧Origin UI） | Base UI製の実用的なアプリUI。Cal.com公式のデザインシステム | 無料 | MIT |
| HextaUI | AIアプリ向けの部品。loading・error・emptyの状態表示が充実 | 一部有料 | MIT |
| Kibo UI | ガントチャート・カンバンなどshadcn/uiを拡張する部品 | 無料 | MIT |
| ReUI | テーブルやデータ表示を含むshadcn系の部品集 | 一部有料 | MIT（Proは独自） |
| HeroUI（旧NextUI） | 見た目まで完成したモダンな部品 | 一部有料 | Apache-2.0 |
| Mantine | 100以上の部品とHooksがそろったオールインワン | 無料 | MIT |
| MUI | Material Design。Data Gridなど業務アプリ向け | 一部有料 | MIT（MUI X Pro以上は商用） |
| Ant Design | 管理画面・業務システム | 無料 | MIT |
| Chakra UI | propsでスタイルを書けるデザインシステム | 一部有料 | MIT |
| Park UI | Ark UI + Panda CSSのスタイリング済み部品 | 無料 | MIT |
| daisyUI | Tailwindにbtnなどのクラス名とテーマを追加 |
無料 | MIT |
| Flowbite React | Tailwindベースの部品・ページパーツ | 一部有料 | MIT |
shadcn/uiは2026年7月から、新しく作るプロジェクトの部品の基盤がRadix UIからBase UIに変わりました。Radix版・React Aria版も選べます。
対応バージョンにも注意が必要です。HeroUI v3はReact 19とTailwind v4が必須で、Mantine v9はReact 19.2以上が必須です。Park UIはPanda CSS前提なので、Tailwindのプロジェクトにはそのまま入りません。
選び方の目安です。
- カスタマイズ性とコードの所有を重視：shadcn/ui
- 見た目なしの部品から自分で組み立てる：Base UI、Radix UI、React Aria
- 多機能な一体型ライブラリ：Mantine、MUI、Ant Design、HeroUI
3. ダッシュボード・画面一式・テンプレート
部品単体ではなく、ログイン画面・料金ページ・管理画面などをまとめて手に入れたいときの候補です。
| サービス | 得意なこと | 料金 | ライセンス・利用条件 |
|---|---|---|---|
| shadcn/ui Blocks | ダッシュボード・サイドバー・ログインなどのブロック | 無料 | MIT |
| Tremor | 分析ダッシュボード、KPI、チャート | 無料 | Apache-2.0 |
| MiniDev UI | SaaSのプロダクト画面（課金・設定・AIチャットなど） | 無料 | MIT |
| 21st.dev | コミュニティ製Reactコンポーネントの検索・生成 | 一部有料 | 部品ごとに異なる |
| Untitled UI | SaaS向けの大規模デザインシステム（Figma + React） | 一部有料 | 無料部分はMIT |
| Preline UI | Tailwindの部品とテンプレート | 一部有料 | MIT + Fair Use License |
| Flowbite | Tailwindの部品とページテンプレート | 一部有料 | MIT |
| Cruip | SaaS・スタートアップ向けのLPテンプレート | 有料（無料テンプレあり） | 商用OK、再配布NG |
Tremorはnpmの@tremor/reactが2025年1月から更新されていません。今から使うなら、公式サイトからコードをコピーする方式（Tailwind v4対応）を選んでください。
Tailwind Plus（旧Tailwind UI）は、2026年9月にTailwind LabsがShopifyに合流したため新規販売を停止しています。
選び方の目安です。
- 分析ダッシュボード：Tremor
- 画面ブロックや部品を探す：shadcn/ui Blocks、21st.dev
- 完成済みのテンプレートを買う：Untitled UI、Cruip
4. AI向けプロンプト集
AIに「何を作るか」「どういう見た目にするか」を伝えるためのプロンプト集です。
| サービス | 得意なこと | 料金 |
|---|---|---|
| VibePrompts | Tailwindの画面構成プロンプト | 要確認 |
| UI Prompt Library | プレビュー付きのUI生成プロンプト | 一部有料 |
| ViberDy | 実在するUIを再現するプロンプト・スタイルキット | 一部有料 |
| UX/UI Principles | UX原則に基づく改善・監査プロンプト | 一部有料 |
AIっぽい見た目を避けるには
何も指示せずにAIに画面を作らせると、Interフォント、白地に紫のグラデーション、同じ形のカードの並びといった、よく見かける見た目になりがちです。Anthropicの記事「スキルを通じたフロントエンドデザインの改善」では、その原因を「学習データに多い無難な選択肢に寄るため」と説明しています。対策として、デザインの指示を必要なときだけ読み込むスキルにする方法を紹介しています。
その考え方をまとめた公式スキルがfrontend-designです。Claude Codeでは次のコマンドで入ります。
/plugin install frontend-design@claude-plugins-official
5. デザインの参考サイト
画面構成や雰囲気を決めるための参考事例集です。
| サービス | 得意なこと | 料金 |
|---|---|---|
| Mobbin | 実際のアプリ画面・ユーザーフロー | 一部有料 |
| Refero | Web・アプリのUIデザイン例 | 一部有料 |
| SaaSFrame | SaaSのLP・画面・メール | 有料 |
| Details | 実在サイトのヒーロー・フッターなどのUIパーツ集 | 一部有料 |
| Recent（Godlyの後継） | デザイン性の高いWebサイトやブランディングの事例 | 無料 |
| Awwwards | 受賞サイトなど優れたWebデザインの事例 | 一部有料 |
| Land-book | LP・Webサイトのギャラリー | 一部有料 |
Mobbinは利用規約で、スクリーンショットを他の場所に転載することを禁止しています。参考にした画面を記事や資料に貼るのは避けてください。
使い方の流れです。
- MobbinやReferoで、参考にしたい画面を探す
- VibePromptsなどで、実装の指示を具体的にする
- Claude Codeに渡して、既存プロジェクトのルールに合わせて実装させる
6. Claude CodeからつなげるMCP
MCP（Model Context Protocol）は、AIエージェントが外部のツールやデータを直接使うための仕組みです。2026年10月時点で、UI関連の多くのサービスがMCPに対応しています。Claude Codeに登録しておくと、「このプロジェクトに合う料金表の部品を探して入れて」のように頼めます。
| サービス | できること | 登録方法 | 料金 |
|---|---|---|---|
| shadcn/ui MCP | レジストリから部品を検索・追加 | pnpm dlx shadcn@latest mcp init --client claude |
無料 |
| Magic UI MCP | Magic UIの部品を検索・追加 | npx @magicuidesign/cli@latest install claude |
無料 |
| 21st MCP（旧Magic MCP） | 21st.devの部品を検索・生成 | npx @21st-dev/cli@latest init --client claude |
検索は無料、取得・生成は有料 |
| Storybook MCP | プロジェクトの部品情報をAIに渡す（Reactのみ、preview） | npx storybook add @storybook/addon-mcp |
無料 |
| Figma MCP | FigmaのデザインやFigma Makeのコードを読み込む | 公式ドキュメント参照 | Figmaのプランによる |
| v0 | shadcn/uiベースのUIをv0で生成 |
https://v0.app/api/mcp（OAuth） |
一部有料 |
| Mobbin | 実在アプリの画面を検索 | 公式ドキュメント参照 | Pro以上 |
| Refero | UIデザイン例を検索 | 公式ドキュメント参照 | Pro以上 |
| Details | UIパーツの参考例を検索（beta） | claude mcp add details --scope user --transport http https://api.details.so/mcp |
有料プランのみ |
MCPはどのサービスでもまだpreviewやbetaのものが多く、登録コマンドが変わることがあります。登録する前に、各サービスの最新ドキュメントを確認してください。
7. 開発支援ツール
| サービス | 得意なこと | 料金 |
|---|---|---|
| Tweakcn | shadcn/uiのテーマ・デザイントークンを画面で調整 | 無料 |
| Storybook | 部品を単体で表示・テスト | 無料 |
8. さらに探すためのディレクトリ
| サービス | 特徴 |
|---|---|
| shadcn/ui Registry Directory | shadcn互換レジストリの一覧。CLIやMCPからそのまま使える |
| Tailkits | Tailwindのテンプレート・UI素材の一覧 |
| DesignEng | UIライブラリやデザインリソースの一覧 |
| UI Skills | UIコンポーネントやAIエージェント向けスキルの一覧。MCPあり |
| DesignRevision | UIライブラリの比較記事とshadcn部品の一覧。MCPあり |
目的別の選び方
| 目的 | 最初に見る候補 |
|---|---|
| SaaSの基礎UIを整える | shadcn/ui、Base UI、Radix UI |
| 管理画面を早く作る | shadcn/ui Blocks、Tremor、MiniDev UI |
| リッチなアニメーションを足す | Motion、React Bits、Magic UI |
| LPの見た目を強くする | Aceternity UI、Obsidian UI、Recent |
| AIにデザイン指示を出す | VibePrompts、UX/UI Principles |
| 実際のアプリ画面を参考にする | Mobbin、Refero、SaaSFrame |
| AIにUI部品を探させる | shadcn/ui MCP、21st MCP |
| テーマや配色を調整する | Tweakcn |
| 部品の表示・動作を確認する | Storybook |
Claude Codeで使うときの手順
- 既存プロジェクトを確認する。Next.js・React・Tailwindのバージョン、今使っているUIライブラリ、コーディング規約を先に把握する
- 参考デザインを選ぶ。Mobbin、Refero、Recentなどで画面の構成や雰囲気を決める
- 中心にするライブラリを決める。shadcn/uiなどを軸にして、役割が同じライブラリを複数入れない
- 必要な部品だけ足す。shadcn/ui MCPや21st.devで探し、依存関係とライセンスを確認する
- 実装後に確認する。レスポンシブ表示、キーボード操作、ローディング・エラー状態、アクセシビリティ、既存テストへの影響を見る
導入前に確認すること
- 料金：無料・一部有料・有料のサービスが混ざっています。Pro版の中身と価格は公式ページで確認してください
- ライセンス：MITに見えてもCommons Clauseなどの追加条件があることがあります。コード、テンプレート、画像素材で条件が違う場合もあります
- 対応バージョン：React 19やTailwind v4が必須のライブラリが増えています。プロジェクトのバージョンと合うか確認してください
- 入れすぎ：役割が同じライブラリを増やすと、依存関係やスタイルの管理が大変になります
- 更新状況：Fancy ComponentsやPark UIのように更新が止まり気味のものもあります。GitHubの最終更新日を見ておくと安心です
最後に
AIに画面を作らせると、どうしても見たことのあるUIになりがちです。中心にするUIライブラリを1つ決めて、足りない部品や演出だけを足していくと、実装の速さを保ったまま見た目の質も上げやすくなります。
まずはshadcn/uiとshadcn/ui MCPを入れて、Claude Codeに部品を探させるところから試してみるのがおすすめです！気になるライブラリがあれば、レジストリに登録するだけでそのまま候補に加えられます。
最後まで読んでいただき、ありがとうございました！
もし記事が参考になりましたら、いいねや共有をしていただけると嬉しいです🎉
株式会社サードスコープではAIを活用したシステムやサービスを開発しています。開発と導入支援の経験をもとに、現場での使い方まで踏まえてご提案します。
弊社では人材教育から実務支援まで幅広い業務に対応したAI中心設計による次世代のビジネスプラットフォームを提供しています。
参考