Oil UI SkillのインストールとAI UIデザインガイド
Oil UIは、AIエージェントのためのUIデザインSkillです。タスクと実際のコンテンツから出発し、異なる方向を検討してから、動くUIを少しずつ磨くためのデザイン手法をモデルに提供します。ギャラリーの事例には使用モデルが記載され、タスクの記録がある作品では元のプロンプトも表示されます。結果を確認してから自分のプロジェクトで試せます。
1. 無料のオープンソース版をインストールする
ターミナルで次のコマンドを実行し、インストーラーの案内に沿って使用中のエージェントとインストール範囲を選びます。コマンドをエージェントに送って、インストールを手伝ってもらうこともできます。DeepSeek Harnessを使っている場合は、dsh plugin --profile web add github:oil-oil/dsh-oil-ui を実行すると、ネイティブプラグインのdsh-oil-uiをインストールできます。無料版が内蔵され、ローカルにインストール済みのOil UI Proも自動で認識します。
npx skills add oil-oil/oil-ui2. 実際のタスクを伝える
どんな商品か、誰が使い、ユーザーが何を完了する必要があるかを説明し、実際のコンテンツ、ページ範囲、技術上の制約も伝えます。既存プロジェクトを改修する場合は、維持すべき業務上の動作を明確にします。スタイルの形容詞を並べるより、はっきりしたタスクの方が、役に立つデザインにつながります。
Oil UIを使って、私の予約ツールのホームページをデザインしてください。ユーザーは小規模スタジオの顧客で、サービスを選び、予約可能な時間を確認して予約することが主なタスクです。最初に異なるデザイン方向をいくつか提案し、現在の技術スタックと既存の予約フローは維持してください。3. 複数の方向を比較してから実装を進める
エージェントに複数の方向を並べて表示させ、実際のコンテンツを使って情報階層、タイポグラフィ、レイアウト、主な操作を比較します。一つを選んでから詳細を磨いてください。ギャラリーのプロンプトは参考になりますが、自分の商品のコンテンツと制約に合わせて書き換える必要があります。
すべての作品 →4. ページを開き、ユーザーのタスクを最後まで行う
動くページでファーストビュー、長いコンテンツ、モバイルレイアウト、重要な操作を確認し、そのタスクで実際に必要な読み込み中、空、エラーの状態もカバーします。スクリーンショットは見た目の細部を比べるのに役立ちますが、操作できるかどうかは、実際にクリックと入力をして確かめる必要があります。問題があれば、該当ページ、行った操作、結果を具体的にエージェントへ伝えます。
5. より完全な手法が必要になったらProを検討する
Oil UI Proは、インタラクションと状態、レスポンシブレイアウト、既存プロジェクトの改修、複数の視点からのレビュー、タスクの動作確認をカバーします。Proページで購入できるほか、エージェントにインストールコマンドを実行させ、ログイン、支払い、インストールを手伝ってもらうこともできます。オープンソース版とProのどちらも、結果は使用するモデルの能力に左右されます。まずは実際のタスクでオープンソース版を試すのがおすすめです。
npx github:oil-oil/oil-cli install oil-ui-pro形式とタスクから探すUIデザインのインスピレーション
Oil UIギャラリーの実際に動く事例を、UIの形式や具体的なデザインタスクから探せます。元のデモを開いて手法を比較し、作品の背後にあるプロンプトも確認できます。
デザイン事例 →実践ガイドとプレイブック
使用中のコーディングエージェント、作りたいUIの種類、具体的なデザイン課題から完全なワークフローを探せます。各ガイドには、実際に動くギャラリー作品、プロンプトテンプレート、レビュー用チェックリストが付いています。
エージェント・ツールガイド
Claude Code、OpenAI Codex、DeepSeek Harness、Cursor、WindsurfでOil UIをインストールして使うためのワークフロー、セットアップコマンド、プロンプト構成を紹介します。
Claude Code UIデザインガイド
Claude CodeにOil UI Skillをインストールし、実際のタスクプロンプト、複数方向の比較ページ、ブラウザーのスクリーンショットレビューを使って、Webサイト、モバイルアプリ、UIコンポーネントをデザインする方法を解説します。
エージェントガイド · OpenAI CodexCodex UIデザインガイド
OpenAI Codex CLIとGPTモデルでOil UI Skillをインストール・使用する方法を解説します。書体ファウンドリー、監視ワークスペース、請求管理画面などの実例とプロンプトの書き方も紹介します。
エージェントガイド · DeepSeek HarnessDeepSeek Harness UIデザインガイド
DeepSeek Harnessでネイティブプラグインのdsh-oil-uiを1行のコマンドでインストールし、無料版とローカルのOil UI Proを自動で連携させる方法を解説します。DeepSeek 4.1 Flashで制作した実際の作品も比較できます。
エージェントガイド · Cursor / Windsurf / IDECursor・Windsurf UIデザインガイド
Cursor、Windsurf、Antigravity、Gemini CLIにOil UI Skillをインストールし、既存のプロジェクト構成、コンポーネント規約、業務フローを維持しながらUIを設計・改修する方法を解説します。
UIの形式・場面別の実践ガイド
ランディングページ、管理画面とデスクトップワークスペース、複数画面のモバイルアプリ、既存プロジェクトのUI改修という4つの実践的なタスクからデザイン手法を学べます。
公式サイト・SaaSランディングページ実践ガイド
「中央の大見出しと3枚のカード」というありきたりなAIランディングページから抜け出す方法を解説します。ギャラリーのOrvo、Atelier Volders、Fonderie Mercierを例に、サイト設計の流れとプロンプトを紹介します。
場面別プレイブック · 管理画面・デスクトップワークスペース管理画面・デスクトップワークスペース実践ガイド
「上部にKPIカード4枚、下部に折れ線グラフ3つ」というAI管理画面の定型から抜け出す方法を、運用監視、API請求、ラボのサンプル管理などの実例から解説します。
場面別プレイブック · モバイルアプリデザインモバイルアプリ複数画面デザイン実践ガイド
モバイルアプリを「幅を狭めたデスクトップWebページ」にしない方法を解説します。390×844の実ビューポートと複数画面ページscreens.htmlを使い、サーフ予報、配車、デジタルバンキング、瞑想などのモバイルUIを設計します。
場面別プレイブック · 既存プロジェクトのUI改修既存プロジェクトのUI改修・体験改善
稼働中の実プロジェクトでOil UIを使い、単一ページのビジュアル診断、3段階の改修（ノイズ整理、レイアウト向上、フロー再設計）、DESIGN.mdによる複数ページの統一を行う方法を解説します。
デザイン手法とビジュアルQA
AIらしい定型表現を減らし、複数の方向を並べて比較し、実際のビューポートでスクリーンショットとブラインドレビューを行う方法や、UI Skillとジェネレーターの使い分けを解説します。
AIっぽいUIの定型感を改善するガイド
AIが書いたWebサイトや管理画面がすぐに分かってしまうのはなぜでしょうか。ピル型の小見出し、左側のカラーバー、カードの入れ子、架空の指標という典型的なAIの既定表現を分解し、プロンプトにそのまま使える削減チェックリストを紹介します。
デザイン手法 · 複数方向の並列比較複数方向の並列比較デザイン手法
1回の生成で一案しかなければ、それが最適かどうか判断できません。Oil UIのHTML比較ページの仕組みと、同じブリーフから作られたOrvo、Atelier Volders、Fonderie Mercierの複数方向の完成品を紹介します。
デザイン手法 · 実際のスクリーンショットとブラインドレビュー実ビューポートのスクリーンショットとサブエージェントのブラインドレビュー
JSXとCSSを見るだけでは、文字の切り詰め、くすんだコントラスト、レイアウトの重心の偏りを見つけられません。Oil UIが1440px / 390pxの実ブラウザースクリーンショット、200%の部分拡大、色面構造図、コンテキストなしのサブエージェントレビューで品質を確認する方法を解説します。
デザイン手法 · ツールの選択と役割分担UIデザインSkill・ジェネレーター・コンポーネントライブラリの比較
エージェント用UIデザインSkill（Oil UIなど）、オンラインのワンクリックUIジェネレーター、従来のコンポーネントライブラリ（shadcn/ui、Radixなど）の位置づけ、適した場面、組み合わせ方を客観的に比較します。
実測比較 · 同一モデルと匿名ビジュアルレビューUIデザインSkill 4種の実測比較
Kimi AgentSwarmとkimi-1021-previewを使い、Oil UI、frontend-design、UI UX Pro Max、Impeccable、Skillなし対照群を同じ課題でテスト。15回分のスコア、2回の機能失敗、すべてのデモを公開します。
よくある質問
Oil UIはコンポーネントライブラリですか、それともテンプレートですか？
エージェントがデザイン手法とワークフローを読み込むためのSkillです。特定のコンポーネントやテンプレートの使用を強制するものではなく、実際のページはエージェントがプロジェクトの制約に合わせて実装します。
同じSkillを使っているのに、事例の出来が違うのはなぜですか？
事例ごとにタスク、モデル、改善を重ねた回数が異なるため、結果も変わります。各作品には使用モデルが明記され、タスクの記録がある場合は元のプロンプトも確認できます。Skillはモデルが持つ能力を生かす助けにはなりますが、すべてのモデルに同じデザイン水準を保証するものではありません。
既存のプロダクトの改善にも使えますか？
はい。特定のページやタスクから始め、維持すべき業務フロー、実データ、技術上の制約を伝えてから、デザイン方向を提案させてください。方向を決めた後は完全なタスクを検証し、特に既存のフォーム、ナビゲーション、状態のフィードバックを確認します。
Oil UIが対応しているコーディングエージェントは何ですか？
オープンソース版とProのどちらも、Claude Code、OpenAI Codex、Cursor、Windsurf、Antigravity、Gemini CLIで使えます。無料のオープンソース版は npx skills add oil-oil/oil-ui で、Proは npx github:oil-oil/oil-cli install oil-ui-pro でインストールしてください。DeepSeek Harnessの場合は、dsh plugin --profile web add github:oil-oil/dsh-oil-ui でネイティブプラグインのdsh-oil-uiをインストールしてください。
AIが作るページの「テンプレートらしさ」を避けるにはどうすればよいですか？
まず実際のプロダクトの位置づけや価格帯、業務項目を渡し、モデルに根拠のない割合の指標を作らせないようにします。次に3つの異なる方向を並べた比較ページを作って主方向を選び、Oil UIの削減チェックリストで余分なピル型ラベル、左側のカラーバー、何重にも入れ子になったカードを取り除きます。最後に実際のブラウザーのスクリーンショットを使ってブラインドレビューを行います。
Proをすでにインストールしている場合も、オープンソース版が必要ですか？
必要ありません。Proにはオープンソース版のデザイン手法が含まれています。両方をインストールすると同じ種類のリクエストに両方が反応し、競合する可能性があるため、Proがある場合はProだけを使ってください。
Proの購入、インストール、アップデート方法を教えてください。
現在の価格は $9.99 で、一度の購入で生涯アップデートを受けられます。Webで購入後はアカウントからインストールまたはダウンロードできます。上記のCLIコマンドを使い、エージェントに認証とインストールを手伝ってもらうことも可能です。最新の価格と支払い方法はProページで確認してください。