designing-systems
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseDesigning Systems
设计系统构建
Agent Workflow (MANDATORY)
Agent工作流（强制执行）
Before ANY design system work, use to spawn 3 agents:
TeamCreate- fuse-ai-pilot:explore-codebase - Find existing CSS variables, Tailwind config, colors
- fuse-ai-pilot:research-expert - Verify latest OKLCH and Tailwind v4 patterns
- mcp__context7__query-docs - Check Tailwind v4 @theme syntax
After implementation, run fuse-ai-pilot:sniper for validation.
在开展任何设计系统工作之前，使用生成3个Agent：
TeamCreate- fuse-ai-pilot:explore-codebase - 查找现有CSS变量、Tailwind配置及颜色设置
- fuse-ai-pilot:research-expert - 验证最新的OKLCH和Tailwind v4实践方案
- mcp__context7__query-docs - 查阅Tailwind v4 @theme语法规范
完成实现后，运行fuse-ai-pilot:sniper进行验证。
Overview
概述
| Feature | Description |
|---|---|
| OKLCH Colors | Wide gamut P3 color space |
| CSS Variables | Semantic token architecture |
| Tailwind v4 @theme | CSS-first configuration |
| 60-30-10 Rule | Color distribution ratio |
| 特性 | 描述 |
|---|---|
| OKLCH Colors | 广色域P3色彩空间 |
| CSS Variables | 语义化令牌架构 |
| Tailwind v4 @theme | 优先基于CSS的配置方式 |
| 60-30-10 Rule | 色彩分配比例规则 |
Critical Rules
核心规则
- OKLCH only - No hex or RGB for colors
- Forbidden fonts - Inter, Roboto, Arial are BANNED
- CSS variables - Never hard-code colors
- Analyze first - Document existing system before changes
- Dark mode - Always define both light and dark tokens
- 仅使用OKLCH - 禁止使用十六进制或RGB格式定义颜色
- 禁用字体 - Inter、Roboto、Arial均被禁止使用
- CSS变量要求 - 绝对不能硬编码颜色值
- 先分析再动手 - 在进行更改前先记录现有系统的状态
- 深色模式支持 - 必须同时定义亮色和暗色模式下的令牌
Architecture
架构
styles/
├── tokens/
│ ├── colors.css (~50 lines)
│ ├── typography.css (~30 lines)
│ └── spacing.css (~20 lines)
└── app.css (~40 lines - @import + @theme)→ See color-system.md for token examples
styles/
├── tokens/
│ ├── colors.css (~50行)
│ ├── typography.css (~30行)
│ └── spacing.css (~20行)
└── app.css (~40行 - @import + @theme)→ 查看color-system.md获取令牌示例
Reference Guide
参考指南
Concepts
概念
| Topic | Reference | When to Consult |
|---|---|---|
| Colors | color-system.md | OKLCH palettes, psychology |
| Typography | typography.md | Fonts, scale, mobile sizes |
| Theme Presets | theme-presets.md | Brutalist, Solarpunk, etc. |
| Grids | grids-layout.md | 12-column, spacing |
| UI Hierarchy | ui-hierarchy.md | Visual hierarchy patterns |
| UI Spacing | ui-spacing.md | Spacing systems |
| UI Trends | ui-trends-2026.md | 2026 design trends |
| Gradients | gradients-guide.md | Gradient patterns |
| Tailwind Config | tailwind-config.md | v4 @theme setup |
| Tailwind Utils | tailwind-utilities.md | Utility patterns |
| Tailwind Perf | tailwind-performance.md | Performance tips |
| 主题 | 参考文档 | 查阅场景 |
|---|---|---|
| Colors | color-system.md | OKLCH调色板、色彩心理学相关内容 |
| Typography | typography.md | 字体、排版比例、移动端尺寸设置 |
| Theme Presets | theme-presets.md | 野兽派、太阳能朋克等预设主题 |
| Grids | grids-layout.md | 12列布局、间距设置 |
| UI Hierarchy | ui-hierarchy.md | 视觉层级模式 |
| UI Spacing | ui-spacing.md | 间距系统设计 |
| UI Trends | ui-trends-2026.md | 2026年设计趋势 |
| Gradients | gradients-guide.md | 渐变设计模式 |
| Tailwind Config | tailwind-config.md | v4 @theme配置方法 |
| Tailwind Utils | tailwind-utilities.md | 工具类使用模式 |
| Tailwind Perf | tailwind-performance.md | 性能优化技巧 |
Templates
模板
Templates are in generating-components skill for implementation examples.
实现示例模板可查看generating-components技能文档。
Quick Reference
快速参考
OKLCH Color Token
OKLCH颜色令牌
css
:root {
--color-primary: oklch(55% 0.20 260);
--color-primary-foreground: oklch(98% 0.01 260);
}
.dark {
--color-primary: oklch(65% 0.20 260);
}→ See color-system.md for full palette
css
:root {
--color-primary: oklch(55% 0.20 260);
--color-primary-foreground: oklch(98% 0.01 260);
}
.dark {
--color-primary: oklch(65% 0.20 260);
}→ 查看color-system.md获取完整调色板
Typography Scale
排版比例
css
--font-display: 'Clash Display', sans-serif;
--font-sans: 'Satoshi', sans-serif;
--font-mono: 'JetBrains Mono', monospace;→ See typography.md for approved fonts
css
--font-display: 'Clash Display', sans-serif;
--font-sans: 'Satoshi', sans-serif;
--font-mono: 'JetBrains Mono', monospace;→ 查看typography.md获取认可的字体列表
Tailwind v4 @theme
Tailwind v4 @theme
css
@import "tailwindcss";
@theme {
--color-primary: var(--color-primary);
--font-display: var(--font-display);
}→ See tailwind-best-practices.md for config
css
@import "tailwindcss";
@theme {
--color-primary: var(--color-primary);
--font-display: var(--font-display);
}→ 查看tailwind-best-practices.md获取配置最佳实践
Best Practices
最佳实践
DO
建议做法
- Use OKLCH for wide gamut colors
- Define semantic tokens (primary, success, destructive)
- Support dark mode from the start
- Follow 60-30-10 color distribution
- Use approved fonts only
- 使用OKLCH实现广色域色彩
- 定义语义化令牌（primary、success、destructive等）
- 从项目初期就支持深色模式
- 遵循60-30-10色彩分配规则
- 仅使用认可的字体
DON'T
禁止做法
- Hard-code hex/RGB colors
- Use Inter, Roboto, Arial fonts
- Skip dark mode variables
- Create tokens without semantic meaning
- Mix color spaces (stick to OKLCH)
- 硬编码十六进制/RGB颜色值
- 使用Inter、Roboto、Arial字体
- 跳过深色模式变量定义
- 创建无语义含义的令牌
- 混合使用不同色彩空间（坚持使用OKLCH）