技能：设计系统

类型：核心技能 旧版来源：skill/seo-design-system.txt 说明：这是对旧版英文文件名 skill 的中文命名入口，后续优先使用本文件。

使用建议

• 先通读核心原则，再提炼为页面策略、清单或执行步骤。
• 需要补背景时，再回到旧版来源或相关 Wiki / 专题技能继续展开。
• 输出时优先给出可执行动作，不要只复述概念。

核心内容

目标

通过设计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配置文件模板

// 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-中文技能-核心技能-设计系统-0f3e50.md（仅本地保留，不入库不部署）