前言¶

用 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

核心功能¶

产物与版本化¶

仓库里被版本化的主要是两样：

设计不是封闭在某 App 内的专有格式，而是合法、自包含的 HTML，便于 git diff、在 pull request 里评审。

Agent 与人如何协作¶

• AI 原生：设计由 agent 完成；未就绪前不必先开画布，也无需拖拽表达布局。
• 审批式改动：在画布上选中元素，按 ⌘C 复制指针贴回对话说明修改；agent 一次应用一个操作并给出回执。
• 校验与拒绝：格式侧有封闭属性集合与诊断（细节见仓库内 SKILL.md、docs/format-v3.md 等），便于在「进画布前」拒绝不合法声明。

在 DSH 里的集成¶

同一套代码既是通用 agent Skill，也是 DSH 插件。装上插件后（README 说明）：

1. skill 自动注册进 DSH，无需再手动软链到 ~/.agents/skills。
2. 左侧栏出现 JustSkill Design 工作台，按工作区列出设计 HTML。
3. 点击某个设计文件：在所属工作区新建会话，切换到该会话，右侧栏打开 Canvas；聊天在左、画布在右，agent 修改可实时刷新。
4. Agent 通过 justskill_canvas 工具在右侧栏打开或聚焦 Canvas；DSH 下不再依赖 serve 或弹出系统浏览器。
5. 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 再决定是否启用。

• 插件目录：https://www.skillhub.cn/plugins/justskill-ai/justskill-design
• GitHub：https://github.com/justskill-ai/justskill-design