前言¶

在 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