oil-uiスキルで、本当に違うデザイン案を並べて比べ、選んだ1案を実画面のスクショで仕上げる

どんな問題を解決するか / いつ使うか

「3案出して」と頼んでも、色違いの同じテンプレートが3つ出てくることが多い。oil-uiは案どうしの違いを条件で強制し、比較ページで選ぶ→フィードバック→実画面で確認、までを手順化している。新しいLP・アプリ画面・ダッシュボードの方向性を決める最初の段階に向く。

やり方

1. 導入：npx skills add oil-oil/oil-ui（設定不要）。
2. 頼み方の例：
   • 「oil-uiで、この予約サービスのデザインの方向性をいくつか出して、プレビューできるページにして」
   • 「書体・配色・構図が違う3案を作り、比較ページに並べて選べるようにして」
   • 「このページを見直して、何をどう直すべきか説明して。ファイルは触らないで」
3. スキルの中で行われる判断（自分のプロンプトにも流用できる）：
   • まず製品カテゴリと、スタイルが際立つ同業2〜3社を挙げ、何を残し何を変えるか決める。
   • 「上質」「すっきり」などの言葉を、書体・余白の量・色を使う面積といった目に見える選択に置き換える。
   • 各案は形容詞ではなく、素材・場面・キャラクター・別分野の視覚言語など具体的なものから始める。
   • 閲覧・購入・作業のページは最初の画面をコンテンツそのものにし、説得するページだけ作り込んだファーストビューにする。
   • 4要素（レイアウト・書体・配色・主役の画像）のうち、2案が共有してよいのは1つまで。並べて目を細め、明暗の形が似ていたら色ではなくレイアウトを変える。
   • 1〜2か所だけ記憶に残る瞬間（タップの反応、決済完了、404など）を作り、他は静かにする。
   • 完成したらデスクトップとモバイルの幅で開いてスクショを確認し、最後に「1ページ1焦点」で不要な文・線・枠を引き算する。
4. 比較ページではHTML・画像・起動中の開発ページを並べられ、現行版を基準として先頭に置ける。デスクトップ／モバイル切り替え、矢印キーで閲覧。「Select」を押すとコピーされる文をエージェントに貼れば続きを進める。

注意点

• 比較ページの生成にはPython 3.10以上、スクショ確認には画像を読めるエージェントが必要。
• 使うたびに新しい版を確認する（最大10分に1回、公開の版リストを読むだけ）。止めるなら OIL_NO_UPDATE_CHECK=1。
• 既存プロジェクトの改修や使い勝手（フォーム・状態）の作り込みは有料版（Oil UI Pro）の範囲。両方入れると取り合いになる。
• 考え方は 「いい感じに」しか言えないときは、AIに同じ内容で見た目違いの小さな見本を3案出させ、好き・苦手を返して決める と同じ。違いを強制する条件を足したい時にこのスキルの手順が使える。

出典

• 投稿者: @MisterSnowCrash、@LLMpsycho
• 投稿: @MisterSnowCrash · 2026-10-18 ／ @LLMpsycho · 2026-10-18
• リポジトリ: github.com/oil-oil/oil-ui（READMEで内容を確認、MITライセンス）
• 収集日: 2026-10-19（JST）