デザインワークフロー
dsh-web-review
実際のページ上の要素を指し示し、視覚的に注釈を付けると、エージェントがソースを編集する。
概要
ハーネスの Web UI に組み込まれたブラウザ。デザインツールのようにホバーでハイライトして要素を選択し、メモを添え、テキスト、色、タイポグラフィ、サイズ、余白、ボーダー、エフェクトをライブで調整して試せる。注釈はセレクタとソースの手がかりを運ぶので、エージェントはコードを見つけて直せる。
Select page elements in the built-in browser as you would in a design tool, leave feedback, and preview changes to text, colors, typography, dimensions, spacing, borders, and effects. Once submitted, the agent uses your page annotations to update the source code.
デザインにとっての意味
- UI の問題を言葉で説明する代わりに、視覚的に指し示して注釈を付けられる。
- ライブ調整により、コードに触れる前にページ上で変更をプレビューできる。
- better-typography から interface-review まで、注釈エディタから使える 8 つのデザインスキルを同梱する。
カバーする内容
- Web Preview
- Element Annotations
- Live Visual Adjustments
- AI Collaboration
- UI Design Skills
インストール方法
dsh-web-review
-
ターミナルでこれを実行する。
dsh plugin --profile web add @canglongcl/dsh-web-review -
dsh web を再起動して、プラグインを読み込ませる。
-
あとは作りたいデザインを説明するだけ。ハーネスがプラグインのツールを拾い上げる。
DeepSeek Harness での使い方
-
プラグインを追加し、dsh web を起動する。
-
起動中のアプリを Web Preview タブで開き、変えたい箇所に注釈を付ける。
-
送信すると、エージェントはセレクタ、メモ、試した値を受け取り、ワークスペースのソースを編集する。
ここに並ぶプラグインはすべて無料でインストールでき、実際の配布元にリンクしています。
DeepSeek Harness リポジトリをもっと見る ↗ほかの DeepSeek Harness デザインプラグイン
ビジョン & 入力 できること modlens テキスト専用の DeepSeek モデルに、プラグインで視覚を与える。スクリーンショットを貼れば、構造化された根拠が返ってくる。 
ビジョン & 入力 できること dsh-vision-toolkit UI 復元、グラウンディング、ピクセル差分検証のための 10 個のビジョンツール。 
ビジョン & 入力 できること dsh-ui-spec UI スクリーンショットを実装レベルの仕様に変える。トークン、余白スケール、レイアウトグリッド。 
ビジョン & 入力 できること dsh-media-skills 無料の目と無料の絵筆。貼り付けた画像の読み取りと、ウォーターマークなしの画像生成。 次のステップ
セットアップなしで、NEXGERCORE とデザインする
このプラグインを自分で入れてもいいし、NEXGERCORE でキュレーション済みのデザインレイヤーごと DeepSeek Harness の周りで動かしてもいい。自分の API キーを使い、成果物も自分のものに。