水光
と器
01
暮れの水面
夕暮れと池の水を画面いっぱいに。器は暗部に置き、セリフ体の大きな文字は静かな一角に留めます。
ギャラリーに戻る
AIのデザイン力を、余すところなく引き出す。
どれも同じ既定のテンプレートから抜け出し、方向の選択、定型表現の削減、実画面でのブラインドレビューを通して、本当にデザインされたUIを作ります。
Oil UIAI のための UI デザイン Skill
個性のあるインターフェースを。
Oil UI（オープンソース版）· 無料GitHub
npx skills add oil-oil/oil-uiOil UI Pro
$9.99 · 買い切り
無料版に加え、使いやすさの設計、既存プロジェクトへの対応、より厳密なレビューを提供。
次のコマンドを実行して Oil UI Pro をインストールしてください：npx github:oil-oil/oil-cli install oil-ui-proAgent に送ると、支払いとインストールを案内します。
Pro の追加機能を見る01
異なるスタイルの案を作り、比較ページに並べて選ぶ
構図、タイポグラフィ、配色、メインビジュアルが異なる3つの方向を比較ページに並べます。デスクトップとモバイルを切り替え、一つを拡大して確認し、選んだ案をエージェントに実装させます。
Oil UIPRO青崖美術館 · 水光と器来館者が「水光と器」秋季特別展の会期、展示室、器の見どころを知り、来館を予約できるようにします。
水光
晨光ジャーナル
光は水面に、
器にも落ちる。
日常の器と自然光をめぐる展覧会。
02
晨光ジャーナル
展覧会図録を開くように、新聞のグリッドで朝の光、器、来館案内を整理します。
窓に霧。
半日の光。
03
霧の窓
油彩画を一枚の窓に収め、水霧と青磁、紙の余白をゆっくり広げます。
02
AIの既定テンプレートを排し、画面をすっきりさせる
モデルがUIを書くと、光るピル型ラベル、片側の太いアクセントライン、何重にも入れ子になったカード、根拠のない指標をつい加えがちです。Skillは証拠となる画面を取得する際にこうした定型表現を自動で検出し、決まり文句と余分な枠を取り除いて、コンテンツと主な操作が伝わるようにします。
水辺で器を。
二日間の手仕事。
土を練り、ろくろで形を作り、カップの口縁を整えます。水辺の木の作業台で、日常使いの器を一つ作る静かな 2 日間です。
- 日時
- 11月14–15日 · 14:00–18:00
- 残席
- 残り 2 席 · 粘土、釉薬、焼成費を含む
- 場所
- 水辺のアトリエ · 庭の作業台 02
変更前 / 5 つの定型表現
01 小見出しのピル✨ ものづくりの旅を始めよう
インスピレーションを形にし、職人の創造力を解き放つ
02 片側の太い罫線
没入型の陶芸体験で無限の可能性を探り、芸術の可能性と創造力を解放します。
03 三重に入れ子のカード
職人の技から生まれた標準カリキュラム
専門講師の指導 · 厳選した輸入材料 · ワンストップサービス
04 同じ大きさの捏造指標
10,000+累計受講者
100+厳選コース
50+認定講師
99.9%満足度
05 埋もれた主操作会員になって特典を受け取る
↔
03
独立したサブエージェントが実画面を見て何度も改善
コードを書き終えてからが本番です。メインエージェントはブラウザーで実画面、200%の部分拡大、文字を隠したブロック構造図をキャプチャし、制作過程を知らない独立したサブエージェントに渡してブラインド採点を依頼します。問題リストを一つずつ修正・再確認し、9/10以上を目指して磨き込みます。
著者原稿料精算書
未精算総額¥8,640.00
2 件は資料完備 · 1 件は銀行情報が未登録| 著者と原稿 | 税引後原稿料 (¥) | 状態 |
|---|---|---|
| リン・ヤオ水辺を歩く · 長文 | 3,200.00 | 精算可能 |
| チェン・ジョウ器のもう一つの表情 · 写真 | 2,880.00 | 精算可能 |
| シュー・ナン庭園スケッチ · イラスト | 2,560.00 | 銀行情報が必要 |
資料が未登録の原稿は自動的に次号へ繰り越し
04
既存プロジェクトを改修し、必要な深さで使いにくいフローを直す
既存プロジェクトでは、見た目の改善が必要なのか、フローの変更が必要なのかをまず切り分けます。エージェント自身が実際のタスクを行い、クリック数やページ遷移数を数えてから、「整理」「アップグレード」「フロー再設計」の異なる改修案を提示し、共通変数と元になるコンポーネントから直します。
- タスク完了までのクリック数
- 2ステップ
- ページ遷移の回数
- 0回
- 走査で戻り操作が必要になるリスク
- 低 · 同じ画面でプレビュー、一括処理と取り消し
先週の未返信キュー (3)
10月6日
10月8日
10月9日
通信コンテキストのプレビュー
チョウ・ユ · 小満書店
秋のブックフェア案内と会員カード
- 前回の送信
- 10月6日 · 初稿を送信済み
- 現在の状態
- 顧客からの返信待ち
「秋のブックフェア案内と会員カードの初稿をお送りしました。ご都合のよいときにご確認ください。今週中に確定いただければ、予定どおり次の段階へ進めます。」
そのままエージェントに送れるプロンプト
長いプロンプトは必要ありません。やりたいことを一文で伝えれば、あとはSkillが進めます。
oil-uiを使って、青崖美術館の秋季特別展の予約ページを作ってください。
Skillが最初に異なる3つの方向を比較ページに並べ、選んだ案をもとに実装を進めます。
オープンソース版とProの違い
| デザイン工程と機能 | Oil UI オープンソース版無料 · MIT | Oil UI Pro$9.99 · 買い切り |
|---|---|---|
| 方向の探索、スタイル比較ページ、スクロールストーリーテリング | すべて搭載（カテゴリーの把握、トーンの設定、方向の差別化、比較ページ、画像とモーション、パララックス／連続ショット） | すべて搭載。さらに説得型ページの多角的なコンセプト検討と、ページ全体を貫く統一ビジュアルに対応 |
| 実画面のキャプチャと独立サブエージェントによるブラインドレビュー | デスクトップ／モバイルの実画面キャプチャ、スクリーンショット再現の差分比較、採点と問題リストの作成 | 9/10を目標にブラインドレビューと個別の再確認を反復（最大3ラウンド）。方向の重複をチェックし、実際のタスクをページ上で最後まで行う |
| AIの定型表現の削減と細部の磨き込み | 一般的なAIの既定表現の自動検出、可読性の基準チェック、納品前の要素削減 | AIの定型デザインを網羅したセルフチェック、100%／200%の詳細チェックリスト、一文ずつの簡潔化 |
| 使いやすさ：インタラクション状態、フォーム、マルチデバイス対応 | 注意すべき点を提示 | 完全なインタラクションと状態、フォーム検証とエラーからの復帰、ダイアログとポップオーバーの選択、デスクトップとモバイルへのレイアウト対応 |
| 管理画面とツール：ワークスペースのレイアウトとページ全体の一貫性 | — | プロダクトが扱う対象に合わせてワークスペースの骨格を選択（キュー、テーブル、キャンバスなど10種類）。ファーストビューからページ末尾までスタイルを統一 |
| 既存プロジェクト：UI改善、フロー修正、新機能追加 | どの種類の変更が必要かを切り分け | 単一ページのスクリーンショットへの注釈付き診断、整理／アップグレード／再設計の3段階の改修とDESIGN.mdへの仕様の蓄積、タスクのステップ数を数えるレビューとフロー再設計 |
| 単一コンポーネントの磨き込み、19種類のカードライブラリとエフェクト | ミニゲームの基本的な演出テンポ、操作感、リアルタイム3D素材 | 単一コンポーネントの徹底的な磨き込み、コード付き19種類のカードプロトタイプと空間的に展開するコンテナ、光の軌跡／ドットパターン／流れるグラデーション、ミニゲームの完全なレイアウトと状態チェック |
今あるタスクで一度試してみてください。
どちらを選ぶか迷ったら、まず無料のオープンソース版を実際のページで試してください。Proをすでに持っている場合は、すべての内容が含まれているので両方をインストールする必要はありません。
Oil UI オープンソース版
MITライセンスの無料オープンソース。ターミナルで1行のコマンドを実行するだけで、追加設定なしにインストールできます。
npx skills add oil-oil/oil-uiOil UI Pro
$9.99 · 買い切り・生涯アップデートクレジットカード、Alipay、WeChatで支払えます。次のプロンプトをエージェントに送ると、ログイン、支払い、インストールを案内します。
Oil UI Proをインストールしてください：npx github:oil-oil/oil-cli install oil-ui-pro を実行