@leotang92/dsh-claude-design-system 0.0.0-stage → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +27 -0
- package/NOTICE.md +25 -0
- package/README.md +21 -2
- package/cordis.patch.yml +7 -0
- package/docs/DETAIL.md +27 -0
- package/docs/DETAIL.zh.md +16 -0
- package/icon.svg +11 -0
- package/lib/client.js +1800 -0
- package/lib/index.js +878 -0
- package/locale/en.json +7 -0
- package/locale/zh.json +7 -0
- package/package.json +69 -4
- package/skills/claude-design-system/SKILL.md +299 -0
- package/skills/claude-design-system/artifact-type/demo.json +1 -0
- package/skills/claude-design-system/artifact-type/reference/cover.md +108 -0
- package/skills/claude-design-system/artifact-type/reference/craft.md +162 -0
- package/skills/claude-design-system/artifact-type/reference/format.md +206 -0
- package/skills/claude-design-system/artifact-type/reference/from-code.md +200 -0
- package/skills/claude-design-system/artifact-type/reference/from-design-tool.md +240 -0
- package/skills/claude-design-system/artifact-type/reference/sample-seazar-tokens.json +370 -0
- package/skills/claude-design-system/scripts/artifact.mjs +3785 -0
- package/skills/claude-design-system/scripts/editor/artifact-type/run.html +40 -0
- package/skills/claude-design-system/scripts/editor/artifact-type/vendor/react-dom.production.min.js +267 -0
- package/skills/claude-design-system/scripts/editor/artifact-type/vendor/react.production.min.js +31 -0
- package/skills/claude-design-system/scripts/editor/assets/anthropicons-fizzy-lake-BSKaZSiT.woff2 +0 -0
- package/skills/claude-design-system/scripts/editor/assets/index-CfRb9gGr.js +869 -0
- package/skills/claude-design-system/scripts/editor/assets/index-CkwF-CXd.css +1 -0
- package/skills/claude-design-system/scripts/editor/index.html +19 -0
- package/skills/claude-design-system/scripts/editor/share-ui.js +208 -0
- package/skills/claude-design-system/scripts/editor/third-party-licenses.txt +566 -0
- package/skills/claude-design-system/scripts/server.mjs +5223 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
This MIT License covers only the original plugin host code adapted from
|
|
2
|
+
Jim Liu 宝玉's baoyu-design DeepSeek Harness plugins, and the packaging work in
|
|
3
|
+
this repository. It does not cover material from Anthropic or third-party
|
|
4
|
+
open-source code listed in NOTICE.md, which keep their own terms.
|
|
5
|
+
|
|
6
|
+
MIT License
|
|
7
|
+
|
|
8
|
+
Copyright (c) 2026 Jim Liu 宝玉
|
|
9
|
+
Copyright (c) 2026 tanglei168
|
|
10
|
+
|
|
11
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
12
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
13
|
+
in the Software without restriction, including without limitation the rights
|
|
14
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
15
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
16
|
+
furnished to do so, subject to the following conditions:
|
|
17
|
+
|
|
18
|
+
The above copyright notice and this permission notice shall be included in all
|
|
19
|
+
copies or substantial portions of the Software.
|
|
20
|
+
|
|
21
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
22
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
23
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
24
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
25
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
26
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
27
|
+
SOFTWARE.
|
package/NOTICE.md
ADDED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
# Notices
|
|
2
|
+
|
|
3
|
+
These DeepSeek Harness plugins package the design skills vendored from
|
|
4
|
+
[JimLiu/baoyu-design](https://github.com/JimLiu/baoyu-design), plus the
|
|
5
|
+
baoyu-design DeepSeek Harness plugin host (`lib/`, `cordis.patch.yml`,
|
|
6
|
+
`locale/`, `docs/`, `icon.svg`).
|
|
7
|
+
|
|
8
|
+
## 1. Plugin host and packaging: MIT
|
|
9
|
+
|
|
10
|
+
- Jim Liu 宝玉's DeepSeek Harness plugin host code (MIT).
|
|
11
|
+
- Packaging in this repository (MIT).
|
|
12
|
+
|
|
13
|
+
See LICENSE.
|
|
14
|
+
|
|
15
|
+
## 2. Material from Anthropic: not MIT
|
|
16
|
+
|
|
17
|
+
Skill instructions, Artifact-type reference docs, reconstructed editors, icon
|
|
18
|
+
fonts, and related material stay Anthropic's. This packaging grants no license
|
|
19
|
+
to that material. Full upstream terms:
|
|
20
|
+
https://github.com/JimLiu/baoyu-design/blob/main/NOTICE.md
|
|
21
|
+
|
|
22
|
+
## 3. Third-party open-source code
|
|
23
|
+
|
|
24
|
+
Editor bundles keep their own licenses in each skill's
|
|
25
|
+
`scripts/editor/third-party-licenses.txt` when present.
|
package/README.md
CHANGED
|
@@ -1,3 +1,22 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @leotang92/dsh-claude-design-system
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A [DeepSeek Harness](https://github.com/deepseek-ai/deepseek-harness) plugin that adds the **claude-design-system** skill from
|
|
4
|
+
[this repository](https://github.com/tanglei168/T-skills): The agent writes design systems as files and opens them in a local design-system page.
|
|
5
|
+
|
|
6
|
+
## Install
|
|
7
|
+
|
|
8
|
+
In the DeepSeek Harness desktop app: **Plugins** → **Add plugin** → enter `@leotang92/dsh-claude-design-system` in **Package name or
|
|
9
|
+
address** → **Install**, and turn the plugin on. From the command line, for a CLI profile such as `web`:
|
|
10
|
+
|
|
11
|
+
```sh
|
|
12
|
+
dsh plugin --profile web add @leotang92/dsh-claude-design-system
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
Then quit and reopen the app, start a new session, and type `/claude-design-system`.
|
|
16
|
+
|
|
17
|
+
To pin a version: `@leotang92/dsh-claude-design-system@0.1.1`.
|
|
18
|
+
|
|
19
|
+
## Source
|
|
20
|
+
|
|
21
|
+
Skill files come from `tools/claude-design-system/` in this repository. The plugin host (`lib/`) is adapted from
|
|
22
|
+
baoyu-design's DeepSeek Harness plugins under MIT; Anthropic material stays Anthropic's. See NOTICE.md.
|
package/cordis.patch.yml
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
# @leotang92/dsh-claude-design-system bundle patch: installing the package (the Plugins page, or
|
|
2
|
+
# `dsh plugin --profile <name> add <spec>`) adds it to the profile's bundles,
|
|
3
|
+
# and this layer mounts its one plugin row, which registers the claude-design-system
|
|
4
|
+
# skill with the profile's skill registry.
|
|
5
|
+
- insert:
|
|
6
|
+
- id: claude-design-system
|
|
7
|
+
name: "@leotang92/dsh-claude-design-system"
|
package/docs/DETAIL.md
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
# Claude Design System
|
|
2
|
+
|
|
3
|
+
Adds the **claude-design-system** skill to DeepSeek Harness. Ask for a design system ("a design system from this
|
|
4
|
+
repo's styles", "a brand kit for a tea shop") and the agent writes it as files in your workspace: a folder with
|
|
5
|
+
`project/design-system.json`, `tokens.json`, a README brand book, component previews, fonts and assets. It then starts
|
|
6
|
+
a local design-system page and gives you its link. claude-slides and claude-design can use the systems it makes.
|
|
7
|
+
|
|
8
|
+
## Using it
|
|
9
|
+
|
|
10
|
+
- Ask for a design system in plain words, or type `/claude-design-system` to call the skill by name.
|
|
11
|
+
- Open the link the agent gives you. In the desktop app it opens in the right sidebar's Browser, beside the
|
|
12
|
+
conversation (Settings → General → Open chat links in: **In-App Sidebar**, the default).
|
|
13
|
+
- On the page you browse and edit the tokens, colors, type, components and assets. Your edits are saved back into the
|
|
14
|
+
same files, and the agent's changes show up in the page as it writes them.
|
|
15
|
+
- Comment on a token, color, type style, component, asset or section (Comment, or C). Tick **Send to Agent** and the
|
|
16
|
+
agent picks it up at once, even when the conversation is idle: it changes the system and replies in the comment. The
|
|
17
|
+
comment also shows in the chat as a card; **View thread** on the card opens it in the page. The box is there while
|
|
18
|
+
comments can reach the agent, which starts each time it gives you the link. After restarting the app, ask the agent
|
|
19
|
+
to open the system again to bring it back.
|
|
20
|
+
- To change a system later, ask the agent to revise the folder that holds its `project/design-system.json`.
|
|
21
|
+
- A workspace that has its own `claude-design-system` skill (in `.agents/skills/` or `.dsh/skills/`) uses that copy
|
|
22
|
+
instead of this plugin's.
|
|
23
|
+
|
|
24
|
+
## What runs where
|
|
25
|
+
|
|
26
|
+
The page is served by a small server on 127.0.0.1 that the skill's script starts in the background, one per system.
|
|
27
|
+
It reads and writes only that system's folder. The desktop app's own Node runtime runs it; nothing else is installed.
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
# Claude 设计系统
|
|
2
|
+
|
|
3
|
+
给 DeepSeek Harness 加上 **claude-design-system** 技能。让 Agent 做一套设计系统("从这个仓库的样式整理一套设计系统"、"给一家茶饮店做一套品牌规范"),它会在工作区里把设计系统写成文件:一个文件夹,里面有 `project/design-system.json`、`tokens.json`、README 品牌手册、组件预览、字体和素材。写完它会启动本地设计系统页面,把链接给你。claude-slides 和 claude-design 都可以套用它做出来的设计系统。
|
|
4
|
+
|
|
5
|
+
## 怎么用
|
|
6
|
+
|
|
7
|
+
- 直接用自然语言要设计系统,或者输入 `/claude-design-system` 点名调用这个技能。
|
|
8
|
+
- 打开 Agent 给的链接。桌面版里它会在右侧栏的浏览器里打开,和对话并排(设置 → 通用 → 聊天链接打开方式:**应用内侧栏**,默认就是这个)。
|
|
9
|
+
- 页面上可以浏览和修改设计令牌、颜色、字体样式、组件和素材。你的修改会存回同一批文件;Agent 写的改动也会实时出现在页面上。
|
|
10
|
+
- 可以给某个令牌、颜色、字体样式、组件、素材或章节加评论(点评论按钮或按 C)。勾上 **Send to Agent** 发出去,Agent 会马上接手,对话空闲时也一样:它改好设计系统,再在评论里回复你。评论也会以卡片的形式出现在对话里,点卡片上的 **View thread**(中文界面是「查看评论」)会在页面里打开这条评论。这个勾选框只在评论能发给 Agent 时出现;Agent 每次给你页面链接时都会开始等评论。重启应用后,让 Agent 再打开一次这套设计系统就能恢复。
|
|
11
|
+
- 以后要改,让 Agent 修改那个装着 `project/design-system.json` 的文件夹即可。
|
|
12
|
+
- 如果工作区自己带了 `claude-design-system` 技能(在 `.agents/skills/` 或 `.dsh/skills/` 里),这个工作区会用它自己那份,而不是插件里的。
|
|
13
|
+
|
|
14
|
+
## 运行方式
|
|
15
|
+
|
|
16
|
+
页面由技能脚本在后台启动的一个本地服务(127.0.0.1)提供,一套设计系统一个,只读写这套设计系统自己的文件夹。用的是桌面版自带的 Node,不需要另外安装任何东西。
|
package/icon.svg
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
|
|
2
|
+
<rect width="64" height="64" rx="14" fill="#D97757"/>
|
|
3
|
+
<rect x="12" y="12" width="40" height="40" rx="4" fill="#FFF7F2"/>
|
|
4
|
+
<circle cx="22" cy="22" r="5" fill="#D97757"/>
|
|
5
|
+
<circle cx="32" cy="22" r="5" fill="#E9B8A3"/>
|
|
6
|
+
<circle cx="42" cy="22" r="5" fill="#8A4B33"/>
|
|
7
|
+
<rect x="17" y="32" width="14" height="3.5" rx="1.75" fill="#D97757"/>
|
|
8
|
+
<rect x="17" y="39" width="22" height="2.5" rx="1.25" fill="#E9B8A3"/>
|
|
9
|
+
<rect x="35" y="31" width="12" height="6" rx="3" fill="#D97757"/>
|
|
10
|
+
<rect x="17" y="44" width="16" height="2.5" rx="1.25" fill="#E9B8A3"/>
|
|
11
|
+
</svg>
|