前言¶
用 coding agent 做產品 UI 時，常見路徑是：讓模型直接寫 HTML/CSS，或在 Figma 一類工具裏畫完再對接。前者 diff 噪聲大、結構不規整，後者往往要賬號、插件或 MCP，設計文件也不一定能和代碼倉庫同頻版本化。
JustSkill Design 走的是另一條線：設計是一份帶內聯樣式、data-id 標記的自包含 HTML，agent 通過 Skill 和 CLI 改文件，人在本地畫布上審批；裝進 DeepSeek Harness（DSH）後，工作臺和右側 Canvas 與對話同屏。下面介紹它是什麼、能做什麼，以及在 DSH 裏的安裝與用法。
這是什麼¶
JustSkill Design 由 justskill-ai 維護，在 DSH 插件目錄中歸類爲工作流。項目自述爲：Design with your coding agent — A skill, not a product——不依賴 MCP server、獨立 App、賬號、構建步驟或 npm install 才能「用產品」；協作落在 git 裏，核心是 Skill 目錄與產出的 HTML。
定位可以概括爲：活在代碼倉庫裏的設計工具。agent 運行 skill 生成或修改設計頁，你評審確認後，該校驗通過的文件可作爲實現 UI 時的規格。README 寫明：你不畫圖，agent 畫，你判斷。
- 倉庫：https://github.com/justskill-ai/justskill-design
- 目錄頁：https://www.skillhub.cn/plugins/justskill-ai/justskill-design
- 許可證：MIT（README 與
package.json一致） - 當前包版本（
package.json）：3.2.1
核心功能¶
產物與版本化¶
倉庫裏被版本化的主要是兩樣：
| 內容 | 含義 |
|---|---|
| Skill | 設計畫布與規則；與代碼一起版本化，需要時由 agent 讀取，無常駐安裝進程 |
| HTML | 設計產物；任意瀏覽器可打開，可文本 diff，可不依賴本工具單獨傳閱 |
設計不是封閉在某 App 內的專有格式，而是合法、自包含的 HTML，便於 git diff、在 pull request 裏評審。
Agent 與人如何協作¶
- AI 原生：設計由 agent 完成；未就緒前不必先開畫布，也無需拖拽表達佈局。
- 審批式改動：在畫布上選中元素，按 ⌘C 複製指針貼回對話說明修改；agent 一次應用一個操作並給出回執。
- 校驗與拒絕：格式側有封閉屬性集合與診斷（細節見倉庫內
SKILL.md、docs/format-v3.md等），便於在「進畫布前」拒絕不合法聲明。
在 DSH 裏的集成¶
同一套代碼既是通用 agent Skill，也是 DSH 插件。裝上插件後（README 說明）：
- skill 自動註冊進 DSH，無需再手動軟鏈到
~/.agents/skills。 - 左側欄出現 JustSkill Design 工作臺，按工作區列出設計 HTML。
- 點擊某個設計文件：在所屬工作區新建會話，切換到該會話，右側欄打開 Canvas；聊天在左、畫布在右，agent 修改可實時刷新。
- Agent 通過
justskill_canvas工具在右側欄打開或聚焦 Canvas；DSH 下不再依賴serve或彈出系統瀏覽器。 - Canvas 未指定文件時，列出當前工作區的設計文件供選擇。
Skill 本體約 1 MB（SKILL.md、references/、design.mjs、lib/、canvas/ 等）；與插件爲同一份代碼。
能力邊界（README 已說明）¶
適合 agent 協作下的 App 級頁面與多屏線框；不替代 Figma 的組件變體、原型、實時多人評審，也不等同於「提示詞直接出可跑全棧應用」的生成器。完整 CSS 工具箱、複雜動效與響應式斷點等不在刻意收窄的範圍內，見倉庫 docs/zh/how-it-works.md#範圍。
安裝與啓用¶
插件在 DSH 進程權限下運行，安裝前請自行查看倉庫源碼與 MIT 許可證。Node 要求 >=18；package.json 中 engines.dsh 爲 >=0.2.1-rc.3 <0.3.0-0。
Web 端（推薦 npm）¶
dsh plugin --profile web add justskill-design
若使用 pnpm 且啓用了 minimumReleaseAge，可能暫時解析到舊版，可固定版本：
dsh plugin --profile web add justskill-design@3.2.1
桌面端¶
先完全退出 DSH App（⌘Q），安裝後重新打開：
dsh plugin --profile desktop add justskill-design
從 GitHub 安裝（不經過 npm）¶
dsh plugin --profile web add github:justskill-ai/justskill-design
本地開發鏈接¶
dsh plugin --profile web add link:"/path/to/justskill-design"
在 DSH 的 Plugins 頁啓用並重啓。桌面端使用同一包，在桌面插件頁安裝即可。
僅作爲通用 Skill（不裝 DSH 插件）¶
各會話臨時使用：
Run `npx skills use "https://github.com/justskill-ai/justskill-design" --skill "justskill-design"` and follow the printed instructions.
全局安裝一次，供 Claude Code、Codex、Cursor、DSH 等使用：
npx skills add justskill-ai/justskill-design -g -y
也可讓 agent 按 https://raw.githubusercontent.com/justskill-ai/justskill-design/main/llms.txt 中的說明安裝，skill 會複製到 ~/.agents/skills/justskill-design；更新可用 npx skills update。
典型用法¶
1. 新建產品描述¶
把需求交給 agent，例如 README 中的筆記 App 示例：
我想做一個筆記 App：記錄我每天值得被記住的事情，以及當時的心情。可以有個日曆展示我的心情晴雨表。
2. 基於現有項目整理風格並出稿¶
讀取一下當前程序的產品設計、理念，幫我整理一份屬於這個程序的設計風格，並使用 justskill-design 出一份設計稿。等我確認設計稿效果後，按照設計重構 UI。
3. 評審與確認¶
agent 設計過程中在 DSH 右側 Canvas 或本地畫布查看；選中元素 ⌘C 複製指針，在對話中說明修改。頁面確認後，再在技術棧中按設計實現代碼。
4. 單獨打開設計文件預覽¶
不通過 DSH 時，可用倉庫 CLI 起本地畫布，例如：
node design.mjs serve examples/alarm.html
examples/ 下有桌面看板、六屏鬧鐘、小程序畫板導入、最小設計頁等示例 HTML，可作格式與複雜度參考。
適用場景與注意¶
適合：
- 與 coding agent 固定搭檔，希望設計規格進 git、與 PR 同審。
- 已在用或打算用 DSH，希望左側工作臺 + 右側 Canvas 與對話一體化。
- 需要 HTML 產物而非 Figma 專有格式，且接受 App 頁面級設計範圍。
注意：
- 本質是 給 agent 的 Skill，不打算脫離 agent 當獨立設計 App 長期使用。
- DSH 插件會擴展 Harness 界面與工具（如
justskill_canvas）；安裝、啓用即表示信任該包在本地 DSH 環境中的行爲，請對照 GitHub 源碼審閱。 - 深度格式、命令與測試 invariant 見倉庫
docs/zh/how-it-works.md、SKILL.md等，本文不展開。
結尾¶
JustSkill Design 把「設計」收成倉庫裏一張可 diff 的 HTML，把「工具」收成 agent 可讀寫的 Skill 目錄；在 DSH 裏則多工作臺與內嵌 Canvas，減少來回切瀏覽器。若你在 Harness 生態裏做工作流類插件選型，可從目錄頁與倉庫 README 的 DSH 專節對照演示 GIF/MP4 再決定是否啓用。
