前言¶
在 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
核心能力¶
下面介紹已覈實的能力,便於判斷它是否適合當前任務:
- 將 UI 截圖轉換爲實現導向的結構化規格。
- 幫助純文本 DeepSeek 模型重建響應式 Web 界面。
- 使用 Windows 原生 OCR。
- 提供佈局、視覺細節、交互和瀏覽器驗證約束。
- 使用 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