エージェント用UIデザインSkill、ワンクリックUIジェネレーター、コンポーネントライブラリの違いと選び方
現在UIを作る際には、主に3種類のツールが登場します。従来のコンポーネントライブラリ（shadcn/ui、Radix、Ant Designなど）、オンラインのワンクリックUI生成プラットフォーム、Claude CodeやCodexに導入するエージェント用UIデザインSkill（Oil UIなど）です。これらはどれか一つを選べばよい代替関係ではなく、「基盤となる基本コントロール」「独立したコンセプトスケッチ」「実際のコードベースでデザイン手法とレビューを実行する」という異なる層の課題を担当します。
重要なポイント
- コンポーネントライブラリはボタン、ダイアログ、ドロップダウンなどの基本部品を提供しますが、プロダクトのファーストビューで何を語り、情報にどう優先順位を付けるかは決めません。
- オンラインのワンクリックUIジェネレーターは、既存リポジトリから離れてコンセプト画像を素早く見るのに向いていますが、生成コードを複雑な既存プロジェクトへそのまま組み込むのは難しいことがあります。
- エージェント用UIデザインSkill（Oil UI）はコーディングエージェント内で直接動き、複数方向の比較、定型表現の削減、実際のスクリーンショットのブラインドレビューを実際のコードベースで行えます。
- 3つは自由に組み合わせられます。既存プロジェクトのコンポーネントライブラリを維持し、Claude Code / Codex + Oil UIでレイアウトの方向、状態の構成、レビューを担当させられます。
npx skills add oil-oil/oil-uiプロジェクトですでに使っている任意のフロントエンドフレームワークやコンポーネントライブラリと併用できます。
3種類のツールの実際の位置づけと限界の比較
AIが作ったUIに失望する原因の多くは、ツールの使い方を誤ることです。コンポーネントライブラリを導入すれば自動的に優れたデザインになると期待したり、オンラインジェネレーターからエクスポートした静的で孤立したコードを本番環境へ無理に移したりすることが例です。3種類の境界を並べて見れば、選択は明確になります。
| 比較軸 | 基本コンポーネントライブラリ（shadcn/ui、Radixなど） | オンラインのワンクリックUIジェネレーター | エージェント用UIデザインSkill（Oil UI） |
|---|---|---|---|
| 中心となる成果物 | アクセシブルな基本コントロール（Button、Dialog、Selectなどのコードコンポーネント） | 外部プラットフォームでホストされる、独立した1枚または複数枚のプレビューページ | コーディングエージェントが読むデザイン手法、比較ページツール、スクリーンショットのブラインドレビューワークフロー |
| 既存コードベースの理解 | リポジトリ内に依存関係としてインストールされ、能動的なデザイン判断は行わない | 通常は外部サンドボックスで動き、ローカルの業務ルートやAPIを直接読み書きしない | ローカルのClaude Code / Codex / Cursorで、実際のプロジェクトファイルを直接読み書きする |
| 「どれも同じAIっぽさ」への対処 | レイアウトを担当しないため、AIはよいコンポーネントを使っても平凡な3枚カードを作れる | プラットフォーム内蔵のテンプレートに依存し、同類のプロンプトでは似た結果になりやすい | カテゴリーに沿った方向探索、比較ページ、AIの定型表現を減らすチェックリストで、能動的にテンプレート感を崩す |
| 既存プロジェクト改修と複数ページの統一 | 個別コントロールの置き換えには対応するが、ページ全体の情報の優先順位やフローの簡略化は担当しない | 既存のイベントとAPIを壊さずに複雑な既存ページを改修するのは難しい | 単一ページのスクリーンショット診断、3段階の改修、全サイト向けDESIGN.mdの抽出に対応 |
| ビジュアルの受け入れ方法 | 開発者自身がブラウザーを開いて目視で確認 | プラットフォームのプレビューフレームで静的または軽いインタラクションの結果を確認 | ローカルブラウザーを自動で開いて1440px / 390pxの画面をキャプチャし、コンテキストなしのサブエージェントがブラインドレビュー |
実際のチームでツールを組み合わせる方法
それぞれの長所を理解すれば、プロジェクトの段階に応じて柔軟に組み合わせられます。既存の開発習慣を捨てる必要はありません。
- 既存の本番プロジェクト（Next.js / Vue＋既存コンポーネントライブラリ）
- Radix、shadcn/ui、内部コンポーネントライブラリをそのまま使い、フォーカス管理とキーボードアクセシビリティを担当させます。Claude CodeやCursorにOil UIを導入し、ページのレイアウトと優先順位、状態の補完、余分な罫線の削減、ローカルスクリーンショットによる品質確認をエージェントに任せます。
- 新しいプロダクトやブランドサイトを一から始める
- CodexまたはClaude CodeとOil UIを使い、まず3方向の比較ページを生成します。ギャラリーの「Kiln」コンポーネントライブラリサイト、「Dispatch」APIドキュメント、「Forge」コーディングアシスタントが例です。最も独自性のある一案を決めてから、完全なインタラクションを実装します。
- 気に入った参考画像やスケッチがすでにある
- デザイナーが主要な画面を作成済みの場合や、別の場所で参考になるビジュアルをキャプチャした場合は、Oil UIを導入したエージェントに画像を直接渡します。スクリーンショットのピクセル比較による再現、またはスタイル移行のワークフローで、本番コードへ落とし込めます。
Oil UIが得意なことと、担わないこと
正確に判断できるよう、Oil UIの実際の限界も先に明確にしておきます。
まず、Oil UIはエージェントにデザインの進め方と画面の見方を教えるSkillです。固定されたReactコンポーネントライブラリではなく、基盤となる大規模モデルの能力を置き換えるものでもありません。Claude Opus 5.5やGPT 6.1 Solが到達できるレイアウトの上限は、パラメーター数の少ない軽量モデルよりもやはり高くなります。また、ブラインドレビューと要素削減を十分に活用するには、エージェント環境が画像を読み取り、ローカルブラウザーでスクリーンショットを撮れる必要があります。そのためOil UI Proを購入する前には、必ず無料のオープンソース版を1行のコマンドでインストールし、自分の実際のタスクで一度試すことをおすすめしています。
Oil UIを使って、現在のプロジェクトの[ページ名（例：開発者向けAPIキーと使用量ページ）]を再設計してください。
- コンポーネントと技術上の制約：プロジェクトで使用中の[例：shadcn/uiの基本コントロールとTailwind設定]を継続して使い、新しいサードパーティ製UIライブラリは導入しないでください。
- デザインの条件：すべてのセクションを既定のCardコンポーネントで囲まないでください。最初に2～3の異なる情報配置の方向を提案し、使用頻度の高い操作を際立たせ、空状態とエラーのフィードバックを補完してください。1440×900と390×844のブラウザービューポートでスクリーンショットを撮って確認してください。基本コンポーネントライブラリには基盤となるコントロールを、Oil UIにはページ全体のレイアウト、優先順位、ビジュアル検証を担当させます。
実際に動くギャラリー作品とプロンプト
1440pxまたは390pxのライブデモを開き、モデルとプロンプトが最終的なUIにどう表れたかを確認できます。
Kiln
コンポーネントライブラリウェブサイト
製品：Kiln。React開発者向けのオープンソースコンポーネントライブラリ。ボタン、入力、ドロップダウン、コマンドパレット、ダイアログ、ツールチップ、テーブル、日付選択など、40以上のコンポーネントを備え、テーマのカスタマイズに対応する。 ウェブサイトのホームページを構築し、必要に応じてコンポーネント詳細ページも作る： - スクリーンショットではなく、実際に操作できるコンポーネントをホームページに直接表示する。「コンポーネントウォール」には、クリック、入力、切り替えができる動作中のコンポーネントを含める。 - 主要な開発者ツールウェブサイトの精密さと抑制を参考に、ほぼ白黒、アクセントカラーは多くても1色、厳密なグリッド、コードと数字には等幅書体を使う。 - テーマコントローラーを印象的にする。角丸、密度、アクセントカラーの操作をドラッグすると、ページ上のすべてのコンポーネントが即座に変わるようにする。 - コピー可能なインストールコマンド、コードスニペット、コンポーネントカテゴリー別のナビゲーション、GitHubスターや週間ダウンロード数などの現実的な使用数値を含め、過度にきりのよい数字は避ける。
作品とプロンプトを見る →
Dispatch
開発者向けAPIドキュメント
決済またはメッセージングAPI企業の開発者ドキュメントサイト（1440×900を基準とし、幅390までレスポンシブ対応）。左にナビゲーション、中央に記事、右に言語（cURL、Node、Python）を切り替えられるコードサンプルを配置する。クイックスタート、1つのエンドポイントの完全なリファレンス（パラメーター表、リクエスト・レスポンス例、エラーコード）、検索を含める。 読み進める間、コードサンプルは現在のセクションに追随し、選択した言語はサイト全体で記憶されるようにする。クイックスタートページ、エンドポイントのリファレンスページ、検索を開いた状態をデザインする。
作品とプロンプトを見る →
muse
AI画像・動画キャンバス
デザイナーとクリエイティブチーム向けのAI画像・動画生成ツール。すべてのプロンプト、参照画像、生成結果を一つの無限キャンバスに配置する。メインワークスペースを構築する。
作品とプロンプトを見る →
Forge
AIコーディングアシスタント
製品：Forge。デスクトップAIコーディングアシスタント。左側に会話、右側に編集中のコードとターミナルを配置する。ファイルの読み込み、コードの編集、テスト実行を段階的に見られる。 現実的なデータを使ってメインインターフェース（1440×900）を構築し、実際のプロジェクトに見えるファイル名、差分、テスト出力を用意する。 AIの作業を見えやすく、印象的にする。ステップが順に光り、差分行が徐々に現れ、テストが赤から緑へ変わるようにする。 危険な変更についてユーザーの確認を待っている状態も撮影する。
作品とプロンプトを見る →まずオープンソース版を試し、完全なツール群が必要になったらOil UI Proへ
無料のオープンソース版にも、カテゴリーリサーチ、複数方向の比較ページ、AIの定型表現チェック、スクリーンショット再現が含まれます。このワークフローがチームに合うと確認でき、既存プロジェクトの3段階改修、10種類のワークスペースの骨格、最大3ラウンドで9/10を目指すブラインドレビュー、単一コンポーネントの磨き込みが必要になったら、Oil UI Pro（買い切り・生涯アップデート）へアップグレードしてください。
npx github:oil-oil/oil-cli install oil-ui-proよくある質問
Oil UIは月額サブスクリプションですか、買い切りですか？
Oil UIオープンソース版はMITライセンスで完全無料です。Oil UI Proは一度の購入で生涯アップデートを受けられ、トークンや生成回数による追加料金はありません。現在の価格と支払い方法は /ja/pro/ ページで確認してください。
専任デザイナーがおらず、バックエンドまたはフルスタックエンジニアだけのチームでもOil UIを使いこなせますか？
それはOil UIが最もよく使われる場面の一つです。エンジニアがタイポグラフィの専門用語を暗記する必要はありません。「ユーザーは誰か」「何を完了するのか」「どんな実データ項目があるか」を明確に書けば、Oil UIがエージェントを導いて複数方向の比較ページを作り、スクリーンショットの問題点を自動で指摘します。
Figmaを使っているデザイナーにとって、Oil UIにはどんな用途がありますか？
主に2つの使い方があります。一つは、プロジェクトの初期に5分ほどで、実際の文言とインタラクションを備えた3方向のWebページを作り、静的な画板より早く操作感を検証する方法です。タイムラインのドラッグ、動的な価格計算、複数画面の連携で特に有効です。もう一つは、フロントエンドリポジトリのレビューに直接参加し、デザイン規約をDESIGN.mdにまとめてチームのエージェントに実行させる方法です。
ギャラリーの100以上の作品は、すべてこのワークフローで直接作られたのですか？
はい。ギャラリーの各作品には、制作に使った具体的なモデル（GPT 6.1 Sol、Claude Opus 5.5、Claude Sonnet 5.5、DeepSeek 4.1 Flashなど）が記載され、オンラインデモも公開しています。元のタスクプロンプトはタスク記録がある作品にだけ表示されます。Herbarium、Chronos、ArchonにはTASK.mdがないため、プロンプトは表示されません。