DeepSeek Harness でデザインする。
DeepSeek Harness は、リポジトリを読み、実際の UI コードを編集し、コマンドを実行し、プロジェクトの指示を読み込んで、反復を重ねてもセッションを維持できるため、ランディングページ、製品インターフェース、ダッシュボード、フロントエンドプロトタイプを構築できます。一方、単体ではビジュアルのセンスまでは提供しません。実用的なデザイン作業には、ブランドルール、参考資料、ツール、権限、そして結果をレンダリングして確認するループが必要です。
インターフェース作業では、要件と受け入れ確認のループを明確にします。デフォルトの DeepSeek ルートはテキスト専用なので、最も信頼性の高い基本形はコードと仕様を中心としたワークフローです。スクリーンショットを添付するのは、画像入力対応を明示するモデルルートを選択した後にしてください。
それでもモデルにはビジュアル面の方向付けが必要です。最も簡単な方法は、DeepSeek Harness を Open Design に接続することです。Open Design がデザインシステム、フロントエンドスキル、成果物プレビュー、レビュー画面を提供し、dsh がコーディングを担います。このガイドでは、公式の [DeepSeek Harness 製品ページ](https://www.deepseek.com/harness/)と[ソースリポジトリ](https://github.com/deepseek-ai/deepseek-harness)から完成したインターフェースまで、そのワークフローを説明します。
DeepSeek Harness はデザインできますか？
DeepSeek Harness は、リポジトリを読み、実際の UI コードを編集し、コマンドを実行し、プロジェクトの指示を読み込んで、反復を重ねてもセッションを維持できるため、ランディングページ、製品インターフェース、ダッシュボード、フロントエンドプロトタイプを構築できます。一方、単体ではビジュアルのセンスまでは提供しません。実用的なデザイン作業には、ブランドルール、参考資料、ツール、権限、そして結果をレンダリングして確認するループが必要です。
- 永続的なデザインコンテキスト: デフォルトの指示ローダーは、プロジェクト階層から `AGENTS.md` と `CLAUDE.md` を読み込みます。トークン、コンポーネントルール、レスポンシブのブレークポイント、レビュー基準を、すべての実行から参照できる場所に置きます。
- 再利用可能なスキル: ローカルスキルは `.dsh/skills` または `.agents/skills` 配下に配置できます。フロントエンドスキルに、具体的な要件、チェックリスト、サンプル、スクリプトをまとめておけば、UI タスクを毎回ゼロから始めずに済みます。
- タスクに応じたプロバイダーの選択: Web UI では、DeepSeek、Anthropic や OpenAI などのカタログ掲載プロバイダー、カスタムの OpenAI 互換エンドポイントを設定できます。スクリーンショット入力には、画像対応を明示したルートを使用してください。テキスト、コード、DOM、仕様駆動の作業には、ネイティブの DeepSeek ルートを使用します。
重要な制約は、どのエージェントでも同じです。組み合わせやすさとセンスは同じではありません。タイポグラフィ、余白、コンポーネント、インタラクションに意図的な制約がなければ、ランタイムはありきたりな結果を忠実に自動生成します。Open Design の役割は、そうしたデザイン入力を提供し、整理することです。
ステップ 1：DeepSeek Harness をインストールして設定
まず、DeepSeek Harness が単体で動作することを確認します。テスト済みの dsh リリースをインストールし、ローカル Web UI を開いて API キーとモデルを設定してから Open Design を起動してください。開発者プレビューには Node.js `^22.19.0` または `>=24.0.0` が必要です。
# Open Design currently tests DeepSeek Harness 0.1.0-rc.6
# Requires Node.js ^22.19.0 or >=24.0.0
npm install -g @deepseek-ai/[email protected]
# Verify the local executable
dsh --version
# Start the local Web UI and configure a provider and model
dsh web
# Open http://127.0.0.1:3080- Harness Web UI を開く: `dsh web` を実行します。通常は `http://127.0.0.1:3080` が開きます。ブラウザーが開かない場合は、ターミナルに表示されたアドレスをコピーし、そのアドレスをそのまま使用してください。
- DeepSeek API キーを追加: プレビューに関する注意を確認して先に進み、求められたらキーを保存または適用します。入力画面が表示されない場合は、Settings → Models → DeepSeek → API Key を開いてください。貼り付けるのはキーだけです。`DEEPSEEK_API_KEY=...` や引用符は含めないでください。変更はすぐに反映されるため、`dsh web` を再起動する必要はありません。必要な場合は DeepSeek Platform でキーを作成できます。
- モデルを確認してセットアップ UI を閉じる: DeepSeek プロバイダーが設定済みと表示され、そのモデルがセレクターに表示されることを確認します。`MISSING_CREDENTIAL` が表示された場合は、DeepSeek カードを開き直してキーをもう一度保存してください。テストプロンプトが動作したら `Ctrl+C` を押します。Open Design の使用中に `dsh web` を起動したままにする必要はありません。
DeepSeek Harness は、プロバイダーの認証情報を書き込み専用のシークレットとして保存します。UI はキーが設定済みかどうかを示せますが、平文のキーを読み取ったり表示したりはできません。Open Design は、キーを Open Design にコピーせず、ユーザーがインストールした dsh とそのモデル設定を再利用します。安定したワークフローのため、dsh をテスト済みの `0.1.0-rc.6` リリースに固定してください。上流での認証情報の扱いについては、公式プロバイダーガイドを参照してください。
ステップ 2〜5：DeepSeek Harness を Open Design に接続
dsh がローカルで動作すれば、残りの作業は Open Design で行います。DeepSeek Harness 連携は Open Design 0.19.1 以降で利用できます。
- 2 · Open Design 0.19.1 以降をダウンロード: Open Design のダウンロードページから最新のデスクトップ版を入手し、インストールしてアプリを起動します。
- 3 · DeepSeek Harness を検出: Settings → Models & providers → Local CLI を開き、Rescan を選択します。インストール中にすでに開いていた場合は、Open Design を再起動するか、もう一度スキャンしてください。Open Design がステップ 1 の `dsh` 実行ファイルを検出すると、DeepSeek Harness カードが表示されます。
- 4 · Open Design プロファイルを接続: DeepSeek Harness カードを選択します。「Connection setup required」と表示されたら、「Install and select」を確認します。Open Design は独自コンポーネントを検証し、dsh に `open-design` プロファイルへのインストールを依頼して、再スキャン後に接続をテストします。
- 5 · デザインタスクを開始: カードに Harness のバージョンと「Synced from CLI」が表示されることを確認し、Test をクリックします。テストに合格したら、プロジェクトを開くか作成し、DeepSeek Harness と同期済みモデルを選んで、デザインの依頼を送信します。
これで接続は完了です。UI と `od agent setup deepseek-harness --json` は同じローカルセットアップパスを使用します。実行するたびに `dsh --profile open-design --stdio` が起動し、Harness は後のターンに備えてセッション ID を保持します。
Create a polished product landing page in this workspace.
Use DESIGN.md, AGENTS.md, and the installed frontend skill as the visual contract.
Reuse the project tokens and components; include desktop and mobile states.
Run the app, inspect the rendered result, fix visible spacing and hierarchy issues,
and leave the final HTML and assets in the project for Open Design to preview.
役割分担はシンプルです。Harness が dsh、認証情報、モデル、セッションを管理し、Open Design が検証済みの接続プロファイルとデザインワークスペースを管理します。Open Design は DeepSeek AI から独立しており、DeepSeek と DeepSeek Harness はそれぞれの所有者の商標です。
UI の構築とレビューループを実行
インターフェース作業では、要件と受け入れ確認のループを明確にします。デフォルトの DeepSeek ルートはテキスト専用なので、最も信頼性の高い基本形はコードと仕様を中心としたワークフローです。スクリーンショットを添付するのは、画像入力対応を明示するモデルルートを選択した後にしてください。
- リポジトリから dsh を起動し、そのディレクトリをワークスペースとして選び、このタスクで使用するモデルルートを選択します。
- ブランドの取り決めを `AGENTS.md`、`CLAUDE.md`、または参照先の `DESIGN.md` に記載します。トークン、プリミティブ、余白、書体、ブレークポイント、状態、禁止パターンを定義してください。
- `.dsh/skills` または `.agents/skills` から、目的を絞ったフロントエンドスキルを読み込みます。サンプルと検証スクリプトは、指示と同じ場所に置きます。
- エージェントに既存コンポーネントを再利用し、アプリケーションを実行し、プロジェクト固有のテストまたはブラウザツールでレスポンシブ状態を検証するよう依頼します。
- 表示された結果をレビューし、具体的な差分を記録して、小さなコミット単位で反復します。良くない結果に修正を重ねるのではなく、その変更を取り消してください。
効果的なプロンプトでは、ビジュアル上の制約と検証の根拠を両方明示します。
Implement the account dashboard in React + TypeScript.
Reuse the components and tokens named in AGENTS.md and DESIGN.md.
Use a 240px sidebar, a 12-column content grid, and the documented
mobile navigation pattern. Include loading, empty, error, and focus states.
Run the app and existing UI checks, inspect desktop and mobile breakpoints,
and report the exact files and states you verified.スクリーンショットが不可欠な場合は、まず画像対応のプロバイダーを設定してください。DeepSeek Harness は、選択したルートが画像対応を宣言していない場合、送信前に画像を拒否します。リファレンスを黙って破棄することを防ぐ、便利な仕組みです。
プラグインとスキルでワークフローを再利用可能にする
DeepSeek Harness の最大の特徴は、チャット画面の下層にあります。プラグインツリーにより、デザインワークフローを毎回セッションに貼り付けるプロンプトではなく、ランタイムの一部にできます。
- AGENTS.md と CLAUDE.md: 指示プラグインは、ユーザー全体に適用されるファイルとプロジェクト階層を読み込み、ファーストパーティのファイル操作後には関連するネストされた指示ファイルも検出します。単発の依頼ではなく、継続的なデザインルールに使用してください。
- ファイルシステムスキル: スキルレジストリは、プロジェクトとユーザーのルートを検出し、重複するスキルに優先順位を付け、モデルから利用できる `skill` ツールを公開します。フロントエンド制作、アクセシビリティ、レスポンシブ QA、デザインシステムの手順を置くのに適した場所です。
- プロファイルとバンドル: プロファイルは、順序付けされたプラグインバンドルとユーザーパッチを積み重ねます。チームは、実際に必要なプロバイダー、ツール、権限ポリシー、スキルソースを含む、デザインに特化した構成を維持できます。
- MCP と外部機能: ソースツリーには MCP クライアント機能が含まれていますが、ユーザー向けの設定は依然として開発者向けです。プレビュー期間中は、連携機能を安定したチェックボックス式のワークフローではなく、バージョン管理されたプラグイン作業として扱ってください。
長期運用する社内ワークフローを構築する前に、`dsh --profile web --dump-config` で実際に有効なツリーを確認してください。この出力から、何が実際にマウントされ、パッチ可能なのかを把握できます。リポジトリ内のすべてのパッケージが、同梱プロファイルで有効になっていると想定するより確実です。
ビジュアル出力を台無しにする失敗を避ける
大きな失敗は、プレビューを安定版製品のように扱うこと、テキスト専用ルートをビジョンモデルのように扱うこと、柔軟なハーネスにビジュアルセンスまで期待することから生じます。
- カスタマイズ前にバージョンを固定: 互換性を破る変更は、プレビューの方針として明示されています。npm のバージョンを固定し、アップグレード後にレビューできる範囲にプロファイルのパッチを抑えてください。
- 選択したモデルのモダリティを確認: ネイティブの DeepSeek chat-completions ルートはテキスト専用です。スクリーンショットからコードを生成する場合は、添付画像が理解されると決めつけず、画像対応のプロバイダールートを選択し、明示してください。
- センスをデータとして提供: エージェントにトークン、標準コンポーネント、状態のリファレンス、禁止パターンを与えてください。デザイン上の取り決めがなければ、モジュール式のランタイムでも生成される UI はありきたりなものになります。
- プロファイルが実際にマウントするものを検証: リポジトリ内のパッケージは利用可能な機能を示しますが、デフォルトプロファイルで有効になっている証拠ではありません。連携機能を文書化したり依存したりする前に、構成済みの設定を確認してください。
どの対策も、コンテキストと検証に関する判断です。まさにデザインレイヤーが、各プロジェクトに毎回再発見させるのではなく、再現可能にすべき作業です。
Harness がデザインにもたらすもの
DeepSeek Harness（`dsh`）は、DeepSeek AI が開発する MIT ライセンスのエージェントハーネスです。公式製品ページでプロジェクトが紹介され、GitHub リポジトリにはソース、リリース履歴、保守されているガイドが掲載されています。公開中の開発者プレビューには、ローカル Web UI とヘッドレスプロファイルが含まれます。
中核となる考え方は、「すべてがプラグイン」というものです。Cordis は、モデルアダプター、ツールレジストリ、エージェントループ、ファイルシステム、シェル、サンドボックス、スキル、サブエージェント、永続化、UI を、プロファイルやバンドルを通じてマウント、交換、パッチ適用できるツリーとして構成します。同梱の `web` および `headless` プロファイルは固定された製品ではなく、出発点です。
- ローカル Web UI: `npx @deepseek-ai/dsh web` を実行すると、デフォルトでは `127.0.0.1:3080` でブラウザワークスペースが起動します。モデルを追加し、ワークスペースを選択して、会話 UI からタスクを実行できます。
- ヘッドレスモード: `headless` プロファイルは、永続化される新規セッションを 1 つ実行し、最終回答を出力して終了します。スクリプト化した監査、ビルド、再現可能なデザインチェックに役立ちます。
- 組み合わせ可能なランタイム: プロファイルでは、プラグインバンドルと独自のパッチを積み重ねられます。そのためチームは、エージェントループをフォークせずに、プロバイダー、ツール、ポリシー、UI の動作を変更できます。
- 開発元：DeepSeek AI（公式プロジェクト）
- ステータス：開発者プレビュー。互換性を破る変更が予想されます
- ライセンス：MIT
- 主要コマンド：`npx @deepseek-ai/dsh web`
DeepSeek Harness、DeepSeek TUI、Open Design
DeepSeek Harness と DeepSeek TUI は、実行ファイルが異なる別々のプロジェクトです。Open Design は現在、どちらもローカルエージェントとしてサポートしています。したがって選択基準は、どちらがデザインワークスペースに入れるかではなく、どのランタイムを使いたいかです。
| ツール | 概要 | デザインに最適な用途 |
|---|---|---|
| DeepSeek Harness (`dsh`) | ローカル Web UI とヘッドレスプロファイルを備えた、DeepSeek AI 公式のプラグイン優先ハーネス。Open Design のファーストパーティアダプターに対応 | Open Design の成果物ワークフロー内で Harness のセッション、プロバイダー、プラグイン構成を使用 |
| DeepSeek TUI (`deepseek` / `codewhale`) | 専用の Open Design アダプターを備えた、独立したターミナル型コーディングエージェント | Harness のプロファイルアーキテクチャを使わない、ターミナル優先の DeepSeek ワークフロー |
| OpenCode | 成熟したオープンソースのプロバイダー非依存ターミナルエージェント | AGENTS.md と MCP を備えた安定した TUI ワークフロー内でモデルを切り替える場合 |
| Claude Code | ターミナル、IDE、デスクトップ、Web で利用できる成熟したコーディングエージェント | フロントエンドの推論、画像を多用するリファレンス、確立されたデザイン連携 |
| Open Design | 対応するコーディングエージェントを中心とした、エージェントネイティブなデザインワークスペースとライブラリ | 厳選されたデザインシステム、スキル、ビジュアル成果物、単一のモデルベンダーに依存しないローカルワークフロー |
公式 Web UI、プロファイルシステム、モデルカタログ、再開可能な Harness セッションを使いたい場合は DeepSeek Harness を選びます。ターミナル優先のワークフローを好む場合は、Open Design 内の DeepSeek TUI を選びます。Open Design が両方を同じデザインプロセスで包めるようになっても、両者は別々のランタイムです。
DeepSeek Harness をデザインに使う：よくある質問
-
01 DeepSeek Harness とは何ですか？
DeepSeek Harness (`dsh`) は、DeepSeek AI が公式に提供するオープンソースのエージェントハーネスです。Cordis プラグインツリーを通じて、モデル、ツール、コンテキスト、セッション、ポリシー、オーケストレーション、UI を組み合わせます。公開版は現在、MIT ライセンスの開発者プレビューです。
-
02 DeepSeek Harness をインストールして実行するにはどうすればよいですか？
`npm install -g @deepseek-ai/[email protected]` でテスト済みの CLI をインストールし、`dsh web` を実行します。プレビューに関する注意を確認して先に進み、Settings → Models → DeepSeek → API Key で API キーだけを保存してください。プロバイダーとモデルが動作することを確認し、`Ctrl+C` で Web UI を停止します。Open Design 0.19.1 以降をインストールし、Local CLI エージェントを再スキャンして Harness カードを接続し、Test をクリックします。
-
03 DeepSeek Harness は DeepSeek の公式プロジェクトですか？
はい。リポジトリは GitHub の `deepseek-ai` Organization で公開されており、dsh は DeepSeek AI が開発したエージェントハーネスと説明されています。MIT ライセンスで提供され、開発者プレビューであることが明記されています。
-
04 DeepSeek Harness はスクリーンショットから UI を構築できますか？
選択したプロバイダールートが画像入力対応を宣言している場合に限ります。dsh における DeepSeek 独自の chat-completions ルートはテキスト専用であり、ハーネスはテキスト専用ルートで画像添付を送信前に拒否します。スクリーンショットには画像対応のプロバイダーを使用するか、コード、DOM、トークン、記述した仕様を通じて対象を説明してください。
-
05 DeepSeek Harness は AGENTS.md とスキルに対応していますか？
はい。指示プラグインは、AGENTS.md および CLAUDE.md 互換のプロジェクトファイルを読み込みます。ファイルシステムスキルプロバイダーは、設定済みのユーザールートと同梱ルートに加え、`.dsh/skills` および `.agents/skills` 配下のプロジェクトスキルを検出します。
-
06 DeepSeek Harness と DeepSeek TUI の違いは何ですか？
両者は別のツールです。DeepSeek Harness は `dsh` 実行ファイルを使用する、DeepSeek AI 公式のプラグインファースト型 Web UI・ヘッドレスランタイムです。DeepSeek TUI は `deepseek` または `codewhale` ディスパッチャーを使用する、Open Design が現在対応している別個の DeepSeek アダプターです。
-
07 Open Design は DeepSeek Harness に対応していますか？
はい。Open Design は公式の dsh インストールを検出し、明示的な確認後に Open Design が所有する検証済みプロファイルコンポーネントをインストールして、Harness のモデルカタログを同期し、DeepSeek Harness をファーストパーティのローカルエージェントとして実行します。Open Design が dsh をインストールしたり、Harness が管理するプロバイダーのシークレットを受け取ったりすることはありません。
-
08 DeepSeek Harness は API キーをどこに保存しますか？
キーは Open Design ではなく DeepSeek Harness で設定します。公式モデルガイドによると、プロバイダーキーは `$DSH_HOME/.credentials.yaml` に書き込み専用のシークレットとして保存されます。UI はキーが設定済みかどうかを確認できますが、平文の値を読み取ったり表示したりはできません。Open Design がキーをアプリに貼り付けたり、Open Design の設定に書き込んだりするよう求めることはありません。
Open Design で DeepSeek Harness を使ってデザインする。
公式 dsh ランタイムをインストールして一度接続すれば、Open Design のデザインシステム、スキル、同期済みモデル、ローカル成果物プレビューを 1 つのワークフローで利用できます。