designing-systems

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Designing Systems

设计系统构建

Agent Workflow (MANDATORY)

Agent工作流（强制执行）

Before ANY design system work, use

TeamCreate

to spawn 3 agents:

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.

在开展任何设计系统工作之前，使用

TeamCreate

生成3个Agent：

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

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）