DSH 与 OpenDesign
动效网页拆解复刻教程

从连接 生成 修复 检查到导出独立 HTML

视频最终展示的独立 HTML 网页效果

原作已获转载许可｜图文复刻路线｜适合零基础跟做

原作：小豪AI茶谈｜抖音作品 7681266872020438315｜整理日期：2026 年 9 月 23 日

开始前先说结论

这条视频展示的是一条可以复刻的网页生产流程：在 DSH Desktop 中选择 DeepSeek Harness，让它通过 OpenDesign 读取设计要求并生成真实的 HTML 文件；首轮效果出现问题后，不重建项目，而是在同一会话里继续修复，检查通过后再导出独立 HTML。

这不是对博主个人操作环境的逐像素复制。本文只把视频中能够确认的流程转写成小白可执行教程，并补充必要的检查口令。视频未展示的账号、API 密钥、OpenDesign 版本和完整原始提示词，不作为博主原设置描述。

一 视频里实际使用了什么

图 1 视频把 OpenDesign 和 DeepSeek Harness 分成设计与执行两部分

视频画面明确显示 DSH Desktop 2.0.2，权限模式选为 Workspace Write，模型下拉显示 DeepSeek V4 Flash High。网页生成和预览环节由 OpenDesign 承接，最终文件名示例为 VANTA-OpenDesign-standalone.html。

DeepSeek Harness 是 DeepSeek AI 开源的 agent harness，仍处于 developer preview，官方提醒其可能发生兼容性破坏。视频中的 DSH Desktop 是社区维护的桌面封装，不是 DeepSeek 官方桌面产品。OpenDesign 官方资料确认其可以把 DeepSeek Harness 作为原生运行时连接，并保留项目文件、实时预览、继续会话和 HTML 导出能力。

二 准备工作

图 2 在工作区权限中选择 Workspace Write，并连接 DeepSeek Harness

1. 准备 Windows 或 macOS 电脑，并为项目新建一个独立空文件夹。

2. 安装 DeepSeek Harness。最稳妥的官方方式是先安装 Node.js，再运行 npx @deepseek-ai/dsh web。如果采用视频中的 DSH Desktop，应从其项目仓库或发布页获取，并注意它属于社区项目。

3. 安装 OpenDesign 桌面端。OpenDesign 官方建议安装官方 dsh CLI 后运行 od agent setup deepseek-harness，再在 Models 页面添加 DeepSeek API Key，或让 OpenDesign 后台读取 DEEPSEEK_API_KEY。

4. 准备模型额度。安装桌面端不等于获得免费模型调用额度，具体模型名称也可能随账号和版本变化。

5. 为本次练习创建工作目录，例如 dsh-opendesign-demo，只让工具写入这个目录。不要一开始就给整个磁盘完全访问权限。

三 连接 Harness 并新建项目

图 3 视频中的新建项目、工作区和模型选择界面

打开 DSH Desktop 或 DeepSeek Harness 页面，在权限菜单选择 Workspace Write，让代理可以写入当前工作区。视频里没有选择 Full access，这一点值得保留：网页生成只需要项目目录的读写权限。

然后选择 DeepSeek Harness，并从当前账号可用模型中选一个支持代码和工具调用的模型。视频画面显示的是 DeepSeek V4 Flash High，但复刻时应以界面实时显示为准。确认当前工作目录就是刚建立的空文件夹，再新建网页项目。

如果 OpenDesign 中看不到 DeepSeek Harness，先检查三件事：官方 dsh CLI 是否能启动、od agent setup deepseek-harness 是否成功、模型密钥是否已经在 Models 页面配置。不要在连接失败时直接开始生成，否则容易出现只有对话、没有可预览文件的情况。

四 写清楚第一轮需求

图 4 视频将需求拆成黑色背景、超大标题、发光核心和页面模块

视频只展示了提示词画面，没有提供可复制文本。下面是根据画面中可辨认要求整理的复刻版，不是博主原提示词：

读取当前项目里的 DESIGN_BRIEF.md。
请生成一个自包含的 index.html，优先避免外部依赖。

页面目标：桌面端 1920 × 1080 首屏。
视觉要求：黑色背景；左侧使用超大中文标题“让创意先于想象发生”；
右侧制作一个可交互的粒子发光核心，粒子需要持续运动并有明显发光层次。

内容要求：首屏下方继续提供三个功能模块和性能数据区；
页面要表达生成、编辑、发布的完整流程。

完成后直接生成真实文件并在本地预览。
不要只给设计说明，也不要只输出效果图。

这段提示词的关键不是形容词多，而是同时给出交付物、画布目标、视觉结构、动效主体、页面模块和验收动作。若已有品牌色、字体或参考图，应先写入 DESIGN_BRIEF.md，再让代理读取，避免把几十条约束塞进一条消息。

五 检查第一次生成结果

图 5 第一轮已经生成真实 index.html 和可运行首屏

图 6 同一网页中继续包含模块与性能数据区

