设计系统创建（元技能）

创建具有个性的独特设计系统的完整工作流程。

安装

OpenClaw / Moltbot / Clawbot

bash
npx clawhub@latest install design-system-creation

适用场景

• - 启动需要视觉标识的新产品
• 重构样式分散的现有设计
• 构建包含设计令牌的组件库
• 希望超越通用的 Tailwind/Bootstrap 美学

工作流程概览

1. 1. 美学基础 → 在编码前记录风格氛围
2. 色彩令牌系统 → CSS 变量 + Tailwind + TypeScript
3. 字体排印系统 → 字体堆栈 + 比例 + 模式
4. 表面组件 → 使用 CVA 的分层原语
5. 动效令牌 → 一致的动画时序
6. 加载状态 → 骨架屏 + 闪烁模式

步骤 1：美学基础

阅读： ai/skills/design-systems/distinctive-design-systems

在编写 CSS 之前，先记录美学风格：

markdown

风格氛围

灵感来源

• - [参考 1 - 从中借鉴什么]
• [参考 2 - 从中借鉴什么]

唤起的情感

情感	实现方式
[X]	[具体技术]
[Y]

[具体技术] |

可参考的成熟方向

步骤 2：色彩令牌架构

阅读： ai/skills/design-systems/distinctive-design-systems

创建三层令牌系统：

css
/ 1. CSS 变量（数据源） /
:root {
--tone-primary: 76, 204, 255;
--primary: 200 90% 65%;
--success: 154 80% 60%;
--destructive: 346 80% 62%;
}

typescript
// 2. Tailwind 配置
colors: {
primary: hsl(var(--primary)),
tone: { primary: rgb(var(--tone-primary)) },
}

typescript
// 3. TypeScript 令牌（可选）
export const colors = {
primary: hsl(var(--primary)),
};

步骤 3：字体排印系统

阅读： ai/skills/design-systems/distinctive-design-systems

定义字体和比例：

css
:root {
--font-display: Orbitron, system-ui;
--font-mono: Share Tech Mono, monospace;
--font-sans: Inter, system-ui;

--typo-scale: 0.88; / 移动端 /
}

@media (min-width: 640px) {
:root { --typo-scale: 1; }
}

字体排印模式

css
/ 杂志风格数字 /
.metric { font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/ 标签 /
.label { text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; }

步骤 4：表面组件

阅读： ai/skills/design-systems/design-system-components

使用 CVA 构建分层表面原语：

tsx
const surfaceVariants = cva(
rounded-lg backdrop-blur-sm transition-colors,
{
variants: {
layer: {
panel: bg-tone-cadet/40 border border-tone-jordy/10,
tile: bg-tone-midnight/60 border border-tone-jordy/5,
chip: bg-tone-cyan/10 border border-tone-cyan/20 rounded-full,
},
},
}
);

export function Surface({ layer, children }: SurfaceProps) {
return

步骤 5：动效令牌

阅读： ai/skills/design-systems/distinctive-design-systems

定义一致的动画时序：

javascript
// tailwind.config.ts
keyframes: {
shimmer: { 0%: { backgroundPosition: 200% 0 }, 100%: { backgroundPosition: -200% 0 } },
pulse-glow: { 0%, 100%: { opacity: 1 }, 50%: { opacity: 0.5 } },
slide-in: { 0%: { opacity: 0, transform: translateY(10px) }, 100%: { opacity: 1, transform: translateY(0) } },
},
animation: {
shimmer: shimmer 1.5s ease-in-out infinite,
pulse-glow: pulse-glow 1.8s ease-in-out infinite,
slide-in: slide-in 0.2s ease-out,
}

步骤 6：加载状态

阅读： ai/skills/design-systems/loading-state-patterns

创建符合美学风格的骨架屏组件：

tsx
export function Skeleton({ className }: { className?: string }) {
return (
className={cn(
rounded-md bg-muted animate-shimmer,
bg-gradient-to-r from-muted via-muted-foreground/10 to-muted bg-[length:200%_100%],
className
)}
/>
);
}

组件技能参考

文件结构

styles/
├── globals.css # CSS 变量、基础样式
├── design-tokens.ts # TypeScript 导出
└── theme.css # 组件模式

tailwind.config.ts # 令牌集成

components/
├── ui/
│ ├── surface.tsx # 表面原语
│ ├── skeleton.tsx # 加载状态
│ └── button.tsx # 变体组件

绝对不要做

• - 绝不在记录美学风格之前开始编码 — 氛围先于 CSS
• 绝不使用纯黑 (#000) 作为基底 — 始终使用带色调的黑色来营造深度
• 绝不使用纯白 (#fff) 作为文字颜色 — 使用与调色板匹配的带色调白色
• 绝不跳过设计令牌而使用硬编码值 — 令牌防止风格漂移
• 绝不创建没有变体系统的组件 — 使用 CVA 或类似方案确保一致性
• 绝不使用 Inter/Roboto 作为标题字体 — 展示字体创造独特性
• 绝不使用默认的 Tailwind 颜色 — 定义自己的调色板
• 绝不在玻璃效果上跳过背景模糊 — 玻璃面板需要模糊才能生效
• 绝不对可读内容应用装饰性图案 — 仅用于背景装饰
• 绝不使用不带透明度的高饱和度颜色 — 使用 rgba() 进行调制

检查清单

• - [ ] 记录美学基础（氛围、灵感、情感）
• [ ] 创建色彩令牌系统（CSS + Tailwind + TS）
• [ ] 定义字体排印堆栈和比例
• [ ] 构建表面原语组件
• [ ] 添加动效令牌和动画
• [ ] 创建加载状态组件
• [ ] 记录反模式（不要做什么）