前言¶
在 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 目錄頁。
