dsh-ui-spec:將 UI 截圖轉換爲 DeepSeek 可實現的響應式界面規格

前言

在 DSH 工作流中,如果要把 UI 截圖交給純文本 DeepSeek 模型重建爲響應式 Web 界面,需要先補充佈局、視覺細節、交互和瀏覽器驗證約束。dsh-ui-spec 是 yumimanji 維護的 DeepSeek Harness 插件,用於把 UI 截圖轉換爲實現導向的結構化規格。

插件定位

  • 包名:dsh-ui-spec
  • 維護者:yumimanji
  • 版本:0.1.1
  • 許可證:MIT
  • GitHub:https://github.com/yumimanji/dsh-ui-spec

核心能力

下面介紹已覈實的能力,便於判斷它是否適合當前任務:

  1. 將 UI 截圖轉換爲實現導向的結構化規格。
  2. 幫助純文本 DeepSeek 模型重建響應式 Web 界面。
  3. 使用 Windows 原生 OCR。
  4. 提供佈局、視覺細節、交互和瀏覽器驗證約束。
  5. 使用 OCR、確定性幾何、場景圖、資產和渲染比較。

安裝與啓用

從 npm 安裝

先確認要安裝的 DSH profile,然後執行 npm 安裝命令。這裏使用 web profile 作爲示例:

dsh plugin --profile web add dsh-ui-spec

依賴與包信息

安裝前可以查看 package.json 中的關鍵依賴。資料中可確認的依賴信息如下:

@deepseek-ai/cordis >=0.1.0-rc
@deepseek-ai/dsh-tools >=0.1.0-rc

這兩個 peerDependencies 在資料中標明爲必填依賴。

另外,package.json 依賴包含:

sharp ^0.35.3

package.json 還聲明 DSH bundle patch 文件爲:

./cordis.patch.yml

從 GitHub 當前版本安裝

如果從 GitHub 當前版本安裝,並且使用 pnpm 11,需要在 DSH profile 的 pnpm-workspace.yaml 中允許該倉庫的 build script。先修改該 profile 的 pnpm-workspace.yaml:

allowBuilds:
  "dsh-ui-spec@git+https://github.com/yumimanji/dsh-ui-spec.git": true

然後再執行 GitHub 安裝命令:

dsh plugin --profile web add github:yumimanji/dsh-ui-spec

若 DSH profile 無法配置 allowBuilds,建議使用 npm release。

處理 ERR_PNPM_UNEXPECTED_STORE

出現 ERR_PNPM_UNEXPECTED_STORE 時,資料中的處理方式是:重建該 DSH profile 的依賴後重試安裝。可以按下面步驟處理:

cd $env:USERPROFILE\.dsh\profiles\web
Rename-Item node_modules node_modules.store-mismatch-backup
pnpm install
dsh plugin --profile web add dsh-ui-spec

DSH 正常啓動後,再刪除備份目錄。

典型用法

在 DSH 中向模型提出請求。下面兩個示例來自 README。

分析當前目錄中的兩張圖

這個示例要求分析當前目錄中的兩張圖,實現後使用 manage_ui_browser 驗證頁面,並且只關閉由該工具創建的瀏覽器會話。

Use ui-spec to analyze the two images in the current directory and recreate them as responsive web interfaces. After implementation, validate the pages with manage_ui_browser and close only the browser session created by that tool.

分析指定路徑的單張圖

如果只需要分析一張參考圖,可以給出具體路徑。下面是 Windows 路徑示例:

Use ui-spec to analyze C:\path\to\reference.png and implement the responsive web UI.

適用場景與注意

適合已有 UI 截圖,希望先生成實現導向的結構化規格,再讓 DeepSeek 實現響應式 Web 界面的場景。README 指出該插件使用 Windows 原生 OCR,使用時需要符合這一運行條件。

安裝前需要檢查源碼和許可證。插件以當前 dsh 進程權限運行,因此不要將其安裝方式理解成官方應用商店。

結尾

dsh-ui-spec 的價值在於把截圖中的佈局、視覺細節、交互和驗證要求整理爲結構化規格,爲純文本 DeepSeek 模型實現響應式 Web 界面提供約束。

當前已覈實資料未提供目錄頁 URL,因此這裏只給出 GitHub 鏈接:https://github.com/yumimanji/dsh-ui-spec

羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

小夜