oil-oil/oil-ui

これは何？

主な機能

• 01同じ製品に対して、見た目の異なる複数のデザイン案を検討できます。
• 02デスクトップ表示とモバイル表示を備えた比較ページに、デザイン案を並べて表示します。
• 03フィードバックをもとに、選んだデザイン案をブラッシュアップします。
• 04完成したページを、デスクトップとモバイルのスクリーンショットで確認します。
• 05モバイルレイアウトを含め、スクリーンショットからページを再現できます。

ユースケース

• 新しいWebサイトやアプリのデザインを決める前に、複数の方向性を検討する。
• AIコーディングエージェントを使って、ランディングページやダッシュボードを再デザインする。
• モバイルレイアウトを追加しながら、スクリーンショットをもとに既存ページを再現する。

クイックスタート

1. 1

   スキルをインストールする

   npx skills add oil-oil/oil-ui
2. 2

   エージェントに、プロダクトのデザインの方向性を検討するよう依頼する

使う前に知っておきたいこと

• !オープンソース版には、ユーザビリティチェック、ダッシュボードのレイアウト、エフェクトなどのPro機能は含まれていません。
• !バージョンチェックの実行にはPython 3が必要で、OIL_NO_UPDATE_CHECK=1で無効にしない限り、オンラインで公開されているバージョン一覧を読み込みます。

トピック

よくある質問

oil-ui とは？

AIエージェント向けのUIデザインスキル。複数の方向性を比較し、実際のスクリーンショットをもとにブラッシュアップします。 Oil UIは、Claude CodeやCodexなどのエージェント向けオープンソーススキルです。Webサイト、アプリ、ダッシュボード、コンポーネントのデザインを依頼されると、まず製品カテゴリを特定して類似製品を調査し、デザインのトーンを定めたうえで、タイポグラフィ、余白、色の具体的な選択に落とし込みます。

oil-ui は無料で使えますか？ライセンスは？

oil-ui は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

oil-ui は今もメンテナンスされていますか？

活発にメンテナンス中。oil-ui の最終コミットは 2026年10月18日 です。

oil-ui は何に使えますか？

新しいWebサイトやアプリのデザインを決める前に、複数の方向性を検討する。 AIコーディングエージェントを使って、ランディングページやダッシュボードを再デザインする。 モバイルレイアウトを追加しながら、スクリーンショットをもとに既存ページを再現する。

oil-ui のインストール方法は？

スキルをインストールする: npx skills add oil-oil/oil-ui エージェントに、プロダクトのデザインの方向性を検討するよう依頼する

oil-ui はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/oil-oil/oil-ui