设计工坊 omegapaopao/dsh-open-design

dsh-open-design

DeepSeek Harness（dsh）的 OpenDesign 桥接 —— 把 OpenDesign 的渲染模板、品牌级设计系统和反垃圾设计闸门，装成 52 个原生 dsh 技能，这样在 dsh 里说一句话，就能产出成品级的自包含 HTML 页面，而不是千篇一律的 AI 标记。

OpenDesign 有桌面应用，也有给 Claude Code / Codex / Cursor 等用的技能。它自己没有 dsh 集成，所以这个项目把关键部分——技能和 token 契约——打包成 dsh 能挂载的插件。

你能拿到什么

| 28 个渲染模板 | web-prototype、saas-landing、dashboard、pricing-page、docs-page、blog-post、faq-page、waitlist-page、contact-widget、magazine-poster、social-carousel、email-marketing、live-artifact、live-dashboard、github-dashboard、kanban-board、mobile-app、mobile-onboarding、pm-spec、team-okrs、weekly-update、critique、tweaks、motion-frames、guizang-ppt、simple-deck，以及三个 web-prototype-taste- 变体 |
| 23 个手艺技能 | taste-skill、soft-skill、brutalist-skill、minimalist-skill、emil-design-eng、emilkowalski-motion、review-animations、web-design-guidelines、frontend-design、impeccable-design-polish、redesign-skill、image-to-code-skill、web-clone、design-brief、design-review、reference-design-contract、writing-guidelines、output-skill、brand-extract、deck-swiss-international、gpt-tasteskill、ui-ux-pro-max、faq-page |
| 32 个设计系统 | 每个系统含 tokens.css + DESIGN.md + manifest.json：apple、stripe、vercel、linear-app、notion、figma、supabase、airbnb、shopify、nvidia、tesla、spotify、github、openai、xiaohongshu，外加风格系统（editorial、minimal、brutalism、glassmorphism、bento、mono、retro……） |
| 1 个路由技能 | open-design —— 把模板绑到 token 契约、并强制执行闸门的工作流 |

总共约 2.6 MB 纯文件。没有运行时依赖，使用时也不发网络请求。

工作原理

dsh 配置档会组合一叠有序的插件包。一个包就是 npm 包，声明 dsh.bundle.patch，这个补丁可以挂载 @deepseek-ai/dsh-skill-filesystem，指向一个装满 SKILL.md 的目录：

dsh-open-design/cordis.patch.yml
- insert:
- id: open-design-skill-filesystem
name: '@deepseek-ai/dsh-skill-filesystem'
config:
providerName: open-design
includeDefaultRoots: false
bundledSkillDir: !!js ...createRequire(baseUrl).resolve('dsh-open-design/package.json'), 'skills')

技能根目录从配置档锚定的已安装 npm 身份解析出来，跟 @tt-a1i/archify-dsh 的做法完全一样——那个包就是本项目参照的可用先例。

安装

需要带配置档的 dsh，以及文档路径所需的 pnpm。

方案 A —— 文档路径

powershell
dsh plugin --profile web add "E:\path\to\dsh-open-design"

这条命令会转发给 pnpm，然后自动对齐 dsh.profile.bundles：
pnpm 写入真实安装名，凡是包声明了 dsh.bundle 的依赖都会加入层栈。

如果 dsh web 正在运行，这一步在 Windows 上可能失败：
pnpm 会重新解析整个配置档树，然后尝试替换实时服务器已经映射的包，Windows 会拒绝：
failed to remove existing directory "...\lightningcss-win32-x64-msvc" prior to swap: Access is denied。
失败是干净的——配置档清单不会被改动——但什么也没装上。先停掉服务器，或者用方案 B。

方案 B —— 手动链接，不用 pnpm

loadProfileDirectory 解析每个 dsh.profile.bundles 条目时，走的是普通 Node node_modules 查找，从不查 dependencies，所以一个 junction 加一条 bundles 条目就是完整安装： powershell New-Item -ItemType Junction -Path "$env:DSH_HOME\profiles\web\node_modules\dsh-open-design" -Target "E:\path\to\dsh-open-design"

then append "dsh-open-design" to dsh.profile.bundles in

$env:DSH_HOME\profiles\web\package.json

然后重启一次

bundle 变更在启动时解析进层栈，所以插件会在下次启动 dsh web 时进入技能目录。

