create-design-system

Name: create-design-system
Author: manalkaff

github.com/manalkaff设计与 UI264101 次安装18 周前更新

代码仓库

关于 create-design-system

create-design-system 是一项技能，可根据现有品牌、代码库或产品制作可复用的设计系统和 UI 套件。它规定了文件路径、令牌文件、文档内容，并要求产出以源材料为依据。

主要功能

01检查品牌与代码库素材
02提取 CSS 色彩和字体令牌
03记录语调与视觉规范
04复现现有 UI 组件
05规定项目目录结构

适用场景

01根据产品代码库构建设计系统
02记录品牌视觉与内容规则
03用现有组件制作可交互审阅的 UI 套件

安装

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

$npx skills add https://github.com/manalkaff/opendesign --skill create-design-system

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

详细介绍

当用户要求基于现有品牌、代码库或产品制作可复用的设计系统或 UI 套件时加载。

设计系统的存放位置

项目的所有设计系统都存放在 ./opendesign/design-systems/<name>/ 下。可以并存多个系统，例如 ./opendesign/design-systems/marketing/、./opendesign/design-systems/product/、./opendesign/design-systems/deck-template/。名称为必填项，应清楚说明系统的用途（品牌界面、产品界面、演示文稿模板、联合品牌合作方）。切勿使用单数形式的 design-system/ 或 main 这类通用名称。

文件夹中只要包含 以下任一项，就会被识别为设计系统：SKILL.md 或 tokens 文件（根目录下的 colors_and_type.css，或嵌套在 tokens/colors_and_type.css 中）。opendesign 检测系统时接受这两种标记。务必同时写入这两项：SKILL.md 使文件夹可作为独立 Agent 技能移植，而 tokens 文件是本技能的规范输出。

必需路径（不可更改）

每个生成的系统都必须写入相对于项目根目录的以下确切路径。opendesign 的自动发现依赖这些路径，偏离路径会导致检测失败。

./opendesign/design-systems/<name>/SKILL.md — 可移植的技能标记。
./opendesign/design-systems/<name>/tokens/colors_and_type.css — 规范 tokens 文件。必须嵌套在 tokens/ 下，不能放在文件夹根目录。这是发现标记。
./opendesign/design-systems/<name>/README.md — 面向用户的索引。

不要将 tokens 文件写入其他路径（不能使用 colors.css、styles/tokens.css，也不能将 colors_and_type.css 直接放在系统文件夹根目录）。不要省略 SKILL.md。不要重命名 opendesign/ 下的 design-systems/ 父目录。

设计系统文件夹的内容

opendesign/design-systems/<name>/
  README.md
  tokens/
    colors_and_type.css
  fonts/
    [font files the brand actually ships]
  assets/
    logos/
    icons/
    imagery/
  brand/
    voice-and-tone.md
    style-notes.md
  ui-kit-<product>/
    components/        # JSX components, one per file
    index.html         # interactive showcase of core screens
  sample-slides/       # only if a deck template was provided

流程

探索所提供的素材。 阅读代码库、Figma 文件（如可用，通过其设计上下文 API）、截图和演示文稿。无论何种情况，都优先使用代码库源文件和 Figma 数据，而非截图。
编写 README。 说明你对品牌的理解，列出查阅过的所有来源，并提供指向文件夹其余内容的索引。
提取 tokens。 将颜色和字体 tokens 写入确切路径 ./opendesign/design-systems/<name>/tokens/colors_and_type.css，不能放在文件夹根目录，也不能重命名文件。同时编写 ./opendesign/design-systems/<name>/SKILL.md，以便识别该文件夹并支持移植。定义原始变量（--fg-1、--fg-2、--bg-1、--accent-1、字体系列、字重、字号阶梯）和语义变量（--h1、--h2、--body、--caption、--surface-primary、--border-subtle 等）。语义变量应引用原始变量。
记录内容基础规范。 包括语态、语气、大小写规则（标题式大小写还是句式大小写）、标点规则、表情符号的使用、数字格式，以及品牌如何与用户交流、如何介绍自身。
记录视觉基础规范。 包括颜色（用途，不只是色板）、字体（层级、搭配、使用规则）、间距（阶梯及使用场景）、背景（处理方式及各自的使用场景）、动效（时长、缓动、常见模式）、悬停和按压状态、边框、阴影、圆角、卡片样式、图像风格。
记录图标规范。 包括图标字体、SVG 精灵图、栅格素材、表情符号政策和 Unicode 用法。将真实素材文件复制到 assets/。切勿手绘。
为每款产品构建 UI 套件。 使用 JSX 逐像素复刻现有组件，每个文件包含一个组件，并由 tokens 驱动。提供 index.html，组装核心屏幕，便于交互式评审套件。
构建示例幻灯片。 仅在提供了演示文稿模板时执行。遵循演示文稿技能的约定。

硬性规则

只要代码库可用，就绝不能仅凭截图重建 UI。代码库是事实来源；截图会丢失信息。
绝不读取 SVG 源文件。它们会占用上下文，却没有任何好处。将文件复制到 assets/，并按文件名引用。
绝不手绘 SVG。复制真实资源。
绝不臆造组件。UI 工具包用于重现已有内容。如果源代码中没有某个组件，就将其省略，或用标注清楚的占位符代替。不要自行解读并补全缺失部分。
如果无法访问关键资源（代码库、Figma 文件、品牌指南），就停下来询问。不要凭猜测继续。
避免使用业内已经过度泛滥的视觉设计套路：蓝紫渐变、用表情符号充当功能卡片、带彩色左侧强调条的圆角卡片。

结束任务

结尾时明确邀请用户迭代：列出你有把握的部分、不确定的部分，以及在系统被视为规范版本之前希望用户确认的决定。

支持 Markdown

登录后评论