mcpField
U
use-design-system

use-design-system

github.com/bluzir设计与 UI10751 次安装27 周前更新
代码仓库

关于 use-design-system

用于将组织级设计系统载入当前项目的 Skill，适合使用团队已有设计规范的项目。它读取 tokens.json，并复制为项目级设计令牌文件；若存在预览页，还可提供打开预览的选项。

主要功能

  1. 01列出可用设计系统
  2. 02检查指定系统目录
  3. 03读取 tokens.json
  4. 04复制令牌到项目目录
  5. 05提供预览页打开选项

适用场景

  1. 01在新项目中载入组织设计令牌
  2. 02为后续设计工作准备项目级令牌
  3. 03查看设计系统的 HTML 预览

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/bluzir/claude-code-design --skill use-design-system

安装后在 Claude Code 中输入/use-design-system确认已加载。

详细介绍

使用设计系统

将组织级设计系统从 ~/.claude/design-systems/<name>/ 加载到当前项目中。

步骤

  1. 如果缺少 $0（名称）→ Bash(ls ~/.claude/design-systems/ 2>/dev/null) 并显示列表，询问用户要使用哪一个。

  2. 验证文件夹是否存在： Bash(test -d ~/.claude/design-systems/$0 && echo ok || echo missing)。 如果不存在 → 告知用户，列出可用项，然后停止。

  3. 读取令牌文件： Read ~/.claude/design-systems/$0/tokens.json

  4. 复制到项目级目录，以便后续更快读取：

    Bash(mkdir -p .claude)
Bash(cp ~/.claude/design-systems/$0/tokens.json .claude/design-tokens.json)

  5. 如果 ~/.claude/design-systems/$0/preview.html 存在，询问用户是否要通过 /preview ~/.claude/design-systems/$0/preview.html 打开它进行视觉参考——这样用户可以在开始工作前回忆起该系统的外观。

  6. 报告：“已加载设计系统 $0 — 颜色、字体、间距、圆角已写入 .claude/design-tokens.json。后续的 /make-deck、/interactive-prototype、/wireframe 将自动使用它。”

何时不使用此技能

  • 用户要从代码库／截图／Figma 中提取一个新系统 → 改用 /create-design-system
  • 用户明确表示“忽略现有系统，我想要全新的” → 使用“从头开始”模式，将任务转交给 /create-design-system

注册表格式提醒

~/.claude/design-systems/
├── acme/
│   ├── tokens.json           # required
│   └── preview.html          # optional
├── company-x/
│   └── tokens.json
└── minimal-mono/
    └── tokens.json

tokens.json 架构：

{
  "name": "acme",
  "colors": { "primary": "#D97757", "accent": "...", "bg": "...", "text": "..." },
  "fonts": { "display": "...", "body": "...", "mono": "..." },
  "spacing": [4, 8, 12, 16, 24, 32, 48, 64],
  "radii": { "sm": 4, "md": 8, "lg": 16 },
  "shadows": [...]
}

评论

支持 Markdown