# Design System

用户要建立或修改设计系统时用：品牌的颜色、文字样式、间距与圆角 tokens，给智能体看的品牌手册 README，bundle...

- Repository: https://github.com/JimLiu/baocut (1645 stars)
- Category: Design
- License: see repository
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add JimLiu/baocut --skill design-system -g -a claude-code -y`
Codex: `npx skills add JimLiu/baocut --skill design-system -g -a codex -y`
Cursor: `npx skills add JimLiu/baocut --skill design-system -g -a cursor -y`
Gemini CLI: `npx skills add JimLiu/baocut --skill design-system -g -a gemini-cli -y`

## Description

用户要建立或修改设计系统时用：品牌的颜色、文字样式、间距与圆角 tokens，给智能体看的品牌手册 README，bundle 与预览，标志、图标与字体。在工作目录写一个设计系统目录（design-system.json 加 tokens.json、README.md、components/、assets/、fonts/），可以从代码仓库或设计工具里的真实来源整理；图片、视频与 PDF 导入设计系统的素材库，校验通过后线程里出现设计系统卡片，用户在功能区预览与编辑；做好的设计系统可以装进设计稿。

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 设计系统：存成文件的设计系统

设计系统是会话工作目录里（或用户指定的目录里）的一个目录 `<system>/`，它把内容存在**它自己的文件**里；图标和图片放在它的素材库 `<system>/_blobs/` 里，由 index 给它们命名。下文说的「页面」是这个设计系统在 BaoCut 里的标签页：线程里它的卡片会打开这个页面，用来预览和编辑。

**只在 `<system>/` 下写文件**，绝不写进 `<system>/_blobs/`（那里由上传填充）。

## 存成文件的设计系统

它的 index 是 `<system>/design-system.json`，不是别的文件；index 里有一个 `createdOnFiles` 或 `convertedFrom` 对象，也就是 marker（先读它；没有 `<system>/design-system.json`：是空的设计系统，见「新建」；如果要做的是清理，停下来并说明）：
`{"v":3, "layout":"files", "createdOnFiles":{"v":1,"at":"2026-09-14T18:20:00Z"}, "title":"Acme", "namespace":"Acme", "libraries":[{"name":"react","version":"18"},{"name":"react-dom","version":"18"}], "sections":{}, "groups":["Logos","Icons"], "assetGroups":{"Logos":{"name":"Logos","tile":"l","order":[],"files":{}}}, "blobs":{}, "docs":{"readme":"README.md","sections":[]}}`。
index 里的 `"editing": "off"` 会关掉页面上的编辑；有它，或者有一个没标记为已升级的 `source` entry，页面就会提供清理（「Finish the migration」）。用户用文字而不是点那个按钮要求清理时，先问用户是否要把它的文件重新整理成这种格式。然后按「修改」来做。这种格式里没有位置的文件（kits、部分 foundations 页面）原地不动。保留作者的原话；不要以作者的口吻添加任何内容。图片、字体和脚本仍然是文件，移到 `format.md` 规定的位置，修好路径：一个都不上传，一个都不内联，不管这几页说明在别处怎么说。删除文件只按（`craft.md`：挪到一边）说的做；删不掉的都点名。等文件都符合 `format.md` 之后，在**最后**一次调用里去掉 `editing` 和 `source`。其他改动直接做，两者都保留。
`assets/<Group>/` 下凡不是文本的东西（图标、标志、图片，SVG 也算，视频、PDF）都是素材上传，由一条 record `assetGroups.<Group>.files.<file>` 命名：`{"name", "blob": "<id>", "size", "type"}`：`name` = 它在素材组目录下的路径（`acme-mark.svg`），键与它相同，只是 `[A-Za-z0-9_./-]` 以外的字节写成 `~` 加两位十六进制；`<id>` 取自上传返回的 `/_blob/<id>`；`size` 以字节计；`type` 是它的媒体类型。素材组的 `order` 按 tile 顺序列出这些名字；`groups` 给素材组排序。`sections`、`blobs` 和 `docs` 留给页面去管（新 index 里分别是 `{}`、`{}`、`{"sections":[]}`）。
修改时：只写你改过的路径。index 只写**一次**，放在你这轮工作的**最后**，绝不夹在之前那些零碎的写入里（一次写入会替换整个文件：早先读到的副本会撤销一次改名，或者丢掉别人在此期间加上的某个图标的 record）：写之前当场再读一遍，改这些（它的 `lastChange`，以及你的改动涉及的键：title、libraries、某条素材 record），其他每个键和 marker 都保留。**你**新建的设计系统（还没有 index）得到一份 `<system>/design-system.json`，`createdOnFiles` 完全照上面写，`at` = 现在。没有 marker 的 `<system>/design-system.json` 不是 index：页面以只读方式打开；说明这一点，不要往它上面写任何东西。

The rest: https://github.com/JimLiu/baocut/blob/HEAD/skills/baocut/built-in-skills/design-system/SKILL.md