seo design system

# 技能：SEO网站设计系统

## 目标
通过设计Token系统化方法，让AI生成的网站不再千篇一律，建立有辨识度的个人品牌视觉风格。

## 使用时机
- 新站需要确定视觉风格
- AI生成的页面看起来太像"AI味道"
- 想建立统一的品牌设计语言
- 落地页缺乏设计感导致转化率低

## 核心问题：AI生成页面的千篇一律

### 根源
- AI（如v0、Bolt、Lovable）基于原子设计方法论
- 从设计系统中选取最高频模式组合
- 结果：所有AI生成的网站看起来相似

### 解决方案：设计Token约束

设计Token是对视觉属性的标准化定义。通过定义清晰的Token系统，约束AI在指定范围内发挥。

## 设计Token体系

### 1. 颜色系统
```
主色（Primary）：品牌核心色
  - light: #xxxxxx
  - DEFAULT: #xxxxxx
  - dark: #xxxxxx

辅色（Secondary）：辅助强调色
  - light: #xxxxxx
  - DEFAULT: #xxxxxx
  - dark: #xxxxxx

中性色（Neutral）：背景/文字/边框
  - 50/100/200...900: 从浅到深的灰度阶梯

语义色：
  - success: 绿色系
  - warning: 黄色系
  - error: 红色系
```

### 2. 字体系统
```
标题字体：Inter / Geist / Satoshi（现代几何无衬线）
正文字体：Inter / system-ui
代码字体：JetBrains Mono / Fira Code

字号阶梯（Desktop / Mobile）：
  - h1: 48px/32px
  - h2: 36px/28px
  - h3: 24px/20px
  - body: 16px/15px
  - small: 14px/13px
```

### 3. 间距系统
基于4px基准：
```
xs: 4px
sm: 8px
md: 16px
lg: 24px
xl: 32px
2xl: 48px
3xl: 64px
4xl: 96px
```

### 4. 圆角与阴影
```
圆角：
  - none: 0px
  - sm: 4px
  - md: 8px
  - lg: 12px
  - xl: 16px
  - full: 9999px

阴影：
  - sm: 0 1px 2px rgba(0,0,0,0.05)
  - md: 0 4px 6px rgba(0,0,0,0.07)
  - lg: 0 10px 15px rgba(0,0,0,0.1)
  - xl: 0 20px 25px rgba(0,0,0,0.15)
```

### 5. 过渡动画
```
duration: 150ms (快), 300ms (标准), 500ms (慢)
easing: ease-out (出场), ease-in-out (平滑)
```

## 设计风格参考

### Digital Ocean Pop（推荐风格）
- 新粗野主义（Neo-Brutalism）+ 像素艺术混合
- 特点：粗边框、硬阴影、明亮配色、像素化点缀
- 适用：工具站、SaaS站、技术博客
- 优势：辨识度高，与常见的Material Design/Ant Design形成差异化

### 提取设计Token的四步法

**第1步：找设计参考**
- Dribbble、Behance、Awwwards
- 竞品网站（Similarweb高流量站）
- 保存3-5个你喜欢的网站截图

**第2步：提取设计基因（用Gemini 3 Pro / Claude Vision）**
```
提示词模板：
"请分析这个网页截图，提取以下设计基因：
1. 颜色系统（主色/辅色/背景色的hex值）
2. 字体系统（标题/正文字体特征）
3. 间距规律（元素间的空间关系）
4. 圆角与阴影使用规律
5. 整体设计风格归类

输出格式：结构化的设计Token JSON"
```

**第3步：AI生成落地页**
- 将设计Token作为Prompt前缀约束AI
- 指定页面结构（H1→副标题→功能区→特性→FAQ→CTA）
- 要求AI在Token约束下发挥

**第4步：迭代优化**
- 对比生成页面和原始参考
- 微调Token参数
- 建立自己的设计Token配置文件

## 技术栈推荐

```
框架：Next.js 16+（SSR/SSG友好）
样式：Tailwind CSS（用Token配置theme）
组件：Radix UI（无障碍优先）
动画：Framer Motion
图标：Lucide Icons
```

## 设计Token配置文件模板

```typescript
// design-tokens.ts
export const tokens = {
  colors: {
    primary: { light: '#...', DEFAULT: '#...', dark: '#...' },
    secondary: { light: '#...', DEFAULT: '#...', dark: '#...' },
    neutral: { 50: '#...', 100: '#...', /* ... */ 900: '#...' },
    semantic: { success: '#...', warning: '#...', error: '#...' },
  },
  typography: {
    heading: 'var(--font-heading)',
    body: 'var(--font-body)',
    sizes: { h1: '3rem', h2: '2.25rem', h3: '1.5rem', body: '1rem', small: '0.875rem' },
  },
  spacing: { xs: '0.25rem', sm: '0.5rem', md: '1rem', lg: '1.5rem', xl: '2rem', '2xl': '3rem', '3xl': '4rem' },
  radii: { none: '0', sm: '0.25rem', md: '0.5rem', lg: '0.75rem', xl: '1rem', full: '9999px' },
  shadows: { sm: '...', md: '...', lg: '...', xl: '...' },
  transitions: { fast: '150ms', normal: '300ms', slow: '500ms' },
}
```

## 必须产出

- [ ] 设计参考收集（3-5个网站截图与分析）
- [ ] 自身品牌的设计Token配置文件
- [ ] 应用Token后的页面截图对比（前后/竞品对比）
- [ ] 设计一致性检查清单

## 反模式

- ❌ 不使用Token系统，每次让AI自由发挥
- ❌ 完全照搬某个竞品的设计（失去差异化）
- ❌ Token定义过于复杂反而约束过度
- ❌ 忽略移动端的设计Token适配

## 参考资料
- raw/seo知识库/seoCheatSheet/Design.md
- wiki/concepts/落地页设计.txt
- wiki/concepts/On-Page-SEO.txt

本文档为站内渲染。原始文件本地路径：saas/source/seo-llm/skill-seo-design-system-e5e221.txt（仅本地保留，不入库不部署）