design-system-starter by davila7/claude-code-templates
npx skills add https://github.com/davila7/claude-code-templates --skill design-system-starter构建健壮、可扩展的设计系统,确保视觉一致性并提供卓越的用户体验。
只需描述您的需求:
Create a design system for my React app with dark mode support
即可。该技能将提供设计令牌、组件和可访问性指南。
| 触发指令 | 示例 |
|---|---|
| 创建设计系统 | "Create a design system for my app" |
| 设计令牌 | "Set up design tokens for colors and spacing" |
| 组件架构 | "Design component structure using atomic design" |
| 可访问性 | "Ensure WCAG 2.1 compliance for my components" |
| 深色模式 | "Implement theming with dark mode support" |
| 任务 | 输出 |
|---|
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 设计令牌 | 颜色、排版、间距、阴影 JSON |
| 组件结构 | 原子设计层级(原子、分子、有机体) |
| 主题系统 | CSS 变量或 ThemeProvider 设置 |
| 可访问性 | 符合 WCAG 2.1 AA 标准的模式 |
| 文档 | 包含属性、示例、无障碍说明的组件文档 |
references/component-examples.md - 完整的组件实现templates/design-tokens-template.json - W3C 设计令牌格式templates/component-template.tsx - React 组件模板checklists/design-system-checklist.md - 设计系统审计清单设计系统不仅仅是一个组件库——它是以下内容的集合:
1. 一致性优于创造性
2. 默认具备可访问性
3. 可扩展且可维护
4. 开发者友好
设计令牌是定义系统视觉语言的原子级设计决策。
原始颜色(原始值):
{
"color": {
"primitive": {
"blue": {
"50": "#eff6ff",
"100": "#dbeafe",
"200": "#bfdbfe",
"300": "#93c5fd",
"400": "#60a5fa",
"500": "#3b82f6",
"600": "#2563eb",
"700": "#1d4ed8",
"800": "#1e40af",
"900": "#1e3a8a",
"950": "#172554"
}
}
}
}
语义颜色(上下文含义):
{
"color": {
"semantic": {
"brand": {
"primary": "{color.primitive.blue.600}",
"primary-hover": "{color.primitive.blue.700}",
"primary-active": "{color.primitive.blue.800}"
},
"text": {
"primary": "{color.primitive.gray.900}",
"secondary": "{color.primitive.gray.600}",
"tertiary": "{color.primitive.gray.500}",
"disabled": "{color.primitive.gray.400}",
"inverse": "{color.primitive.white}"
},
"background": {
"primary": "{color.primitive.white}",
"secondary": "{color.primitive.gray.50}",
"tertiary": "{color.primitive.gray.100}"
},
"feedback": {
"success": "{color.primitive.green.600}",
"warning": "{color.primitive.yellow.600}",
"error": "{color.primitive.red.600}",
"info": "{color.primitive.blue.600}"
}
}
}
}
可访问性 :确保颜色对比度符合 WCAG 2.1 Level AA 标准:
{
"typography": {
"fontFamily": {
"sans": "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
"serif": "'Georgia', 'Times New Roman', serif",
"mono": "'Fira Code', 'Courier New', monospace"
},
"fontSize": {
"xs": "0.75rem", // 12px
"sm": "0.875rem", // 14px
"base": "1rem", // 16px
"lg": "1.125rem", // 18px
"xl": "1.25rem", // 20px
"2xl": "1.5rem", // 24px
"3xl": "1.875rem", // 30px
"4xl": "2.25rem", // 36px
"5xl": "3rem" // 48px
},
"fontWeight": {
"normal": 400,
"medium": 500,
"semibold": 600,
"bold": 700
},
"lineHeight": {
"tight": 1.25,
"normal": 1.5,
"relaxed": 1.75,
"loose": 2
},
"letterSpacing": {
"tight": "-0.025em",
"normal": "0",
"wide": "0.025em"
}
}
}
比例 :使用一致的间距比例(通常以 4px 或 8px 为基础)
{
"spacing": {
"0": "0",
"1": "0.25rem", // 4px
"2": "0.5rem", // 8px
"3": "0.75rem", // 12px
"4": "1rem", // 16px
"5": "1.25rem", // 20px
"6": "1.5rem", // 24px
"8": "2rem", // 32px
"10": "2.5rem", // 40px
"12": "3rem", // 48px
"16": "4rem", // 64px
"20": "5rem", // 80px
"24": "6rem" // 96px
}
}
组件特定间距 :
{
"component": {
"button": {
"padding-x": "{spacing.4}",
"padding-y": "{spacing.2}",
"gap": "{spacing.2}"
},
"card": {
"padding": "{spacing.6}",
"gap": "{spacing.4}"
}
}
}
{
"borderRadius": {
"none": "0",
"sm": "0.125rem", // 2px
"base": "0.25rem", // 4px
"md": "0.375rem", // 6px
"lg": "0.5rem", // 8px
"xl": "0.75rem", // 12px
"2xl": "1rem", // 16px
"full": "9999px"
}
}
{
"shadow": {
"xs": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
"sm": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)",
"base": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
"md": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",
"lg": "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)",
"xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)"
}
}
原子 → 分子 → 有机体 → 模板 → 页面
无法进一步分解的基本构建块。
示例:
按钮组件:
interface ButtonProps {
variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
size?: 'sm' | 'md' | 'lg';
disabled?: boolean;
loading?: boolean;
icon?: React.ReactNode;
children: React.ReactNode;
}
有关包含变体、尺寸和样式模式的完整按钮实现,请参阅 references/component-examples.md。
协同工作的一组原子。
示例:
表单字段分子:
interface FormFieldProps {
label: string;
name: string;
error?: string;
hint?: string;
required?: boolean;
children: React.ReactNode;
}
有关 FormField、卡片(复合组件模式)、带变体的输入框、模态框等更多组合示例,请参阅 references/component-examples.md。
由分子和原子组成的复杂 UI 组件。
示例:
定义内容放置的页面级结构。
示例:
包含真实内容的具体页面。
1. 可预测的属性名称
// ✅ 良好:命名一致
<Button variant="primary" size="md" />
<Input variant="outlined" size="md" />
// ❌ 不佳:不一致
<Button type="primary" sizeMode="md" />
<Input style="outlined" inputSize="md" />
2. 合理的默认值
// ✅ 良好:提供默认值
interface ButtonProps {
variant?: 'primary' | 'secondary'; // 默认:primary
size?: 'sm' | 'md' | 'lg'; // 默认:md
}
// ❌ 不佳:所有属性都必需
interface ButtonProps {
variant: 'primary' | 'secondary';
size: 'sm' | 'md' | 'lg';
color: string;
padding: string;
}
3. 组合优于配置
// ✅ 良好:可组合
<Card>
<Card.Header>
<Card.Title>标题</Card.Title>
</Card.Header>
<Card.Body>内容</Card.Body>
<Card.Footer>操作</Card.Footer>
</Card>
// ❌ 不佳:属性过多
<Card
title="标题"
content="内容"
footerContent="操作"
hasHeader={true}
hasFooter={true}
/>
4. 多态组件 允许组件渲染为不同的 HTML 元素:
<Button as="a" href="/login">登录</Button>
<Button as="button" onClick={handleClick}>点击我</Button>
有关完整的多态组件 TypeScript 模式,请参阅 references/component-examples.md。
interface Theme {
colors: {
brand: {
primary: string;
secondary: string;
};
text: {
primary: string;
secondary: string;
};
background: {
primary: string;
secondary: string;
};
feedback: {
success: string;
warning: string;
error: string;
info: string;
};
};
typography: {
fontFamily: {
sans: string;
mono: string;
};
fontSize: Record<string, string>;
};
spacing: Record<string, string>;
borderRadius: Record<string, string>;
shadow: Record<string, string>;
}
方法 1:CSS 变量
:root {
--color-bg-primary: #ffffff;
--color-text-primary: #000000;
}
[data-theme="dark"] {
--color-bg-primary: #1a1a1a;
--color-text-primary: #ffffff;
}
方法 2:Tailwind CSS 深色模式
<div className="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
内容
</div>
方法 3:Styled Components ThemeProvider
const lightTheme = { background: '#fff', text: '#000' };
const darkTheme = { background: '#000', text: '#fff' };
<ThemeProvider theme={isDark ? darkTheme : lightTheme}>
<App />
</ThemeProvider>
工具 :使用对比度检查器,如 WebAIM 对比度检查器
// ✅ 所有交互元素必须可通过键盘访问
<button
onClick={handleClick}
onKeyDown={(e) => e.key === 'Enter' && handleClick()}
>
点击我
</button>
// ✅ 焦点管理
<Modal>
<FocusTrap>
{/* 模态框内容 */}
</FocusTrap>
</Modal>
必要的 ARIA 模式:
aria-label:提供可访问的名称aria-expanded:传达展开/折叠状态aria-controls:将控件与内容关联aria-live:宣布动态内容变化<button>、<nav>、<main>)有关完整的可访问性示例,包括跳过链接、焦点陷阱和 ARIA 模式,请参阅 references/component-examples.md。
每个组件应记录:
使用 Storybook、Docusaurus 或类似工具进行交互式文档。
有关标准组件结构,请参阅 templates/component-template.tsx。
创建新设计系统时:
每周安装量
223
仓库
GitHub 星标数
23.4K
首次出现
2026年1月25日
安全审计
安装于
opencode185
gemini-cli173
claude-code171
codex169
cursor161
github-copilot160
Build robust, scalable design systems that ensure visual consistency and exceptional user experiences.
Just describe what you need:
Create a design system for my React app with dark mode support
That's it. The skill provides tokens, components, and accessibility guidelines.
| Trigger | Example |
|---|---|
| Create design system | "Create a design system for my app" |
| Design tokens | "Set up design tokens for colors and spacing" |
| Component architecture | "Design component structure using atomic design" |
| Accessibility | "Ensure WCAG 2.1 compliance for my components" |
| Dark mode | "Implement theming with dark mode support" |
| Task | Output |
|---|---|
| Design tokens | Color, typography, spacing, shadows JSON |
| Component structure | Atomic design hierarchy (atoms, molecules, organisms) |
| Theming | CSS variables or ThemeProvider setup |
| Accessibility | WCAG 2.1 AA compliant patterns |
| Documentation | Component docs with props, examples, a11y notes |
references/component-examples.md - Complete component implementationstemplates/design-tokens-template.json - W3C design token formattemplates/component-template.tsx - React component templatechecklists/design-system-checklist.md - Design system audit checklistA design system is more than a component library—it's a collection of:
1. Consistency Over Creativity
2. Accessible by Default
3. Scalable and Maintainable
4. Developer-Friendly
Design tokens are the atomic design decisions that define your system's visual language.
Primitive Colors (Raw values):
{
"color": {
"primitive": {
"blue": {
"50": "#eff6ff",
"100": "#dbeafe",
"200": "#bfdbfe",
"300": "#93c5fd",
"400": "#60a5fa",
"500": "#3b82f6",
"600": "#2563eb",
"700": "#1d4ed8",
"800": "#1e40af",
"900": "#1e3a8a",
"950": "#172554"
}
}
}
}
Semantic Colors (Contextual meaning):
{
"color": {
"semantic": {
"brand": {
"primary": "{color.primitive.blue.600}",
"primary-hover": "{color.primitive.blue.700}",
"primary-active": "{color.primitive.blue.800}"
},
"text": {
"primary": "{color.primitive.gray.900}",
"secondary": "{color.primitive.gray.600}",
"tertiary": "{color.primitive.gray.500}",
"disabled": "{color.primitive.gray.400}",
"inverse": "{color.primitive.white}"
},
"background": {
"primary": "{color.primitive.white}",
"secondary": "{color.primitive.gray.50}",
"tertiary": "{color.primitive.gray.100}"
},
"feedback": {
"success": "{color.primitive.green.600}",
"warning": "{color.primitive.yellow.600}",
"error": "{color.primitive.red.600}",
"info": "{color.primitive.blue.600}"
}
}
}
}
Accessibility : Ensure color contrast ratios meet WCAG 2.1 Level AA:
{
"typography": {
"fontFamily": {
"sans": "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
"serif": "'Georgia', 'Times New Roman', serif",
"mono": "'Fira Code', 'Courier New', monospace"
},
"fontSize": {
"xs": "0.75rem", // 12px
"sm": "0.875rem", // 14px
"base": "1rem", // 16px
"lg": "1.125rem", // 18px
"xl": "1.25rem", // 20px
"2xl": "1.5rem", // 24px
"3xl": "1.875rem", // 30px
"4xl": "2.25rem", // 36px
"5xl": "3rem" // 48px
},
"fontWeight": {
"normal": 400,
"medium": 500,
"semibold": 600,
"bold": 700
},
"lineHeight": {
"tight": 1.25,
"normal": 1.5,
"relaxed": 1.75,
"loose": 2
},
"letterSpacing": {
"tight": "-0.025em",
"normal": "0",
"wide": "0.025em"
}
}
}
Scale : Use a consistent spacing scale (commonly 4px or 8px base)
{
"spacing": {
"0": "0",
"1": "0.25rem", // 4px
"2": "0.5rem", // 8px
"3": "0.75rem", // 12px
"4": "1rem", // 16px
"5": "1.25rem", // 20px
"6": "1.5rem", // 24px
"8": "2rem", // 32px
"10": "2.5rem", // 40px
"12": "3rem", // 48px
"16": "4rem", // 64px
"20": "5rem", // 80px
"24": "6rem" // 96px
}
}
Component-Specific Spacing :
{
"component": {
"button": {
"padding-x": "{spacing.4}",
"padding-y": "{spacing.2}",
"gap": "{spacing.2}"
},
"card": {
"padding": "{spacing.6}",
"gap": "{spacing.4}"
}
}
}
{
"borderRadius": {
"none": "0",
"sm": "0.125rem", // 2px
"base": "0.25rem", // 4px
"md": "0.375rem", // 6px
"lg": "0.5rem", // 8px
"xl": "0.75rem", // 12px
"2xl": "1rem", // 16px
"full": "9999px"
}
}
{
"shadow": {
"xs": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
"sm": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)",
"base": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
"md": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",
"lg": "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)",
"xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)"
}
}
Atoms → Molecules → Organisms → Templates → Pages
Basic building blocks that can't be broken down further.
Examples:
Button Component:
interface ButtonProps {
variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
size?: 'sm' | 'md' | 'lg';
disabled?: boolean;
loading?: boolean;
icon?: React.ReactNode;
children: React.ReactNode;
}
See references/component-examples.md for complete Button implementation with variants, sizes, and styling patterns.
Groups of atoms that function together.
Examples:
FormField Molecule:
interface FormFieldProps {
label: string;
name: string;
error?: string;
hint?: string;
required?: boolean;
children: React.ReactNode;
}
See references/component-examples.md for FormField, Card (compound component pattern), Input with variants, Modal, and more composition examples.
Complex UI components made of molecules and atoms.
Examples:
Page-level structures that define content placement.
Examples:
Actual pages with real content.
1. Predictable Prop Names
// ✅ Good: Consistent naming
<Button variant="primary" size="md" />
<Input variant="outlined" size="md" />
// ❌ Bad: Inconsistent
<Button type="primary" sizeMode="md" />
<Input style="outlined" inputSize="md" />
2. Sensible Defaults
// ✅ Good: Provides defaults
interface ButtonProps {
variant?: 'primary' | 'secondary'; // Default: primary
size?: 'sm' | 'md' | 'lg'; // Default: md
}
// ❌ Bad: Everything required
interface ButtonProps {
variant: 'primary' | 'secondary';
size: 'sm' | 'md' | 'lg';
color: string;
padding: string;
}
3. Composition Over Configuration
// ✅ Good: Composable
<Card>
<Card.Header>
<Card.Title>Title</Card.Title>
</Card.Header>
<Card.Body>Content</Card.Body>
<Card.Footer>Actions</Card.Footer>
</Card>
// ❌ Bad: Too many props
<Card
title="Title"
content="Content"
footerContent="Actions"
hasHeader={true}
hasFooter={true}
/>
4. Polymorphic Components Allow components to render as different HTML elements:
<Button as="a" href="/login">Login</Button>
<Button as="button" onClick={handleClick}>Click Me</Button>
See references/component-examples.md for complete polymorphic component TypeScript patterns.
interface Theme {
colors: {
brand: {
primary: string;
secondary: string;
};
text: {
primary: string;
secondary: string;
};
background: {
primary: string;
secondary: string;
};
feedback: {
success: string;
warning: string;
error: string;
info: string;
};
};
typography: {
fontFamily: {
sans: string;
mono: string;
};
fontSize: Record<string, string>;
};
spacing: Record<string, string>;
borderRadius: Record<string, string>;
shadow: Record<string, string>;
}
Approach 1: CSS Variables
:root {
--color-bg-primary: #ffffff;
--color-text-primary: #000000;
}
[data-theme="dark"] {
--color-bg-primary: #1a1a1a;
--color-text-primary: #ffffff;
}
Approach 2: Tailwind CSS Dark Mode
<div className="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
Content
</div>
Approach 3: Styled Components ThemeProvider
const lightTheme = { background: '#fff', text: '#000' };
const darkTheme = { background: '#000', text: '#fff' };
<ThemeProvider theme={isDark ? darkTheme : lightTheme}>
<App />
</ThemeProvider>
Tools : Use contrast checkers like WebAIM Contrast Checker
// ✅ All interactive elements must be keyboard accessible
<button
onClick={handleClick}
onKeyDown={(e) => e.key === 'Enter' && handleClick()}
>
Click me
</button>
// ✅ Focus management
<Modal>
<FocusTrap>
{/* Modal content */}
</FocusTrap>
</Modal>
Essential ARIA patterns:
aria-label: Provide accessible namesaria-expanded: Communicate expanded/collapsed statearia-controls: Associate controls with contentaria-live: Announce dynamic content changes<button>, <nav>, <main>)See references/component-examples.md for complete accessibility examples including Skip Links, focus traps, and ARIA patterns.
Each component should document:
Use Storybook, Docusaurus, or similar tools for interactive documentation.
See templates/component-template.tsx for the standard component structure.
When creating a new design system:
Weekly Installs
223
Repository
GitHub Stars
23.4K
First Seen
Jan 25, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode185
gemini-cli173
claude-code171
codex169
cursor161
github-copilot160
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
109,600 周安装