design-system by supercent-io/skills-template
npx skills add https://github.com/supercent-io/skills-template --skill design-system这是一个用于生产级 UI 设计的技能。它通过清晰的设计令牌、布局规则、动效指南和可访问性检查,支持一致且可扩展的前端开发。
// design-tokens.ts
export const tokens = {
// Colors
colors: {
primary: {
50: '#EFF6FF',
100: '#DBEAFE',
500: '#3B82F6',
600: '#2563EB',
700: '#1D4ED8',
},
secondary: {
500: '#6366F1',
600: '#4F46E5',
},
accent: '#F59E0B',
success: '#10B981',
warning: '#F59E0B',
error: '#EF4444',
background: {
primary: '#FFFFFF',
secondary: '#F9FAFB',
tertiary: '#F3F4F6',
},
text: {
primary: '#1F2937',
secondary: '#6B7280',
tertiary: '#9CA3AF',
inverse: '#FFFFFF',
},
},
// Typography
typography: {
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
mono: ['JetBrains Mono', '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
},
fontWeight: {
normal: 400,
medium: 500,
semibold: 600,
bold: 700,
},
lineHeight: {
tight: 1.25,
normal: 1.5,
relaxed: 1.75,
},
},
// Spacing (8px base unit)
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
},
// Border Radius
borderRadius: {
none: '0',
sm: '0.25rem', // 4px
md: '0.375rem', // 6px
lg: '0.5rem', // 8px
xl: '0.75rem', // 12px
'2xl': '1rem', // 16px
full: '9999px',
},
// Shadows
shadows: {
sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
md: '0 4px 6px -1px rgb(0 0 0 / 0.1)',
lg: '0 10px 15px -3px rgb(0 0 0 / 0.1)',
xl: '0 20px 25px -5px rgb(0 0 0 / 0.1)',
},
// Breakpoints
breakpoints: {
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
'2xl': '1536px',
},
};
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
page_spec:
type: "landing" | "dashboard" | "form" | "blog" | "e-commerce"
hierarchy:
primary_action: [Primary CTA]
secondary_actions: [secondary actions]
information_architecture:
- section: hero
priority: 1
- section: features
priority: 2
- section: social_proof
priority: 3
- section: cta
priority: 4
responsive:
mobile_first: true
breakpoints:
- mobile: "< 640px"
- tablet: "640px - 1024px"
- desktop: "> 1024px"
stack_behavior: "vertical on mobile, horizontal on desktop"
按部分划分的组件结构 :
// Hero Section
<section className="hero">
<div className="container">
<div className="hero-content">
<Badge>New Release</Badge>
<Heading level={1}>
Main Headline Here
</Heading>
<Paragraph size="lg">
Supporting copy that explains the value proposition
in 1-2 sentences.
</Paragraph>
<div className="cta-group">
<Button variant="primary" size="lg">
Primary CTA
</Button>
<Button variant="secondary" size="lg">
Secondary CTA
</Button>
</div>
</div>
<div className="hero-visual">
<Image src="hero-image.png" alt="Product screenshot" />
</div>
</div>
</section>
动效/交互说明 :
/* Motion Guidelines */
:root {
/* Duration */
--duration-fast: 150ms;
--duration-normal: 300ms;
--duration-slow: 500ms;
/* Easing */
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in: cubic-bezier(0.4, 0, 1, 1);
}
/* Hover States */
.button {
transition: all var(--duration-fast) var(--ease-in-out);
}
.button:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
/* Page Transitions */
.page-enter {
opacity: 0;
transform: translateY(10px);
}
.page-enter-active {
opacity: 1;
transform: translateY(0);
transition: all var(--duration-normal) var(--ease-out);
}
## Accessibility Checklist
### Color Contrast (WCAG 2.1 AA)
- [ ] Text/background: 4.5:1 minimum (normal text)
- [ ] Text/background: 3:1 minimum (large text)
- [ ] UI components: 3:1 minimum
### Keyboard Navigation
- [ ] All interactive elements focusable
- [ ] Focus order logical (left→right, top→bottom)
- [ ] Focus indicator visible
- [ ] Skip links present
### Screen Reader
- [ ] Semantic HTML used
- [ ] Images have alt text
- [ ] Form labels associated
- [ ] ARIA labels where needed
### Text & Readability
- [ ] Minimum 16px body text
- [ ] Line height ≥ 1.5
- [ ] Paragraph width < 80 characters
- [ ] No text in images
## Design Handoff Package
### Component Breakdown
| Component | Props | Variants |
|-----------|-------|----------|
| Button | size, variant, disabled | primary, secondary, ghost |
| Input | size, error, placeholder | default, error, success |
| Card | padding, shadow | elevated, flat, outlined |
### CSS/Token Summary
- Colors: [link to color palette]
- Typography: [link to type scale]
- Spacing: 8px base unit
- Breakpoints: 640/768/1024/1280px
### Files
- Figma: [link]
- Tokens: design-tokens.ts
- Components: /src/components/
提示 :
Design a SaaS landing page with modern typography,
soft gradients, and subtle motion.
Include hero, features, pricing, and CTA.
预期输出 :
提示 :
Create a clean admin dashboard with data cards,
filters, and tables. Focus on clarity and fast scanning.
预期输出 :
提示 :
Design a multi-step form optimized for mobile.
Include progress indicator, validation states,
and success confirmation.
预期输出 :
原因 : 没有视觉方向或令牌 解决方案 : 提供样式参考和调色板
原因 : 没有响应式网格规则 解决方案 : 定义断点和堆叠行为
原因 : 未使用令牌 解决方案 : 所有值都从令牌中引用
## Design System Report
### Tokens Applied
- **Colors**: [primary, secondary, accent]
- **Typography**: [font-family, scale]
- **Spacing**: [base unit, scale]
- **Shadows**: [levels]
### Section Layout
| Section | Grid | Components |
|---------|------|------------|
| Hero | 2-col | Badge, Heading, CTA |
| Features | 3-col | Card, Icon |
| Pricing | 3-col | PricingCard |
| CTA | 1-col | Button |
### Component List
- [ ] Button (primary, secondary, ghost)
- [ ] Card (elevated, flat)
- [ ] Input (default, error)
- [ ] Badge
- [ ] Icon
### Accessibility Audit
- [x] Contrast ratios pass
- [x] Focus indicators visible
- [x] Semantic HTML
| 智能体 | 角色 |
|---|---|
| Claude | 令牌定义、组件设计 |
| Gemini | 可访问性分析、参考研究 |
| Codex | CSS/组件代码生成 |
#frontend #design #ui #ux #typography #animation #design-tokens #accessibility
每周安装量
3.2K
仓库
GitHub Stars
88
首次出现
2026年3月6日
安全审计
安装于
gemini-cli3.2K
codex3.2K
opencode3.2K
cursor3.1K
github-copilot3.1K
kimi-cli3.1K
This is a skill for production-grade UI design. It supports consistent and scalable frontend development through clear design tokens, layout rules, motion guidelines, and accessibility checks.
// design-tokens.ts
export const tokens = {
// Colors
colors: {
primary: {
50: '#EFF6FF',
100: '#DBEAFE',
500: '#3B82F6',
600: '#2563EB',
700: '#1D4ED8',
},
secondary: {
500: '#6366F1',
600: '#4F46E5',
},
accent: '#F59E0B',
success: '#10B981',
warning: '#F59E0B',
error: '#EF4444',
background: {
primary: '#FFFFFF',
secondary: '#F9FAFB',
tertiary: '#F3F4F6',
},
text: {
primary: '#1F2937',
secondary: '#6B7280',
tertiary: '#9CA3AF',
inverse: '#FFFFFF',
},
},
// Typography
typography: {
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
mono: ['JetBrains Mono', '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
},
fontWeight: {
normal: 400,
medium: 500,
semibold: 600,
bold: 700,
},
lineHeight: {
tight: 1.25,
normal: 1.5,
relaxed: 1.75,
},
},
// Spacing (8px base unit)
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
},
// Border Radius
borderRadius: {
none: '0',
sm: '0.25rem', // 4px
md: '0.375rem', // 6px
lg: '0.5rem', // 8px
xl: '0.75rem', // 12px
'2xl': '1rem', // 16px
full: '9999px',
},
// Shadows
shadows: {
sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
md: '0 4px 6px -1px rgb(0 0 0 / 0.1)',
lg: '0 10px 15px -3px rgb(0 0 0 / 0.1)',
xl: '0 20px 25px -5px rgb(0 0 0 / 0.1)',
},
// Breakpoints
breakpoints: {
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
'2xl': '1536px',
},
};
page_spec:
type: "landing" | "dashboard" | "form" | "blog" | "e-commerce"
hierarchy:
primary_action: [Primary CTA]
secondary_actions: [secondary actions]
information_architecture:
- section: hero
priority: 1
- section: features
priority: 2
- section: social_proof
priority: 3
- section: cta
priority: 4
responsive:
mobile_first: true
breakpoints:
- mobile: "< 640px"
- tablet: "640px - 1024px"
- desktop: "> 1024px"
stack_behavior: "vertical on mobile, horizontal on desktop"
Section-by-section component structure :
// Hero Section
<section className="hero">
<div className="container">
<div className="hero-content">
<Badge>New Release</Badge>
<Heading level={1}>
Main Headline Here
</Heading>
<Paragraph size="lg">
Supporting copy that explains the value proposition
in 1-2 sentences.
</Paragraph>
<div className="cta-group">
<Button variant="primary" size="lg">
Primary CTA
</Button>
<Button variant="secondary" size="lg">
Secondary CTA
</Button>
</div>
</div>
<div className="hero-visual">
<Image src="hero-image.png" alt="Product screenshot" />
</div>
</div>
</section>
Motion/Interaction notes :
/* Motion Guidelines */
:root {
/* Duration */
--duration-fast: 150ms;
--duration-normal: 300ms;
--duration-slow: 500ms;
/* Easing */
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in: cubic-bezier(0.4, 0, 1, 1);
}
/* Hover States */
.button {
transition: all var(--duration-fast) var(--ease-in-out);
}
.button:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
/* Page Transitions */
.page-enter {
opacity: 0;
transform: translateY(10px);
}
.page-enter-active {
opacity: 1;
transform: translateY(0);
transition: all var(--duration-normal) var(--ease-out);
}
## Accessibility Checklist
### Color Contrast (WCAG 2.1 AA)
- [ ] Text/background: 4.5:1 minimum (normal text)
- [ ] Text/background: 3:1 minimum (large text)
- [ ] UI components: 3:1 minimum
### Keyboard Navigation
- [ ] All interactive elements focusable
- [ ] Focus order logical (left→right, top→bottom)
- [ ] Focus indicator visible
- [ ] Skip links present
### Screen Reader
- [ ] Semantic HTML used
- [ ] Images have alt text
- [ ] Form labels associated
- [ ] ARIA labels where needed
### Text & Readability
- [ ] Minimum 16px body text
- [ ] Line height ≥ 1.5
- [ ] Paragraph width < 80 characters
- [ ] No text in images
## Design Handoff Package
### Component Breakdown
| Component | Props | Variants |
|-----------|-------|----------|
| Button | size, variant, disabled | primary, secondary, ghost |
| Input | size, error, placeholder | default, error, success |
| Card | padding, shadow | elevated, flat, outlined |
### CSS/Token Summary
- Colors: [link to color palette]
- Typography: [link to type scale]
- Spacing: 8px base unit
- Breakpoints: 640/768/1024/1280px
### Files
- Figma: [link]
- Tokens: design-tokens.ts
- Components: /src/components/
Prompt :
Design a SaaS landing page with modern typography,
soft gradients, and subtle motion.
Include hero, features, pricing, and CTA.
Expected output :
Prompt :
Create a clean admin dashboard with data cards,
filters, and tables. Focus on clarity and fast scanning.
Expected output :
Prompt :
Design a multi-step form optimized for mobile.
Include progress indicator, validation states,
and success confirmation.
Expected output :
Cause : No visual direction or tokens Solution : Provide style references and palette
Cause : No responsive grid rules Solution : Define breakpoints and stacking behavior
Cause : Tokens not in use Solution : Reference all values from tokens
## Design System Report
### Tokens Applied
- **Colors**: [primary, secondary, accent]
- **Typography**: [font-family, scale]
- **Spacing**: [base unit, scale]
- **Shadows**: [levels]
### Section Layout
| Section | Grid | Components |
|---------|------|------------|
| Hero | 2-col | Badge, Heading, CTA |
| Features | 3-col | Card, Icon |
| Pricing | 3-col | PricingCard |
| CTA | 1-col | Button |
### Component List
- [ ] Button (primary, secondary, ghost)
- [ ] Card (elevated, flat)
- [ ] Input (default, error)
- [ ] Badge
- [ ] Icon
### Accessibility Audit
- [x] Contrast ratios pass
- [x] Focus indicators visible
- [x] Semantic HTML
| Agent | Role |
|---|---|
| Claude | Token definition, component design |
| Gemini | Accessibility analysis, reference research |
| Codex | CSS/component code generation |
#frontend #design #ui #ux #typography #animation #design-tokens #accessibility
Weekly Installs
3.2K
Repository
GitHub Stars
88
First Seen
Mar 6, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
gemini-cli3.2K
codex3.2K
opencode3.2K
cursor3.1K
github-copilot3.1K
kimi-cli3.1K
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
102,200 周安装