内容
# 设计系统内存工具包
[](https://github.com/rabindranath1311/dsk/actions/workflows/ci.yml)
[](LICENSE)
一个独立的工具包，为产品设计系统提供**内存**——令牌、组件、使用规则、模式、流程和屏幕——可供人类和AI编码助手读取。一个文件夹 = 一个设计系统。它**构建**设计系统，**显示**它，并让**代理**在MCP上使用它。
**网站：** https://rabindranath1311.github.io/dsk-website/ · **工作原理：** [HOW-IT-WORKS.md](HOW-IT-WORKS.md)
## 为什么
设计系统通常作为部落知识、零散的Figma文件和过时的Wiki存在。代理（和新队友）无法使用这些。dsk将设计系统存储为结构化、可版本控制的数据，与代码一起存放 - 每个组件都有明确的“何时使用 / 何时不使用”的规则 - 以便AI助手可以选择正确的组件、遵守指南，甚至可以创建新的条目。
## 三个方面（在一个核心上）
- **`@dsk/core`** — 内核：存储（人类可读的文件仓库或SQLite）、节点模型、DTCG设计令牌、导出器。真实来源。
- **`@dsk/cli`** — `dsk` 命令：**构建器**（`init`、`token`、`component`、`pattern`、`guideline`、`import`、`export`、`feature`、`recommend`、`lint`）。
- **`@dsk/server` + `@dsk/web`** — `dsk serve`: **查看器** - React可视化工具 + JSON API + MCP端点，合在一个进程中。
- **`@dsk/mcp`** — **代理接口**：MCP服务器Claude Code（或任何MCP客户端）插入以读取、检查和编写设计系统。
## 快速开始
需要 Node.js 20+。
```sh
git clone https://github.com/rabindranath1311/dsk
cd dsk
npm install
# 在此文件夹中创建一个设计系统并加载示例种子
npm run dsk -- init --name "Acme"
npm run dsk -- import examples/seed.acme.json
# 构建可视化工具一次，然后提供服务
npm run build:web
npm run serve # → http://localhost:4321
```
然后从命令行编辑并观察投影重新生成：
```sh
npm run dsk -- token set color.brand.primary "#1F6FEB"
npm run dsk -- component new IconButton --level atom --when "space-constrained toolbars"
npm run dsk -- export # → design-system/tokens.css + design.md + AGENTS.md + SKILL.md
```
更喜欢完全人类可读的存储？`dsk init --files` 将所有内容保留为markdown文件，而不是SQLite - 在PR中可区分和审查。
## 从Claude Code（MCP）使用它
```sh
npm run dsk -- mcp-config # 写入.mcp.json（HTTP → http://localhost:4321/mcp）
npm run serve # 保持服务器运行
```
在Claude Code中打开文件夹，它会自动连接。代理可以按意图搜索组件、检查使用规则、检查建议的UI是否符合指南以及编写令牌/组件/模式 - 所有这些都针对可视化工具显示的同一个存储。
## 内存中有什么
| 类型 | 它捕获什么 |
| --- | --- |
| 令牌 | DTCG格式的设计令牌（颜色、空格、半径、类型...）带有别名 |
| 组件 | 原子设计级别、意图、变体、*使用时 / 不使用时*、做/不做、辅助功能注释、使用的令牌 |
| 模式和指南 | 循环解决方案和控制组件的交叉规则 |
| 信息架构和流程 | 应用程序地图和用户流程作为可拖动的节点图 |
| 屏幕 | 目的、状态和每个屏幕使用的组件 |
| 文档和资产 | PRD、品牌参考、研究、图标/图像 - 代理人读取的依据 |
## 开发
```sh
npm install
npm test # vitest
npm run typecheck # 跨所有包的tsc
```
存储是真实来源；其他一切都是投影。编辑令牌并重新导出会生成`tokens.css` + `design.md`。构建器（CLI）、查看器（`dsk serve`）和代理接口（MCP）是同一个`@dsk/core`上的三个方面。
## 许可证
[MIT](LICENSE)
