ワークスペース & プレビュー

dsh-web-preview

ワークスペースをプレビューし、プロジェクトを実行し、要素に注釈を付けるガラスのサイドパネル。

概要

ハーネスの web UI のためのサイド web プレビューパネル。ワークスペースのファイルをプレビュー用に配信し、Markdown はレンダリング、コードは行番号付き、画像と HTML はそのまま表示する。プロジェクトは種類(Cargo、package.json、go.mod、Python)を自動検出してライブログ付きで実行され、マーキングモードは要素への注釈を会話に取り込む。

DeepSeek Harness(DSH)侧边网页预览面板 —— 一个标准 Cordis 插件包(Host + Client 双半),把工作区目录托管成 iframe 预览,并支持项目运行、元素标记批注与链接点击接管。
上流の README より

デザインにとっての意味

  • エージェントが書いたばかりのプロトタイプがチャットの隣で開く。アドレスバーは同期し、パネル幅はドラッグで調整できる。
  • マーキングモードは要素をホバーでハイライトし、セレクタと HTML スナップショットをキャプチャして、メモを会話に送る。
  • リンク、ファイルパス、ドロップしたファイルはすべてパネル内で開くので、レビューがセッションを離れることはない。

カバーする内容

  • 功能
  • 安装
  • 开发
  • 协议

インストール方法

dsh-web-preview

  1. ターミナルでこれを実行する。

    cd ~/.dsh/profiles/web && npm install dsh-web-preview-panel
  2. dsh web を再起動して、プラグインを読み込ませる。

  3. あとは作りたいデザインを説明するだけ。ハーネスがプラグインのツールを拾い上げる。

DeepSeek Harness での使い方

  1. パッケージを web プロファイルのディレクトリにインストールし、そのプロファイルの cordis.patch.yml に dsh-web-preview-panel という名前の insert エントリを追加してマウントする。

  2. dsh web を再起動し、会話右上の ▶ プレビューボタンを開く。

  3. パネルからプロジェクトを実行し、要素に注釈を付け、ログやメモをそのままエージェントに送る。

ここに並ぶプラグインはすべて無料でインストールでき、実際の配布元にリンクしています。

DeepSeek Harness リポジトリをもっと見る ↗

次のステップ

セットアップなしで、OpenDesign とデザインする

このプラグインを自分で入れてもいいし、OpenDesign でキュレーション済みのデザインレイヤーごと DeepSeek Harness の周りで動かしてもいい。自分の API キーを使い、成果物も自分のものに。

OpenDesign デスクトップ版

ひとつのデザインシステムで、すべての制作物をブランドらしく

完全な Vibe Design Workspace で、同じブランドルールを Web サイト、スライド、操作できるプロトタイプ、ダッシュボード、画像、HTML 動画に展開できます。ローカルの Codex、Claude Code、Cursor などを接続して無料で制作しましょう。

  • Web、スライド、プロトタイプ、ダッシュボード、画像、動画
  • 140+ のデザインシステムと完全なテンプレート/スキルライブラリ
  • ローカル Codex と 21+ のコーディングエージェントを接続 · 無料
無料ダウンロード

macOS と Windows に対応