前言¶

在 DeepSeek Harness（DSH）裏用自然語言或組件清單描述界面，往往會在間距、字號、對齊等細節上反覆校對。常見流程是：描述一次、生成一版、再補差異——但單一路徑的結果很難區分是理解偏差還是模型換了另一種合理實現。

截圖保留了版式與視覺信息，卻缺少一條把「參考圖」變成「可直接打開的頁面」的工作流。下面介紹維護者 egorfedorov 發佈的 DSH 工作流插件 dsh-clone：多張參考圖、多路並行重建，在實時面板裏對照評分後採納滿意的一版。

這是什麼¶

dsh-clone 是 DeepSeek Harness 插件（npm 包名 dsh-clone，當前資料版本 0.4.0，MIT 許可證）。核心價值一句話：Screenshot in, working UI out——粘貼界面截圖，多條 agent 在隔離目錄裏並行重建同一參考界面，你在 live 面板裏對比渲染結果與評分，採納最滿意的一版；產物爲純 HTML、CSS 與 vanilla JS，無需構建步驟、無需額外依賴與服務器。

倉庫：https://github.com/egorfedorov/dsh-clone
社區目錄：https://www.skillhub.cn/plugins/egorfedorov/dsh-clone

核心功能¶

並行車道（lane）¶

在對話中粘貼截圖後執行 /clone（默認 3 條車道）或 /clone 4 等。每條車道在各自隔離目錄中獨立實現同一參考圖；會話視圖會出現 Clone 面板，一側爲參考圖，另一側爲各車道渲染結果及評分。

README 中歸納的四種構建策略如下：

評分與採納¶

插件會對參考圖與各車道產出做渲染比對並給出分數（含顏色網格平均、允許小幅整體色偏、以及結構項——細節落點是否一致）。分數衡量的是「畫面一致程度」，不代表業務邏輯完全正確；README 舉例稱忠實復刻多在 90% 以上，無關深色界面約在 58% 附近。

可在面板上 Adopt 採納某一車道；也可通過 /clone pick 2 等命令將指定車道寫入工作區（例如 ./clone-*-lane-2/index.html 可直接打開運行）。支持在參考圖上拖拽矩形，僅對該區域重算各車道分數；/clone region clear 恢復整頁評分。

其他命令與工具調用¶

除 slash 命令外，agent 可通過 clone({ action: "start" | "status" | "pick", ... }) 等工具完成相同操作。常見命令包括：

• /clone status：車道狀態、分數、門禁結果等
• /clone refine 2 <說明>：在已採納頁面上按同一參考圖做定向修改並重新評分
• /clone pick 2 --diff src/components/card：以 patch 形式採納到已有目錄，而非新建文件夾
• /clone cancel / /clone discard：停止構建或清理臨時目錄與分支

環境要求¶

• Node 20+
• DSH：engines.dsh 要求 >=0.2.0-rc.2 || >=0.2.1-rc.2 || >=0.2.2-rc.1
• Harness profile 需支持 subagents（dsh-base bundle 提供 spawn 後端）
• 評分環節在已安裝 Chromium 系瀏覽器時可使用；無瀏覽器時其餘流程仍可使用

安裝與啓用¶

DSH 插件以當前 Harness 進程權限運行，安裝前請自行查看倉庫源碼與 MIT 許可證（LICENSE），確認符合你的安全與合規要求。

在 Harness Web UI 中安裝¶

路徑：Settings → Plugins → Add plugin，按包名安裝：

dsh-clone

該包已發佈至 npm（npm install dsh-clone 亦適用於本地 checkout 場景）。

自定義市場索引¶

在 Plugins → Custom plugin indexes 添加倉庫市場索引後，可從 Discover 一鍵安裝：

https://raw.githubusercontent.com/egorfedorov/dsh-clone/main/index.json

更新¶

市場在無就地升級機制時會提示 update-available；更新方式爲重新安裝。工作區內的 .dsh-clone/、clone-*/ 等產出目錄不會因重裝而丟失（README 說明 reinstalling loses nothing）。

開發態也可在 Add plugin 中填寫本機 checkout 的絕對路徑（資料中的開發說明指向倉庫 https://github.com/egorfedorov/dsh-clone）。

典型用法¶

30 秒流程（摘自 README）：

you:  [paste a screenshot]  /clone 3
me:   ▸ three agents, three isolated directories, same reference
      ▸ live panel: reference | lane 1 | lane 2 | lane 3   (rendered + scored)
you:  [Adopt this one]
me:   ▸ ./clone-a91c-lane-2/index.html  ← open it, it runs

可復現示例：

1. 在對話中粘貼界面截圖。
2. 執行 /clone 或 /clone 3；需要約束風格時可寫 /clone 2 darker, mobile-first。
3. 使用顯式圖片路徑時：/clone 3 ./mock.png。
4. 查看 /clone status，在面板或 /clone pick <n> 採納車道。
5. 在瀏覽器中打開工作區生成的 index.html 驗證頁面。

亦可用自然語言觸發，例如「rebuild this screenshot, three tries」，等價於 clone({ action: "start", lanes: 3, note: "..." })。

公開 demo 與匹配率示例見項目站點 https://egorfedorov.github.io/dsh-clone/demo/（如登錄頁、儀表盤、落地頁、卡片等案例及 README 中的 match 百分比）。

適用場景與注意¶

適合誰： 需要以截圖作爲唯一規格、快速得到多份可運行靜態原型並在視覺上擇優的 DSH 用戶；適合落地頁、儀表盤、表單等以視覺復刻爲主的場景。

注意：

• 評分反映像素/結構相似度，不保證無障礙、可訪問性或生產級代碼質量。
• 並行車道依賴 subagents 與隔離目錄，需確保 Harness 配置滿足要求。
• 插件歸屬社區維護者 egorfedorov；SkillHub 等爲獨立插件目錄，與 DeepSeek / 幻方無官方從屬關係。
• 使用前請閱讀倉庫中的 ACCEPTABLE-USE.md 等說明。

結尾¶

dsh-clone 把「截圖即規格」與「多路並行 + 可視對比」綁在一起，降低單次生成賭運氣的成本；採納結果爲可直接打開的靜態頁面，便於繼續手工或配合其他工作流迭代。

• 目錄頁：https://www.skillhub.cn/plugins/egorfedorov/dsh-clone
• GitHub：https://github.com/egorfedorov/dsh-clone
• npm：https://www.npmjs.com/package/dsh-clone