DeepSeek Harnessネイティブプラグイン（dsh-oil-ui）の導入とUIデザイン実践
DeepSeek Harnessでフロントエンドや独立したページを作っているなら、専用のネイティブプラグインdsh-oil-uiを直接インストールできます。プラグインにはOil UIオープンソース版が内蔵され、ローカルにOil UI Proがインストールされているかも自動で認識します。ギャラリーには、DeepSeek 4.1 Flashが同じタスクブリーフで制作した作品も複数収録されているため、モデルによる実装の違いを具体的に比較できます。
重要なポイント
- ターミナルで dsh plugin --profile web add github:oil-oil/dsh-oil-ui を実行すると、DeepSeek Harnessにネイティブプラグインを導入できます。
- dsh-oil-uiには無料のデザインワークフローが内蔵されています。ローカルにOil UI Proをインストールすると、プラグインが自動で認識し、Proの全機能へ切り替わります。
- ギャラリーでは、同じタスクブリーフを使ったDeepSeek 4.1 FlashとGPTモデルの作品（Vesper、Atelier Volders、Fonderie Mercier、Sonarなど）をページごとに対比できます。
- 軽量・高速モデルを使う場合は、タスクを明確なレイアウト構造と必須状態に分けることで、初回生成の安定性を高めやすくなります。
dsh plugin --profile web add github:oil-oil/dsh-oil-uiプラグインのリポジトリ：https://github.com/oil-oil/dsh-oil-ui（無料版を内蔵し、ローカルにインストール済みのOil UI Proを自動認識）。
dsh-oil-uiのインストールとOil UI Proの自動認識
DeepSeek Harnessには、profileを基盤としたプラグインの仕組みがあります。開発者がプロンプトファイルやパスの設定を手作業でコピーしなくて済むよう、Oil UIはネイティブプラグインdsh-oil-uiとしてパッケージ化されています。web profileに追加するだけで使えます。
dsh-oil-uiプラグインをweb profileに追加
ターミナルで次のコマンドを実行すると、DeepSeek Harnessがプラグインを取得し、オープンソース版のデザインワークフローを有効にします。
dsh plugin --profile web add github:oil-oil/dsh-oil-ui（任意）ローカルにOil UI Proをインストールし、プラグインに自動認識させる
購入後にoil-cliでOil UI Proをローカルへインストールすると、dsh-oil-uiの起動時にローカルのProファイルが自動検出され、プラグイン設定を変えずにProのワークフローを直接使えます。
npx github:oil-oil/oil-cli install oil-ui-pro具体的なタスクでデザインを始める
DeepSeek Harnessにプロダクトの背景、対象ビューポート（1440×900や390×844など）、検証すべき3つの重要な状態を伝え、「方向比較 → 選択した案の詳細化 → スクリーンショットレビュー」の順で進めます。
同じブリーフでの比較：DeepSeek 4.1 Flashが実際のタスクで作った作品
高速で低コストなモデル（DeepSeek 4.1 Flashなど）とOil UIを組み合わせると、どの水準のUIを作れるのか。最上位の大規模モデルとの違いはどこにあるのか。多くのチームが関心を持つ実際的な問いです。
検証できる形で答えを示すため、ギャラリーでは完全に同じタスクブリーフ（TASK.md）を使い、DeepSeek 4.1 FlashとGPT 6.1 Solで複数の作品を制作しています。次の4組は、オンラインデモとプロンプトを直接開いて比較できます。
| プロダクトとタスクブリーフ | DeepSeek 4.1 Flashの作品 | 同じブリーフのGPT作品 | ライブページでの比較ポイント |
|---|---|---|---|
| Atelier Volders（ベルギーのオーク材三脚スツール工房のサイト） | Atelier Volders · The Wedged Oak (volders-wedge) | Grain & Tenon (volders-grain) / River Timber (volders-hearth) | 3種類の高さと3種類のオイル仕上げを即時切り替える構成、実写写真なしの素材表現、バッチ予約を比較 |
| Fonderie Mercier（家族経営の青銅鋳鐘工房のサイト） | Fonderie Mercier · The Tuning Sheet (mercier-bell) | Bronze, with a Voice (mercier-voice) / Eighteen Bells (mercier-pour) | 異なる鐘の直径の基音と倍音の減衰曲線を試聴し、音高と銘文から制作枠を申し込む流れを比較 |
| Vesper（API使用量の請求・請求書管理画面） | Vesper · Settlement Ledger (vesper-ledger) | Vesper (vesper, GPT 6.1 Sol) | 1440×900の請求コンソールで、しきい値フィルター、失敗した請求書の復旧タイムライン、コマンドパレットを比較 |
| Sonar（30～300人のチーム向けメッセージング） | Sonar · Signal Room (sonar-desk) | Sonar (chat2, GPT 6.1 Sol) | 同じ3状態のデスクトップIM（活発なチャンネル、スレッド展開、@メンションとファイルをドラッグした送信待ち）における明暗の方向性を比較 |
DeepSeek 4.1 Flashなどの高速モデルへのプロンプトのコツ
Skillはモデルが明確なデザインの秩序を作り、AIの典型的な定型表現を避けるのを助けますが、最終的な上限はモデル自身の能力にも左右されます。高速モデルでUIを作る場合は、次の3点を意識すると結果を安定させやすくなります。
- 業務ルールをプロンプトに書き、モデルに推測させない
- 「Atelier Volders」のブリーフのように、「高さ32cmの低いスツールは€240、45cmのダイニングスツールは€270、62cmのカウンタースツールは€310、月産24脚のみ」と具体的に書きます。明確な数字とルールが、レイアウトに実際の骨格を与えます。
- 一度に一つの主インタラクションへ絞る
- 各ページや状態で主役を一つに決めます。鋳鐘工房の倍音スペクトル試聴や、年間音楽レポートのドット年鑑などが例です。一つの画面に関連の薄いアニメーションを5つも6つも詰め込まないようにします。
- 実際のスクリーンショットのレビューを最後まで行う
- 高速モデルは、長いリストや狭いビューポートではみ出し処理を見落とすことがあります。実際のブラウザーで1440pxと390pxの画面を撮って修正すれば、完成度をさらに高められます。
Oil UIを使って、[ブランド名（例：家族経営の手仕事の工房）]の公式サイトをデザインして実装してください（デスクトップ1440×900、幅390pxまでレスポンシブ対応）。
- プロダクトと主要パラメーター：一つの中心的な製品に絞り、[3種類のサイズとそれぞれの価格]と[3種類の素材／表面仕上げ]を用意します。訪問者がファーストビューまたはカスタマイズ領域で切り替えると、パラメーターと価格が即時に変わるようにしてください。
- 必須セクション：製品のリアルタイムカスタマイズと音声／素材のフィードバック、制作工程のタイムライン、バッチ刻印の説明、現在のバッチの予約フォーム。
- 成果物の条件：外部の実写写真に頼らず、レイアウト、タイポグラフィ、自作のグラフィックで質感を表現してください。カスタマイズの切り替えと予約状態を実装し、スクリーンショットで検証してください。dsh-oil-uiをインストールした後、DeepSeek Harnessに送ると完全なデザインワークフローを開始できます。
実際に動くギャラリー作品とプロンプト
1440pxまたは390pxのライブデモを開き、モデルとプロンプトが最終的なUIにどう表れたかを確認できます。
Atelier Volders · 楔留めのオーク
手作り家具工房のウェブサイト
ベルギー、ゲントの Korenlei 14 にある2人の木工工房 Atelier Volders のウェブサイト（1440×900を基準とし、幅390までレスポンシブ対応）。英語のインターフェースとする。工房が作るのは De Drievoet だけ。3年間自然乾燥させた木材から手作業で旋盤加工と楔留めをした三本脚の無垢オークスツールで、1ロット24脚を月に1回だけ生産する。 高さは3種類（32 cmの低い囲炉裏用スツール €240、45 cmのダイニング・デスク用スツール €270、トネリコのフットリング付き62 cmのカウンタースツール €310）、仕上げも3種類（石けん洗いの無垢オーク、燻蒸したダークオーク、煮沸亜麻仁油と蜜蝋）。訪問者は高さと仕上げをリアルタイムに切り替え、6週間の制作工程、裏面の焼き印によるロット刻印、土曜日の開放時間を見て、現在のロットからスツールを予約できる。製品写真は提供しない。
作品とプロンプトを見る →
Fonderie Mercier · 調律票
家族経営ブロンズ鋳鐘工房のウェブサイト
リヨンのソーヌ川沿い Quai Saint-Vincent 28 にある、三代続く家族経営の鋳鐘工房 Fonderie Mercier のウェブサイト（1440×900を基準とし、幅390までレスポンシブ対応）。英語のインターフェースとする。川砂を固めた鋳型と、銅78%・錫22%の鐘銅を使い、象徴的な一品 Le Bourdon de Table だけを鋳造する。旋盤で正確な音高に調律し、月に1回、18口の鐘からなる固定ロットを鋳造する。 サイズと音高は3種類（Ø 72 mmの卓上鐘 A4 440Hz €180、Ø 96 mmの中庭の鐘 F#4 370Hz €240、鍛鉄ブラケット付きØ 124 mmの壁掛け鐘 D4 293.7Hz €340）、パティーナも3種類（旋盤仕上げの無垢ブロンズ、スモークドブロンズ、緑青）。訪問者は各音高を聴き、サイズとパティーナを切り替え、5段階の鋳造工程、冷間刻印によるクラウン記録、金曜日の開放時間を見て、翌月の鋳造の予約票を用意できる。製品写真は提供しない。
作品とプロンプトを見る →
Vesper · 精算台帳
API使用量請求コンソール
AI・開発者ツールチーム向けに、API使用量の請求と顧客請求書のコンソールをデザインする。英語のインターフェースで、デスクトップのビューポートは1440×900とする。ユーザーはサブスクリプションプランとライブAPI使用量を管理し、現在の請求サイクルの未払い額と請求書の例外を確認し、ステータスや使用量のしきい値で顧客・請求書を絞り込み、レコードを開いて明細、支払いと Webhook のタイムライン、イベントペイロードを確認できる。支払いの再試行、クォータ調整、請求書のエクスポートを含める。 3つの主要状態を実装する：収益と使用量の傾向、顧客または請求書リスト、ライブフィルターを備えた日常のワークスペース。使用量の内訳、ステータスタイムライン、復旧アクションを備えた例外請求書の詳細ビュー。クイックコマンドパレット。オフラインで使える `index.html` を納品し、`shots/desktop.png`、`shots/state-1.png`、`shots/state-2.png` を1440×900、DPR=2で撮影する。
作品とプロンプトを見る →
Sonar · シグナルルーム
チームメッセージング
30～300人規模の企業向けデスクトップメッセージングアプリ（1440×900）。左側にチャンネル、グループ、ダイレクトメッセージ、中央に進行中の会話を表示する。メッセージにはテキスト、画像、ファイル、コードスニペット、投票、絵文字リアクションを含める。中国語のインターフェースとする。 即時性がこの作品の中核。メッセージの送信、複数の同僚が同時に入力している状態、一つのメッセージからスレッドを開く操作、他の人の返信やリアクションがリアルタイムに現れる様子を、滑らかで手ごたえのあるものにする。メールクライアントやタスクボードに変えてはいけない。 活発なチャンネルでの日常会話、一つのメッセージから開いたスレッド、入力欄で同僚にメンションしファイルをドロップして送信準備ができた状態の3状態をデザインする。
作品とプロンプトを見る →dsh-oil-uiとOil UI Proのシームレスな連携
dsh-oil-uiをすでに使っている場合、Oil UI Proへのアップグレードに必要なのは、ローカルで次のインストールコマンドを実行して認証を済ませることだけです。dsh-oil-uiがローカルのProを自動認識し、既存プロジェクト改修、10種類のワークスペースの骨格、複数ラウンドのブラインドレビューをすぐに有効にします。
npx github:oil-oil/oil-cli install oil-ui-proよくある質問
dsh-oil-uiとnpx skills add oil-oil/oil-uiの違いは何ですか？
dsh-oil-uiはDeepSeek Harness専用にパッケージ化されたネイティブプラグインで、dsh plugin --profile web add でインストールします。無料版を内蔵し、ローカルのOil UI Proを自動認識します。Claude Code、Codex、Cursor、Windsurfを使う場合は、npx skills add oil-oil/oil-ui を利用してください。
DeepSeek 4.1 FlashはどんなUIに向いていますか？
ギャラリーの事例では、構造が明確なブランドサイト（The Wedged Oak、The Tuning Sheet、Archon · The Open Kernelなど）、ルールが明確な請求・メッセージワークスペース（Vesper · Settlement Ledger、Sonar · Signal Room）、カード形式の年間レポート（Tempo · A Year in Dots）で、すっきりした使える作品を作れています。
Oil UI Proをインストールしたら、dsh-oil-uiをアンインストールする必要がありますか？
必要ありません。DeepSeek Harnessではdsh-oil-uiを有効にしたまま使えます。ローカルにインストールされたOil UI Proを自動検出し、Proを優先して読み込みます。
ギャラリーのDeepSeek作品に使われた元のプロンプトを見られますか？
はい。上記のDeepSeek作品のカードを開いて詳細へ進み、プロンプト表示を切り替えると、その作品の制作に使った完全なタスクブリーフとモデル情報を確認できます。