デザインワークフロー
dsh-annotate
ブラウザの要素を指し示し、曖昧な説明ではなく構造化された事実をエージェントに送る。
概要
コンパニオン Chrome 拡張によるビジュアルなブラウザフィードバック。/annotate で選択モードに入り、クリックした各要素がセレクタ、DOM の事実、computed style のハイライト、アクセシビリティデータ、あなたのコメント、任意のビューポートスクリーンショットを、エージェントの次のターンに届ける。
Visual browser element annotation for DeepSeek Harness, capturing DOM, styles, accessibility data, comments, and viewport screenshots.
デザインにとっての意味
- ビジュアルフィードバックは、曖昧な説明や貼り付けたスクリーンショットにならず、ページ上の要素に結び付いたまま残る。
- computed style とアクセシビリティデータが、エージェントが直接行動に移せる構造化された事実として届く。
- ホスト、オリジン、拡張 ID で制限されたループバック WebSocket ブリッジが、チャネルをローカルに保つ。
カバーする内容
- Why this exists
- Features
- Install
- Use
- Configure
- Scope
インストール方法
dsh-annotate
-
ターミナルでこれを実行する。
git clone https://github.com/BrambleXu/dsh-annotate.git && dsh plugin --profile demo add ./dsh-annotate -
dsh web を再起動して、プラグインを読み込ませる。
-
あとは作りたいデザインを説明するだけ。ハーネスがプラグインのツールを拾い上げる。
DeepSeek Harness での使い方
-
リポジトリをクローンしてプロジェクトをハーネスのプロファイルに追加し、その browser-extension フォルダを chrome://extensions からアンパックド拡張として読み込む。
-
/annotate を実行し、ページ上の要素をクリックして、それぞれにコメントを添える。
-
送信すると、キャプチャされた事実とビューポートスクリーンショットがエージェントの次のターンに着地する。
ここに並ぶプラグインはすべて無料でインストールでき、実際の配布元にリンクしています。
DeepSeek Harness リポジトリをもっと見る ↗ほかの DeepSeek Harness デザインプラグイン
ビジョン & 入力 できること modlens テキスト専用の DeepSeek モデルに、プラグインで視覚を与える。スクリーンショットを貼れば、構造化された根拠が返ってくる。 
ビジョン & 入力 できること dsh-vision-toolkit UI 復元、グラウンディング、ピクセル差分検証のための 10 個のビジョンツール。 
ビジョン & 入力 できること dsh-ui-spec UI スクリーンショットを実装レベルの仕様に変える。トークン、余白スケール、レイアウトグリッド。 
ビジョン & 入力 できること dsh-media-skills 無料の目と無料の絵筆。貼り付けた画像の読み取りと、ウォーターマークなしの画像生成。 次のステップ
セットアップなしで、OpenDesign とデザインする
このプラグインを自分で入れてもいいし、OpenDesign でキュレーション済みのデザインレイヤーごと DeepSeek Harness の周りで動かしてもいい。自分の API キーを使い、成果物も自分のものに。