oil-oil/oil-ui

解決する課題

Oil UIは、AI生成によるユーザーインターフェースデザインの限界を押し広げるための構造化されたデザイン手法とツールセット（Agent Skillとして提供）を提供します。カテゴリー分析、トーン設定、視覚的な差別化という厳格なプロセスを強制することで、AIが生成するレイアウトが汎用的、単調、または反復的になる問題を解決し、高品質でプロフェッショナルなUIデザインを作成します。

仕組み

このプロジェクトは、AI Agentにインストール可能な「Skill」として実装されています。Agentを以下の8つのデザインステップに導きます：

1. カテゴリー分析 (Category Analysis)：競合他社を分析し、何を採用し、何を変更するかを決定します。
2. トーン設定 (Tone Setting)：「プレミアム」といった抽象的な用語を、タイポグラフィ、余白、色に関する具体的な決定事項に変換します。
3. 具体的な出発点 (Concrete Starting Points)：曖昧な形容詞ではなく、特定の素材、環境、キャラクターを使用します。
4. ファーストスクリーン戦略 (First-Screen Strategy)：ページが閲覧用、作業用、説得用のいずれであるかに基づいて、初期ビューを調整します。
5. 差別化チェック (Differentiation Check)：スケルトン、フォント、色、ビジュアルを比較し、多様な方向性を確保します。
6. 記憶に残る瞬間 (Memorable Moments)：インパクトの強い1〜2つのインタラクションやページに注力します。
7. ユーザー選択 (User Selection)：比較ページで複数のオプションを提示し、ユーザーが選択できるようにします。
8. 最終調整 (Final Refinement)：冗長な要素を取り除く「引き算」のフェーズを実行します。

対象ユーザー

AI Agentを使用してWebサイト、アプリ、デジタル製品を構築し、すべてのデザイン作業を手動で行うことなくプロフェッショナルなUI/UXの結果を求めるユーザー向けに設計されています。

ハイライト

• Agent統合: npx skills add でインストールし、AI Agentのデザイン能力を強化します。
• スタイル比較ページ: 異なるデザイン方向のプレビュー（HTMLまたは画像）を並べて生成し、簡単に選択できます。
• マルチデバイスプレビュー: デスクトップとモバイルのビューを切り替えて、実際のレイアウトサイズを確認できます。
• 包括的なデザインロジック: スクリーンショットの復元から、ブランドに合わせた調整、独立したレビューサイクルまで、すべてをカバーします。