生成完成后，先确认工作区确实出现 index.html，再打开 OpenDesign 预览。视频中的网页包含黑色首屏、超大中文标题、右侧粒子核心、功能模块和性能数据区，说明它交付的是可运行网页，不是静态效果图。

第一次检查不要只看首屏是否好看，至少完成下面五项：

1. 缩放到 100%，确认页面没有横向溢出。

2. 滚动浏览全部模块，确认内容都在同一网页中。

3. 点击主要按钮，确认按钮有响应。

4. 观察粒子核心至少 10 秒，确认动画持续运行，而不是一张静态图。

5. 打开控制台，检查是否出现脚本错误。

视频的首轮结果并没有完全成功：右侧核心区域没有显示，画面标出了 createRadialGradient 与 non-finite。这类错误通常意味着 Canvas 渐变接收了非有限坐标或半径，常见诱因是容器尺寸尚未就绪、宽高为 0、缩放结果为 NaN，或初始化顺序不正确。

六 不重建项目 在原会话修复

图 7 左侧为核心未显示，右侧为同一会话修复后的对比

视频最值得复刻的不是一次生成成功，而是把错误留在同一项目、同一会话里继续修复。这样代理仍然知道之前的设计约束和文件结构，减少重新生成导致版式、文案和颜色全部漂移。

把控制台报错和可见现象一起交回原会话，可以使用下面这条复刻修复指令：

当前页面右侧的粒子发光核心没有显示。
请不要重建项目，也不要改动已经通过的排版、文案和配色。

控制台错误指向 createRadialGradient non-finite。
请检查 Canvas 容器尺寸、初始化时机、坐标和半径计算，
确保传入渐变函数的数值都是有限数值且半径大于 0。

修复后重新预览，并告诉我：
1. 根因是什么；
2. 修改了哪个文件；
3. 首屏粒子核心是否持续运行；
4. 控制台是否还有错误。

如果修复后版式变化，再补一句“只做局部修复，保留现有 DOM 结构和 CSS 视觉系统”。不要说“重新做一个更好的网页”，否则模型很可能把稳定部分一起重写。

七 终检和导出

图 8 视频完成检查后导出可独立打开的 standalone HTML

视频修复后再次对比了首屏，右侧发光核心恢复显示，原来的版式没有被破坏。随后进行本期验收：横向溢出为 0、脚本错误为 0、P0/P1/P2 为 0、外部依赖为 0，并导出可以独立打开的 HTML。

复刻时可以把下面的终检指令发给同一会话：

请按可交付标准检查当前 index.html：
1. 是否存在横向溢出；
2. 控制台是否有脚本错误；
3. 首屏粒子动画是否持续运行；
4. 按钮和页面模块是否可用；
5. 是否存在不必要的外部依赖；
6. 是否有必须立即修复的 P0、P1、P2 问题。

发现问题请直接修复并再次检查。
全部通过后，再导出一份可独立打开的 standalone HTML。

导出后不要只看 OpenDesign 内置预览。关闭项目，直接双击导出的 HTML，用浏览器重新打开；断网后再试一次，确认核心视觉和本地资源仍然存在。若页面依赖在线字体、CDN 脚本或外链图片，它就不是真正意义上的单文件离线交付。

八 可复刻性评测

结论是可以复刻同类型、同结构和相近视觉风格，但不能保证每次生成的粒子数量、排版间距和代码实现完全一致。

对小白而言，难点主要有三个：一是完成 DSH 与 OpenDesign 的连接；二是把抽象审美改写成可验收条件；三是遇到脚本错误后能否保留原项目继续修。完成环境配置后，网页生成本身并不复杂。

这条流程的优势是交付物真实、修改链连续、错误可以在原上下文中修复，而且最终能拿到 HTML 文件。局限是 DSH 仍处于快速迭代阶段，界面和兼容性会变化；模型生成具有随机性；复杂动效仍需要浏览器控制台检查；导出 HTML 也不等于网站已经部署上线。

综合评价：流程可实现，复刻可行度 4 星；首次生成稳定性约 3 星；经过同会话修复后的交付稳定性约 4 星。适合制作活动页、作品集首屏、概念官网和单页演示，不适合未经人工检查就直接用于支付、登录、数据库等高风险业务。

九 最短复刻路线

安装并连接 DSH 与 OpenDesign，建立独立工作目录，选择 Workspace Write，明确要求生成真实 index.html，首次预览后检查溢出、交互、动画和控制台错误，有问题就在同一会话局部修复，终检通过后导出 standalone HTML，再用独立浏览器离线复验。

资料来源

• 视频原作：小豪AI茶谈，2026 年 9 月 3 日发布，抖音作品 7681266872020438315。

• DeepSeek Harness 官方仓库：https://github.com/deepseek-ai/deepseek-harness

• DeepSeek Harness 官方介绍：https://www.deepseek.com/harness/en/

• OpenDesign 官方仓库：https://github.com/nexu-io/open-design

• OpenDesign 与 DeepSeek Harness 连接说明：https://open-design.ai/blog/open-design-0-19-1-design-with-deepseek-harness/

• DSH Desktop 社区项目说明：https://github.com/anywhere-labs/dsh-desktop