设计系统创建（元技能）

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

安装

OpenClaw / Moltbot / Clawbot

npx clawhub@latest install design-system-creation

使用时机

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

工作流程概述

1. Aesthetic Foundation   → Document the vibe before code
2. Color Token System     → CSS variables + Tailwind + TypeScript
3. Typography System      → Font stack + scale + patterns
4. Surface Components     → Layered primitives with CVA
5. Motion Tokens          → Consistent animation timing
6. Loading States         → Skeleton + shimmer patterns

步骤一：美学基础

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

在编写CSS之前，先记录美学方向：

## The Vibe
[1-2 sentences describing the visual feel]

## Inspirations
- [Reference 1 - what to take from it]
- [Reference 2 - what to take from it]

## Emotions to Evoke
| Emotion | How It's Achieved |
|---------|-------------------|
| [X] | [specific technique] |
| [Y] | [specific technique] |

可参考的成熟方向

第二步：色彩令牌架构

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

创建三层令牌系统：

/* 1. CSS Variables (source of truth) */
:root {
  --tone-primary: 76, 204, 255;
  --primary: 200 90% 65%;
  --success: 154 80% 60%;
  --destructive: 346 80% 62%;
}

// 2. Tailwind Config
colors: {
  primary: 'hsl(var(--primary))',
  tone: { primary: 'rgb(var(--tone-primary))' },
}

// 3. TypeScript Tokens (optional)
export const colors = {
  primary: 'hsl(var(--primary))',
};

第三步：排版系统

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

定义字体和比例：

:root {
  --font-display: 'Orbitron', system-ui;
  --font-mono: 'Share Tech Mono', monospace;
  --font-sans: 'Inter', system-ui;
  
  --typo-scale: 0.88;  /* Mobile */
}

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

排版模式

/* Magazine-style numbers */
.metric { font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

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

第四步：表面组件

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

使用CVA构建分层表面基元：

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 <div className={surfaceVariants({ layer })}>{children}</div>;
}

第五步：动效令牌

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

定义一致的动画时序：

// 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',
}

第六步：加载状态

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

创建符合你审美风格的骨架组件：

export function Skeleton({ className }: { className?: string }) {
  return (
    <div
      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 variables, base styles
├── design-tokens.ts     # TypeScript exports
└── theme.css            # Component patterns

tailwind.config.ts       # Token integration

components/
├── ui/
│   ├── surface.tsx      # Surface primitive
│   ├── skeleton.tsx     # Loading states
│   └── button.tsx       # Variant components

绝对不要做

• 切勿在记录美学风格之前开始编写代码——先有氛围感，再有CSS
• 切勿使用纯黑色（#000）作为基础色——始终使用带色调的黑色来营造层次感
• 切勿使用纯白色（#fff）作为文本颜色— 使用与调色板相匹配的浅色调白色
• 切勿跳过设计令牌而直接使用硬编码值— 令牌能防止设计偏差
• 切勿创建没有变体系统的组件— 使用 CVA 或类似工具以确保一致性
• 切勿在标题中使用 Inter/Roboto 字体— 展示字体能创造出独特性
• 切勿使用默认的 Tailwind 颜色— 定义你自己的调色板
• 切勿在玻璃效果中跳过 backdrop-filter blur— 玻璃面板需要模糊效果才能发挥作用
• 切勿在可读内容上应用装饰性图案— 仅限背景装饰
• 切勿使用不透明的高饱和度颜色— 使用 rgba() 进行调制

检查清单

• 记录美学基础（氛围、灵感、情感）
• 创建颜色令牌系统（CSS + Tailwind + TS）
• 定义排版堆栈和比例
• 构建 Surface 基础组件
• 添加动效令牌和动画
• 创建加载状态组件
• 记录反模式（不应采取的做法）