Cursor、Windsurf、主要なコーディングエージェントでOil UIを使ったUIデザイン
日常の開発では、Cursor、Windsurf、Antigravity、Gemini CLIで業務コードとUIを並行して変更するチームが少なくありません。Oil UIは標準的でオープンなSkillディレクトリ構造を採用しており、npx skills add oil-oil/oil-ui で主要なコーディングエージェントに導入できます。実際のコードベースの中で、「タスクと方向を確認 → コンポーネントと状態を実装 → ブラウザーのスクリーンショットを確認」という順序で作業できます。
重要なポイント
- 1つのコマンドで主要なエージェントに対応します。npx skills add oil-oil/oil-ui で、Cursor、Windsurf、Claude Code、Codexなどにインストールできます。
- 既存プロジェクトでIDEエージェントを使ってUIを変更するときは、単一ページまたは単一タスクに範囲を絞り、変更してはいけないAPI項目と業務上の動作を先に宣言します。
- アップローダー、チェックアウト、メカニカルキーボードのコンフィギュレーターなど、独立したコンポーネントやモジュールでは、初期、操作中、完了、異常の4状態を最初から要求します。
- IDE内蔵のターミナルでローカル開発サーバーを起動し、コードのdiffだけでなく、実際にレンダリングした画面をエージェントにキャプチャさせて確認します。
npx skills add oil-oil/oil-uiリポジトリにコミットしてチームで共有するプロジェクト単位のインストールと、個人のグローバルインストールの両方に対応しています。
複数のエージェントへのインストール方法とディレクトリの選び方
IDEのサイドバーでCursor AgentやWindsurf Cascadeを使う場合も、ターミナルでCLIエージェントを使う場合も、Oil UIが読み込む構造化されたデザインガイドとチェックリストは同じです。
共通のインストールコマンドを実行
プロジェクトのルートまたは任意のターミナルでインストーラーを実行し、画面の案内に沿って使用中のエージェント（Cursor、Windsurf、Claude Code、Codexなど）を選択します。
npx skills add oil-oil/oil-uiチーム開発ではプロジェクト単位のインストールがおすすめ
チームの全員がそれぞれのIDEでプロジェクトを開いたときに同じUIレビュー基準を使えるようにするには、インストール範囲で現在のプロジェクトを選び、全員のエージェントが同じ規約を読むようにします。
会話の冒頭でSkillを明示的に呼び出す
IDEの入力欄に「Oil UIを使ってデザイン……」または「Oil UIで現在のページを改修……」と入力すると、エージェントは場当たり的にスタイルを追加するのではなく、デザインワークフローに沿って進めます。
IDEで業務コードとUIを並行して扱うための4つの習慣
IDEでUIを作る際によくある失敗は、「バックエンドの項目を追加する」と「ページ全体の見た目を作り直す」を同じ会話に混ぜることです。状態ロジックを壊した上に、スタイルまで中途半端になりかねません。タスクの境界をはっきりさせるだけで、成果の質をかなり高められます。
- 一度に一つの完結したタスクまたは独立モジュールを変更する
- 例えば、ギャラリーの「Chute」のようなファイルアップロードモジュールに絞り、ドラッグして入れたときの反応、分割アップロードの進捗、リンクのコピー、有効期限の設定を作り込んでから、次のモジュールへ進みます。
- 維持すべきprops、ルート、状態項目を明確に列挙する
- 既存のReact / Vueコンポーネントを改修する場合は、「既存のuseCheckoutフック、フォーム送信関数、ルートパラメーターを維持し、ビュー層とインタラクションのフィードバックだけを再構成してください」とエージェントに伝えます。
- 方向比較ページは一時的なルートまたは独立HTMLに置く
- 新しいビジュアル方向を探る場合は、独立したプレビューページに3方向を並べさせます。方向を選んでから、採用した案の変数と構造をメインプロジェクトに統合します。
- ローカルポートを開いてスクリーンショットで検証させる
- IDEのコード変更を見ただけで一括承認しないようにします。エージェントにlocalhostへ接続させ、1440pxと390pxの実画面をキャプチャして、要素が潰れたり変形したりしていないかを確認してからマージします。
IDEでよく使う2種類のプロンプトテンプレート
CursorやWindsurfで特に多いのが、「完成度の高いインタラクティブモジュールを新規作成する」と「既存の粗いページを整える」という2つの要望です。次のプロンプトを直接利用できます。
Oil UIを使って、現在のプロジェクトにある[モジュール名（例：ファイル共有アップロードモジュール／オンライン設定パネル）]をデザインして実装してください。
- 維持する制約：既存の[コンポーネントフレームワークとインターフェース定義]を使い、バックエンドAPIのデータ構造は変更しないでください。
- インタラクションと状態：1) 操作前の初期状態、2) ドラッグまたは入力中のリアルタイムフィードバック、3) 処理の進捗と完了状態（コピー／エクスポートのフィードバックを含む）、4) 検証失敗または上限超過のエラー状態を完全に実装してください。
- ビジュアルの条件：余分な外側の入れ子カードと装飾的な小さなピル型ラベルを取り除き、文字サイズの対比、余白、明確なフォーカス状態で画面を構成してください。完了後はローカルブラウザーでスクリーンショットを確認してください。IDEで対象のコンポーネントファイルを選択してからエージェントに送ると便利です。
実際に動くギャラリー作品とプロンプト
1440pxまたは390pxのライブデモを開き、モデルとプロンプトが最終的なUIにどう表れたかを確認できます。
Fieldwork Type
独立系タイプファウンドリー
独立系タイプファウンドリーのWebサイト（1440×900を基準とし、幅390までレスポンシブ対応）。ファーストビューではフラッグシップ書体を主役にし、訪問者が任意のテキストを入力して、サイズ、ウェイト、字幅を調整できるようにする。その後には、ファミリーのウェイト表、文字セット、使用例と、用途（デスクトップ、Web、アプリ）別に選んでカートに追加できるライセンスを配置する。 タイプテスターとライセンス選択がこの作品の中核。入力に応じて組見本が変わり、オプションを選ぶたびにライセンス価格が更新されるようにする。ファーストビュー、テスターパネルを展開した状態、ライセンス選択をデザインする。
作品とプロンプトを見る →
Sonar
チームメッセージング
30～300人規模の企業向けデスクトップメッセージングアプリ（1440×900）。左側にチャンネル、グループ、ダイレクトメッセージ、中央に進行中の会話を表示する。メッセージにはテキスト、画像、ファイル、コードスニペット、投票、絵文字リアクションを含める。中国語のインターフェースとする。 即時性がこの作品の中核。メッセージの送信、複数の同僚が同時に入力している状態、一つのメッセージからスレッドを開く操作、他の人の返信やリアクションがリアルタイムに現れる様子を、滑らかで手ごたえのあるものにする。メールクライアントやタスクボードに変えてはいけない。 活発なチャンネルでの日常会話、一つのメッセージから開いたスレッド、入力欄で同僚にメンションしファイルをドロップして送信準備ができた状態の3状態をデザインする。
作品とプロンプトを見る →
KEEB · キーオーダー
メカニカルキーボードコンフィギュレーター
メカニカルキーボードブランドのウェブサイト。ユーザーがケース、スイッチ、キーキャップを選び、自分だけのキーボードをオンラインでカスタマイズできるようにする。コンフィギュレーターページを構築する。
作品とプロンプトを見る →
Chute
ファイルアップロードモジュール
ファイル共有ツールのアップロードモジュール（デスクトップ1440×900、モジュールを中央に配置）。ファイルをドラッグして入れ、アップロード進行状況を表示し、完了後に有効期限とパスワード付きの共有リンクを生成する。 ファイルのドロップ、複数ファイルの同時進行、リンクをコピーした瞬間に、心地よいフィードバックを与える。 ファイルをドラッグしている状態、アップロード中、共有可能な完了状態の3状態を撮影する。
作品とプロンプトを見る →IDEでOil UI Proの3段階の既存プロジェクト改修とコンポーネントの磨き込みを使う
Oil UI Proは既存コードベース向けに、「単一ページの注釈付き診断」と「3段階の改修フロー」（視覚的なノイズの整理／レイアウトと状態のアップグレード／タスクフローの再設計とDESIGN.mdへの集約）を提供します。単一コンポーネントの磨き込みと19種類のカードコンテナプロトタイプも含まれます。
npx github:oil-oil/oil-cli install oil-ui-proよくある質問
CursorやWindsurfでOil UIを使う場合、どの基盤モデルを選ぶとよいですか？
新しいページの方向を探り、レイアウトの基調を決めるときは、Claude Opusや最新世代のGPT / Codexモデルがおすすめです。方向が決まり、フォーム状態をまとめて補完したり、DESIGN.mdに沿って隣接ページを統一したりするときは、Claude Sonnetや高速モデルでも効率よく進められます。
shadcn/ui、Radix、Ant Designを使ったプロジェクトでもOil UIを使えますか？
もちろんです。Radixのようなヘッドレスコンポーネントや基本コンポーネント集は、基盤となるアクセシビリティと基本コントロールを担いますが、モデルがページをありきたりなカードグリッドにするのは防げません。Oil UIはページのレイアウト、情報の優先順位、余分な罫線の削減を担当するので、両者は補完関係にあります。
IDEエージェントがスタイル変更時に既存のクリックイベントやフォーム検証を削除するのを防ぐには？
プロンプトに「既存のイベントバインディングと検証ロジックは変更しない」と明記してください。変更後はOil UIのレビュー手順に沿い、ブラウザーで中心タスクを実際にクリック・入力して最後まで行います。故意に誤った入力をして、エラーが正しく表示されるかも確認します。
同じリポジトリでCursorとターミナルのClaude Code / Codexを併用できますか？
はい。インストール時によく使う複数のエージェントを選択するか、共通のレビュー手順とDESIGN.mdを用意すれば、異なるツールでも前のラウンドの進捗を引き継いで改善を続けられます。