前言¶
在 DSH 里让智能体做落地页、仪表盘或带 Canvas/WebGL 的界面时，常见问题是输出风格漂移：组件库混用、动效堆叠、移动端与减弱动效未兜底。手写 AGENTS.md 可以约束一部分行为，但规则分散、难以在每次 Web 任务里稳定生效。
doran-design 是维护者 Doran1110 发布的工作流类 DSH 插件（skill pack）。它向运行时注册一个完整 skill 和一段始终生效的系统提示片段，把 shadcn/ui、Canvas UI、ThreeUI 三层分工、视觉面积 80/15/5 划分、性能预算与验收清单写进可调用 playbook，安装后无需再维护本地同名规则的重复文档。
这是什么¶
doran-design 面向「用 DSH 智能体做 Web 与产品 UI 设计」的场景。插件不自带浏览器 UI（README 说明 package 中无 dsh.client），通过 Cordis patch 贡献 skill 与 system-prompt section。许可证为 MIT；当前资料中的发布版本为 0.1.1，要求 DSH 不低于 0.1.0-rc.1，Node >= 20。
社区目录页：https://www.skillhub.cn/plugins/Doran1110/doran-design
源码与说明：https://github.com/Doran1110/doran-design
核心功能¶
安装后主要增加两类能力（名称与职责以 README 为准）：
-
Skill
doran-design：完整 playbook，覆盖
- 结构层：shadcn/ui
- 效果层：Canvas UI
- 3D 层：ThreeUI / three.js
- 视觉面积 80 / 15 / 5 划分
- 组件选型、性能预算、降级策略与 acceptance checklist -
System-prompt section
doran-design-rules：紧凑硬规则集，在每次 Web 相关任务中生效，包括例如：每个视口仅一个 GPU 类效果、Radix UI Colors、0.5px 边框、最小 12px 字号、移动端与prefers-reduced-motion降级要求等。
硬规则通过 ctx.systemPrompt.section 注入，插件不会写入 AGENTS.md，因此安装并完成 profile 配置后即可依赖运行时规则，而不必单独维护一份 AGENTS 设计章节。
Runtime skill 注册 rank 为 250；若本地已有同名 doran-design skill，与插件并存时插件侧会优先，建议只保留一份以免目录重复。
安装与启用¶
从 GitHub Releases 安装预构建 tarball（命令来自官方 README）：
dsh plugin --profile web add https://github.com/Doran1110/doran-design/releases/download/v0.1.1/doran-design-0.1.1.tgz
若当前 DSH 版本不会自动 reconcile bundles，需在 profile 中把包名加入 dsh.profile.bundles：
{
"dsh": {
"profile": {
"bundles": ["doran-design"]
}
}
}
安装后重启对应 profile。插件以当前 dsh 进程权限运行；安装前请自行查看仓库源码与 MIT 许可证，确认符合你的安全与合规要求。
典型用法¶
面向落地页、仪表盘、作品集，或任意 Canvas / WebGL / Three.js 界面，直接向智能体描述需求即可。Skill 可在模型侧以名称 doran-design 被调用；在支持 skill 调用的客户端上也可显式使用：
/skill doran-design
具体页面结构、组件与动效仍由对话与 skill 内容驱动，插件提供的是分层架构与验收约束，而不是替代你的业务描述。
适用场景与注意¶
适合：已在 DSH 中使用 web 等 profile 做前端/UI 生成，希望统一 shadcn + Canvas + Three 三层边界、性能预算和 checklist 的开发者或团队。
注意：
- 需要
@deepseek-ai/cordis、@deepseek-ai/dsh-skill、@deepseek-ai/dsh-system-prompt等与 package.json 中 peerDependencies 一致的运行时。 - 无内置客户端 UI，交互仍在 DSH 对话与现有工具链中完成。
- SkillHub 等社区目录为独立站点，与 DeepSeek / 幻方无官方从属关系；星标与版本以仓库与 Releases 为准。
结尾¶
doran-design 把 Web 设计里的结构、效果、3D 三层规则、性能与验收项打包成 DSH skill 与常驻 system-prompt 片段，减少靠零散 prompt 或手写 AGENTS 维持一致性的成本。进一步细节见 GitHub 仓库 与 SkillHub 目录页。