之后做技能相关的工作不需要重启：文件系统服务商会监视自己的根目录，新增、删除或重命名技能目录都会自动生效，无需重启。

验证 powershell

1 · did DSH compose the layer, and is it enabled?

dsh --profile web --dump-config | Select-String 'open-design' -Context 2,6

组合出的树里必须包含 open-design-skill-filesystem，且没有 disabled: 键。（--dump-config 需要对配置档目录有写权限，因为它在导出前会重写 cordis.yml。）
powershell

2 · do the skills satisfy DeepSeek Harness' real discovery rules?

node tools/od-validate-skills.mjs dsh-open-design/skills

这是对服务商 parseFrontmatter、parseInvocationPolicy 以及注册表 SKILL_NAME 正则的逐行复刻，用的还是服务商加载的同一个 yaml 解析器。这一点很重要，因为服务商遇到旧式 camelCase 调用键会抛错，所以一个坏文件不只是被跳过。预期输出：discovered: 52 … VALID。

重新构建，或挑选你自己的子集

selection.json 精确列出了打包了哪些上游包。编辑它，然后： powershell
node tools/gh-tree.mjs nexu-io/open-design main tree.json
node tools/od-build.mjs tree.json selection.json dsh-open-design

gh-tree.mjs 用一次 API 请求拉取上游文件树； od-build.mjs 只下载文本资源，8 路并发，把任何非 kebab 格式的 frontmatter name 改写成与目录一致，并报告跳过了什么。

构建到新目录，验证，再替换。替换正在使用的目录
dsh web 运行时 place 会失败——watcher 占着它，Windows 拒绝重命名。

已知限制

- 之后再跑一次 pnpm install 会把手工链接的安装剪掉。 上面的方案 B 让这个包留在 dependencies 和 lockfile 之外，于是 pnpm 把 junction 当成多余项删掉——而 bundles 条目还在，加载器这时会抛错，而不是降级处理： cannot resolve profile bundle "dsh-open-design"。重新创建 junction 即可。
- 每个屏幕只能有一个强调色。 每个模板都强制这条，而吸顶导航是陷阱：那里放一个填充强调色的按钮，就等于它出现在每个*屏幕上，一下子花掉三份预算。导航里的 CTA 保持中性。
- 取值上 tokens.css 压过 DESIGN.md。 两者在上游就不一致——Markdown 那边是通用的样式基础样板，而编译出的 token 文件才对应真实的设计语言。
- CJK 文案需要显式指定显示字体。 模板的拉丁衬线字体栈不含中文字形，于是 h1/h2 会悄悄回退到无衬线，「衬线显示」这条法则就无声地失效了。
- review-animations 故意对模型不可见。 它的上游 frontmatter 设了 disable-model-invocation: true；只能由用户调用。

验证你生成的页面 powershell
node tools/od-check.mjs path/to/index.html

把设计门禁当代码跑：游离的十六进制色值、显示字体绑定、每个屏幕的强调色角色、data-od-id 覆盖率、图片本地性与可解析性、emoji、移动端重排、自包含性、动效纪律（不许 transition: all，不许裸 ease-in，不许 scale(0)，时长有上限）、内联脚本语法，以及一条不变式：任何基础选择器都不得隐藏内容——隐藏状态必须待在 @keyframes 里，或者藏在由内联脚本添加的 class 后面。

_selftest/ 里放着最后那条检查的测试夹具：violating.html 必须不通过，compliant.html 必须通过，这样这条检查就不会悄悄变成空操作。

示例

examples-web-prototype/index.html 是通过桥接生成的页面——web-prototype 种子绑定到 editorial 设计系统——而且它刻意不含图片：没有照片，没有外部请求，19 KB，单个文件。直接打开它就行。它演练了种子的排版、间距和强调色纪律，不依赖任何本仓库需要再分发的资源。

许可与署名

本仓库采用 Apache-2.0。打包的技能内容属于 OpenDesign，同样是 Apache-2.0，其中 15 个打包技能自带许可文件，随技能一并保留。读一下 NOTICE——里面记录了上游修订版本、所做的一处修改，以及每个组件的许可。

致谢

- OpenDesign —— 本桥接所对接的技能与设计系统。Apache-2.0。
- archify —— 它的 DeepSeek Harness 集成确立了这里使用的技能服务商模式。
- Emil Kowalski —— emil-design-eng 背后的动效理念，其评审清单已写进 tools/od-check.mjs。