ビジョン & 入力

dsh-ui-spec

UI スクリーンショットを実装レベルの仕様に変える。トークン、余白スケール、レイアウトグリッド。

概要

スクリーンショットやモックアップを構造化されたフロントエンド仕様に変換する、単一の analyze_ui_image ツール。決定論的なジオメトリ層が正確な寸法、パレット、推奨デザイントークン、レイアウトグリッド、余白スケールを計測し、任意のビジョンモデルがその上に意味論を加える。

DeepSeek Harness plugin: turn UI screenshots into structured, implementation-grade web frontend specs. Deterministic geometry (sharp) + optional vision-model semantics, merged into one JSON + Markdown spec.
上流の README より

デザインにとっての意味

  • ピクセル座標、余白スケール、トークンパレットは、ビジョンモデルの推測ではなく決定論的に計算される。
  • 仕様のフィールドはそのまま実装に対応する。推奨トークンはデザイントークンへ、余白スケールは CSS へ。
  • セマンティックな役割が意図を、ジオメトリが配置を担い、1 つの JSON + Markdown 仕様に統合される。

カバーする内容

  • Why this exists
  • Configure the semantic layer
  • The tool
  • How to use the spec
  • Status & caveats

インストール方法

dsh-ui-spec

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

    dsh plugin --profile web add dsh-ui-spec
  2. dsh web を再起動して、プラグインを読み込ませる。

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

DeepSeek Harness での使い方

  1. プラグインを追加する。ジオメトリ層は設定ゼロでオフラインでも動く。

  2. 任意で、セマンティック層を OpenAI 互換のビジョンエンドポイントに向ける。

  3. エージェントにスクリーンショットを渡し、画像ではなく返ってきた仕様から実装する。

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

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

次のステップ

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

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

NEXGERCORE デスクトップ版

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

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

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

macOS、Windows、Linux に対応