创建你的设计系统 Skill

从模板开始,或上传你的设计截图,导出可被 AI 编码工具读取的 Skill 包

1

系统名称

2

快速生成

从一个颜色开始

品牌主色

点击「生成」用此色派生整套色板

3

颜色

语义化 Token
颜色 TOKEN7
4

字体排版

字体 TOKEN3 styles
名称字体字号字重
5

尺度

间距与圆角

间距 Spacing

圆角 Rounded

6

组件

将 Token 映射到 UI
背景色
文字色
圆角
内边距
背景色
文字色
边框色
圆角
内边距
背景色
文字色
圆角
内边距
背景色
文字色
边框色
圆角
内边距
7

阴影

卡片投影样式
阴影 TOKEN2 styles
%
X
Y
模糊
扩展
%
X
Y
模糊
扩展
8

设计说明

告诉 AI 为什么这样设计

实时预览

Design System

一句话描述设计系统的风格和意图。

组件预览

card

这是一个卡片组件,使用你定义的设计 Token 渲染。

更多组件

ActiveSuccessError
Notifications
JD

John Doe

Designer

阴影样式

light

medium

色板

primary

secondary

tertiary

neutral

on-tertiary

border

error

Linter

3 warnings3 info
INFOcontrast-ratio
button-primary: 15.33:1 — passes WCAG AA
INFOcontrast-ratio
card: 18.09:1 — passes WCAG AA
INFOcontrast-ratio
input: 18.09:1 — passes WCAG AA
WARNorphaned-tokens
secondary, neutral, error 未被引用
INFOtoken-summary
7 colors · 3 typography · 3 spacing · 2 rounded · 4 components
00-brand-foundation.md
<!-- Generated by Draft D | Layer 00: Brand Foundation -->

# My Brand — 品牌基础 & 设计原则

## 产品信息

- **品牌名称**:My Brand
- **设计系统**:基于 Token 驱动的语义化设计系统
- **图标库**:Lucide Icons(import 自 `lucide-react`)

## 设计理念

本设计系统追求年轻、活力、可信的视觉表达。强调操作的即时反馈和层级清晰的信息组织,让产品在保持专业感的同时拥有鲜明的个性。组件遵循 8px 网格对齐,颜色克制使用强调色作为视觉锚点。

## 设计原则

1. **清晰**:信息层级分明,操作路径可预期
2. **高效**:减少不必要的装饰,让用户专注核心任务
3. **一致**:所有页面遵循同一套 Token 和组件规范
4. **专业**:视觉风格稳重、可信赖,符合企业级产品定位
5. **极简**:克制的色彩运用,靠层级而非装饰区分内容

## 语气风格

- **界面文案**:简洁直接,不用感叹号,不用营销语气
- **操作引导**:用动词开头(如「Create Project」「Save Changes」)
- **错误提示**:说明原因 + 给出修复建议
- **表单 Label**:使用 Sentence case
- **空状态**:提供明确的下一步操作引导

## Do's and Don'ts

✓ 使用语义化 Token 引用颜色,不要硬编码 HEX 值
✓ 强调色仅用于关键操作和角标,不大面积铺底
✓ 间距使用 4px 的倍数
✗ 不要在同一页面使用超过 3 种强调色
✗ 不要使用纯黑 #000000 作为文字色
✗ 不要在小于 12px 的文字上使用 light 字重

How It Works

导出的 Skill 包是什么、怎么用

{brand}-skill/12 files
00-brand-foundation.md10-global-styles.md20-components-index.md21-buttons-and-actions.md22-form-inputs.md23-data-display.md24-navigation.md25-feedback-overlays.md30-page-patterns.md40-design-canvas.md50-tailwind-mapping.mdREADME.md

解压后放进 AI 工具的规则目录,写代码时自动加载

Cursor.cursor/rules/
Kiro.kiro/steering/
Claude CodeCLAUDE.md 引用

同时支持

CodexWindsurfGitHub Copilot