重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
ui-design-system by borghei/claude-skills
npx skills add https://github.com/borghei/claude-skills --skill ui-design-system生成设计令牌,创建色彩调色板,计算排版比例,构建组件系统,并准备开发人员交付文档。
在您需要时使用此技能:
场景: 您有一个品牌色,需要一个完整的设计令牌系统。
步骤:
识别品牌色和风格
modern | | 广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
classicplayful使用脚本生成令牌
python scripts/design_token_generator.py "#0066CC" modern json
查看生成的类别
导出为目标格式
# CSS 自定义属性
python scripts/design_token_generator.py "#0066CC" modern css > design-tokens.css
# SCSS 变量
python scripts/design_token_generator.py "#0066CC" modern scss > _design-tokens.scss
# 用于 Figma/工具的 JSON
python scripts/design_token_generator.py "#0066CC" modern json > design-tokens.json
验证可访问性
场景: 您需要使用设计令牌来构建组件库。
步骤:
定义组件层次结构
将令牌映射到组件
| 组件 | 使用的令牌 |
|---|---|
| Button | colors, sizing, borders, shadows, typography |
| Input | colors, sizing, borders, spacing |
| Card | colors, borders, shadows, spacing |
| Modal | colors, shadows, spacing, z-index, animation |
尺寸变体:
sm: height 32px, paddingX 12px, fontSize 14px
md: height 40px, paddingX 16px, fontSize 16px
lg: height 48px, paddingX 20px, fontSize 18px
颜色变体:
primary: background primary-500, text white
secondary: background neutral-100, text neutral-900
ghost: background transparent, text neutral-700
4. 记录组件 API
* 带有类型的 Props 接口
* 变体选项
* 状态处理(hover, active, focus, disabled)
* 可访问性要求
5. 参考: 参见 references/component-architecture.md
场景: 您需要断点、流体排版或响应式间距。
步骤:
| 名称 | 宽度 | 目标 |
|---|---|---|
| xs | 0 | 小手机 |
| sm | 480px | 大手机 |
| md | 640px | 平板电脑 |
| lg | 768px | 小型笔记本电脑 |
| xl | 1024px | 台式机 |
| 2xl | 1280px | 大屏幕 |
公式:clamp(min, preferred, max)
/* 在 320px 到 1200px 视口之间,从 16px 变化到 24px */
font-size: clamp(1rem, 0.5rem + 2vw, 1.5rem);
预计算比例:
--fluid-h1: clamp(2rem, 1rem + 3.6vw, 4rem);
--fluid-h2: clamp(1.75rem, 1rem + 2.3vw, 3rem);
--fluid-h3: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
--fluid-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
3. 设置响应式间距
| 令牌 | 移动端 | 平板 | 桌面 |
|---|---|---|---|
| --space-md | 12px | 16px | 16px |
| --space-lg | 16px | 24px | 32px |
| --space-xl | 24px | 32px | 48px |
| --space-section | 48px | 80px | 120px |
references/responsive-calculations.md场景: 您需要将设计令牌交付给开发团队。
步骤:
以所需格式导出令牌
# 用于 CSS 项目
python scripts/design_token_generator.py "#0066CC" modern css
# 用于 SCSS 项目
python scripts/design_token_generator.py "#0066CC" modern scss
# 用于 JavaScript/TypeScript
python scripts/design_token_generator.py "#0066CC" modern json
准备框架集成
React + CSS 变量:
import './design-tokens.css';
<button className="btn btn-primary">Click</button>
Tailwind 配置:
const tokens = require('./design-tokens.json');
module.exports = {
theme: {
colors: tokens.colors,
fontFamily: tokens.typography.fontFamily
}
};
styled-components:
import tokens from './design-tokens.json';
const Button = styled.button`
background: ${tokens.colors.primary['500']};
padding: ${tokens.spacing['2']} ${tokens.spacing['4']};
`;
3. 与 Figma 同步
* 安装 Tokens Studio 插件
* 导入 design-tokens.json
* 令牌自动与 Figma 样式同步
4. 交付清单
* 令牌文件已添加到项目
* 构建流水线已配置
* 主题/CSS 变量已导入
* 组件库已对齐
* 文档已生成
5. 参考: 参见 references/developer-handoff.md
根据品牌色生成完整的设计令牌系统。
| 参数 | 值 | 默认值 | 描述 |
|---|---|---|---|
| brand_color | 十六进制颜色 | #0066CC | 品牌主色 |
| style | modern, classic, playful | modern | 设计风格预设 |
| format | json, css, scss, summary | json | 输出格式 |
示例:
# 生成 JSON 令牌(默认)
python scripts/design_token_generator.py "#0066CC"
# 经典风格,CSS 输出
python scripts/design_token_generator.py "#8B4513" classic css
# 活泼风格,摘要视图
python scripts/design_token_generator.py "#FF6B6B" playful summary
输出类别:
| 类别 | 描述 | 关键值 |
|---|---|---|
| colors | 色彩调色板 | primary, secondary, neutral, semantic, surface |
| typography | 字体系统 | fontFamily, fontSize, fontWeight, lineHeight |
| spacing | 8pt 网格 | 0-64 比例,语义化(xs-3xl) |
| sizing | 组件尺寸 | container, button, input, icon |
| borders | 边框值 | radius(按风格), width |
| shadows | 阴影样式 | none 到 2xl, inner |
| animation | 动效令牌 | duration, easing, keyframes |
| breakpoints | 响应式 | xs, sm, md, lg, xl, 2xl |
| z-index | 层级系统 | base 到 notification |
| 步骤 | 亮度 | 饱和度 | 用例 |
|---|---|---|---|
| 50 | 95% 固定 | 30% | 微妙背景 |
| 100 | 95% 固定 | 38% | 浅色背景 |
| 200 | 95% 固定 | 46% | 悬停状态 |
| 300 | 95% 固定 | 54% | 边框 |
| 400 | 95% 固定 | 62% | 禁用状态 |
| 500 | 原始 | 70% | 基础/默认颜色 |
| 600 | 原始 × 0.8 | 78% | 悬停(深色) |
| 700 | 原始 × 0.6 | 86% | 激活状态 |
| 800 | 原始 × 0.4 | 94% | 文本 |
| 900 | 原始 × 0.2 | 100% | 标题 |
| 尺寸 | 值 | 计算 |
|---|---|---|
| xs | 10px | 16 ÷ 1.25² |
| sm | 13px | 16 ÷ 1.25¹ |
| base | 16px | 基准 |
| lg | 20px | 16 × 1.25¹ |
| xl | 25px | 16 × 1.25² |
| 2xl | 31px | 16 × 1.25³ |
| 3xl | 39px | 16 × 1.25⁴ |
| 4xl | 49px | 16 × 1.25⁵ |
| 5xl | 61px | 16 × 1.25⁶ |
| 级别 | 正常文本 | 大文本 |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
大文本:≥18pt 常规或 ≥14pt 粗体
| 方面 | Modern | Classic | Playful |
|---|---|---|---|
| 无衬线字体 | Inter | Helvetica | Poppins |
| 等宽字体 | Fira Code | Courier | Source Code Pro |
| 默认圆角 | 8px | 4px | 16px |
| 阴影 | 分层,微妙 | 单层 | 柔和,显著 |
references/ 中的详细参考指南:
| 文件 | 内容 |
|---|---|
token-generation.md | 颜色算法,HSV 色彩空间,WCAG 对比度,字体比例 |
component-architecture.md | 原子设计,命名约定,Props 模式 |
responsive-calculations.md | 断点,流体排版,网格系统 |
developer-handoff.md | 导出格式,框架设置,Figma 同步 |
每周安装次数
48
代码仓库
GitHub 星标数
30
首次出现
Feb 23, 2026
安全审计
安装于
claude-code39
gemini-cli34
github-copilot34
codex34
opencode34
cursor34
Generate design tokens, create color palettes, calculate typography scales, build component systems, and prepare developer handoff documentation.
Use this skill when you need to:
Situation: You have a brand color and need a complete design token system.
Steps:
Identify brand color and style
modern | classic | playfulGenerate tokens using script
python scripts/design_token_generator.py "#0066CC" modern json
Review generated categories
Export in target format
# CSS custom properties
python scripts/design_token_generator.py "#0066CC" modern css > design-tokens.css
# SCSS variables
python scripts/design_token_generator.py "#0066CC" modern scss > _design-tokens.scss
# JSON for Figma/tooling
python scripts/design_token_generator.py "#0066CC" modern json > design-tokens.json
Validate accessibility
Situation: You need to structure a component library using design tokens.
Steps:
Define component hierarchy
Map tokens to components
| Component | Tokens Used |
|---|---|
| Button | colors, sizing, borders, shadows, typography |
| Input | colors, sizing, borders, spacing |
| Card | colors, borders, shadows, spacing |
| Modal | colors, shadows, spacing, z-index, animation |
Size variants:
sm: height 32px, paddingX 12px, fontSize 14px
md: height 40px, paddingX 16px, fontSize 16px
lg: height 48px, paddingX 20px, fontSize 18px
Color variants:
primary: background primary-500, text white
secondary: background neutral-100, text neutral-900
ghost: background transparent, text neutral-700
4. Document component API
* Props interface with types
* Variant options
* State handling (hover, active, focus, disabled)
* Accessibility requirements
5. Reference: See references/component-architecture.md
Situation: You need breakpoints, fluid typography, or responsive spacing.
Steps:
| Name | Width | Target |
|---|---|---|
| xs | 0 | Small phones |
| sm | 480px | Large phones |
| md | 640px | Tablets |
| lg | 768px | Small laptops |
| xl | 1024px | Desktops |
| 2xl | 1280px | Large screens |
Formula: clamp(min, preferred, max)
/* 16px to 24px between 320px and 1200px viewport */
font-size: clamp(1rem, 0.5rem + 2vw, 1.5rem);
Pre-calculated scales:
--fluid-h1: clamp(2rem, 1rem + 3.6vw, 4rem);
--fluid-h2: clamp(1.75rem, 1rem + 2.3vw, 3rem);
--fluid-h3: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
--fluid-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
3. Set up responsive spacing
| Token | Mobile | Tablet | Desktop |
|---|---|---|---|
| --space-md | 12px | 16px | 16px |
| --space-lg | 16px | 24px | 32px |
| --space-xl | 24px | 32px | 48px |
| --space-section | 48px | 80px | 120px |
references/responsive-calculations.mdSituation: You need to hand off design tokens to development team.
Steps:
Export tokens in required formats
# For CSS projects
python scripts/design_token_generator.py "#0066CC" modern css
# For SCSS projects
python scripts/design_token_generator.py "#0066CC" modern scss
# For JavaScript/TypeScript
python scripts/design_token_generator.py "#0066CC" modern json
Prepare framework integration
React + CSS Variables:
import './design-tokens.css';
<button className="btn btn-primary">Click</button>
Tailwind Config:
const tokens = require('./design-tokens.json');
module.exports = {
theme: {
colors: tokens.colors,
fontFamily: tokens.typography.fontFamily
}
};
styled-components:
import tokens from './design-tokens.json';
const Button = styled.button`
background: ${tokens.colors.primary['500']};
padding: ${tokens.spacing['2']} ${tokens.spacing['4']};
`;
3. Sync with Figma
* Install Tokens Studio plugin
* Import design-tokens.json
* Tokens sync automatically with Figma styles
4. Handoff checklist
* Token files added to project
* Build pipeline configured
* Theme/CSS variables imported
* Component library aligned
* Documentation generated
5. Reference: See references/developer-handoff.md
Generates complete design token system from brand color.
| Argument | Values | Default | Description |
|---|---|---|---|
| brand_color | Hex color | #0066CC | Primary brand color |
| style | modern, classic, playful | modern | Design style preset |
| format | json, css, scss, summary | json | Output format |
Examples:
# Generate JSON tokens (default)
python scripts/design_token_generator.py "#0066CC"
# Classic style with CSS output
python scripts/design_token_generator.py "#8B4513" classic css
# Playful style summary view
python scripts/design_token_generator.py "#FF6B6B" playful summary
Output Categories:
| Category | Description | Key Values |
|---|---|---|
| colors | Color palettes | primary, secondary, neutral, semantic, surface |
| typography | Font system | fontFamily, fontSize, fontWeight, lineHeight |
| spacing | 8pt grid | 0-64 scale, semantic (xs-3xl) |
| sizing | Component sizes | container, button, input, icon |
| borders | Border values | radius (per style), width |
| shadows | Shadow styles | none through 2xl, inner |
| animation | Motion tokens | duration, easing, keyframes |
| breakpoints | Responsive | xs, sm, md, lg, xl, 2xl |
| z-index | Layer system | base through notification |
| Step | Brightness | Saturation | Use Case |
|---|---|---|---|
| 50 | 95% fixed | 30% | Subtle backgrounds |
| 100 | 95% fixed | 38% | Light backgrounds |
| 200 | 95% fixed | 46% | Hover states |
| 300 | 95% fixed | 54% | Borders |
| 400 | 95% fixed | 62% | Disabled states |
| 500 | Original | 70% | Base/default color |
| 600 | Original × 0.8 | 78% | Hover (dark) |
| 700 |
| Size | Value | Calculation |
|---|---|---|
| xs | 10px | 16 ÷ 1.25² |
| sm | 13px | 16 ÷ 1.25¹ |
| base | 16px | Base |
| lg | 20px | 16 × 1.25¹ |
| xl | 25px | 16 × 1.25² |
| 2xl | 31px | 16 × 1.25³ |
| 3xl | 39px | 16 × 1.25⁴ |
| 4xl | 49px | 16 × 1.25⁵ |
| 5xl | 61px | 16 × 1.25⁶ |
| Level | Normal Text | Large Text |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
Large text: ≥18pt regular or ≥14pt bold
| Aspect | Modern | Classic | Playful |
|---|---|---|---|
| Font Sans | Inter | Helvetica | Poppins |
| Font Mono | Fira Code | Courier | Source Code Pro |
| Radius Default | 8px | 4px | 16px |
| Shadows | Layered, subtle | Single layer | Soft, pronounced |
Detailed reference guides in references/:
| File | Content |
|---|---|
token-generation.md | Color algorithms, HSV space, WCAG contrast, type scales |
component-architecture.md | Atomic design, naming conventions, props patterns |
responsive-calculations.md | Breakpoints, fluid typography, grid systems |
developer-handoff.md | Export formats, framework setup, Figma sync |
Weekly Installs
48
Repository
GitHub Stars
30
First Seen
Feb 23, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
claude-code39
gemini-cli34
github-copilot34
codex34
opencode34
cursor34
前端设计技能指南:避免AI垃圾美学,打造独特生产级界面
53,200 周安装
通用项目发布工具 - 多语言更新日志自动生成 | 支持Node.js/Python/Rust/Claude插件
62 周安装
Edge Pipeline Orchestrator:自动化金融交易策略流水线编排工具
62 周安装
Python ROI 计算器:投资回报率、营销ROI、盈亏平衡分析工具
62 周安装
Salesforce Hyperforce 2025架构指南:云原生、零信任安全与开发最佳实践
62 周安装
PowerShell 2025 重大变更与迁移指南:版本移除、模块停用、WMIC替代方案
62 周安装
2025安全优先Bash脚本编写指南:输入验证、命令注入与路径遍历防护
62 周安装
| Original × 0.6 |
| 86% |
| Active states |
| 800 | Original × 0.4 | 94% | Text |
| 900 | Original × 0.2 | 100% | Headings |