视觉风格和反 AI 化

适用场景

• 设计前的视觉风格定调
• 避免输出泛化、AI 味明显的页面
• 不同产品场景的风格匹配
• 给设计师/前端的视觉指引

核心原则

1. 风格匹配产品场景
   不要把不同类型产品都设计成"企业白板风"

2. 视觉服务于功能
   装饰为内容服务，不是反过来

3. 反 AI 化
   避免常见的 AI 模板化效果
   保留独特性和表现力

4. 一致性
   一旦定了风格，全产品保持

风格库

1. 极简 SaaS

特点：白底、网格、清晰层级、克制装饰
适用：B 端工具、协作产品、效率工具
代表：Linear、Notion、Stripe

要素：
  - 颜色：单一主色 + 灰阶
  - 字体：Inter / SF Pro
  - 圆角：4~8px
  - 阴影：极轻
  - 留白：充足

2. 企业专业

特点：深色侧栏 + 白色内容区、高信息密度
适用：企业后台、数据平台
代表：GitLab、IBM Carbon、Salesforce

要素：
  - 颜色：深蓝 / 深紫 + 灰
  - 字体：系统字体
  - 圆角：2~4px
  - 阴影：几乎没有
  - 数据密度：高

3. 暗黑科技

特点：深色背景、霓虹色点缀、未来感
适用：开发者工具、数据可视化、监控
代表：Vercel、Dark Reader、各种 dashboard

要素：
  - 颜色：黑 / 深灰 + 荧光色
  - 字体：等宽字体（代码）
  - 圆角：4~12px
  - 发光效果（克制使用）
  - 渐变背景（克制使用）

4. 液态玻璃

特点：半透明、模糊背景、深度感
适用：iOS 26 / macOS 26 风格、艺术类应用
代表：Apple Liquid Glass、部分音乐/视频应用

要素：
  - 颜色：透明 + 模糊背景色
  - 字体：SF Pro
  - 圆角：12~24px
  - backdrop-filter: blur
  - 微妙的渐变和阴影

5. 数据密集

特点：紧凑布局、表格优先、最小装饰
适用：金融、监控、报表、数据分析
代表：Bloomberg Terminal、各种 BI 工具

要素：
  - 颜色：极简灰阶 + 红绿（涨跌）
  - 字体：等宽 + 系统字体
  - 圆角：0~2px
  - 行高：紧凑
  - 信息密度：极高

6. 开发者工具

特点：等宽字体、代码高亮、命令行美学
适用：CLI 工具、IDE、代码平台
代表：GitHub、VSCode、Terminal

要素：
  - 颜色：深色 + 语法高亮色
  - 字体：JetBrains Mono / Fira Code
  - 圆角：4~6px
  - 等宽布局

7. 编辑排版

特点：内容优先、阅读友好、文学感
适用：博客、文档、新闻
代表：Medium、The New York Times

要素：
  - 颜色：黑白为主 + 单一强调色
  - 字体：衬线字体（标题）+ 无衬线（正文）
  - 圆角：0~4px
  - 行高：宽松
  - 段落间距：充足

8. Bento 网格

特点：分块卡片、丰富色彩、模块化
适用：产品落地页、个人主页
代表：Apple 产品页、各种 Bento 风格站

要素：
  - 颜色：丰富 + 大色块
  - 圆角：16~24px
  - 卡片化布局
  - 不同尺寸混合

9. 新粗野（Neo-Brutalism）

特点：大字体、对比强、未抛光感
适用：创意工具、个性化产品、年轻向
代表：部分 Web3、设计师工具

要素：
  - 颜色：高饱和、对比色
  - 字体：粗体大字
  - 圆角：0px
  - 黑色描边
  - 偏移阴影（4px 4px 0 黑色）

10. 温暖人文

特点：圆润、柔色、亲和
适用：教育、健康、儿童、生活
代表：Headspace、Duolingo

要素：
  - 颜色：柔和的暖色
  - 字体：圆体
  - 圆角：12~24px
  - 插画为主
  - 阴影柔和

反 AI 化检查清单

❌ 必须避免的 AI 模板化效果：
  - 漂浮发光球（Glow Orbs）
  - 假 3D 元素（粗糙的 3D 渲染）
  - 通用 AI 插画（Memphis 风格滥用）
  - 过度渐变（每个元素都渐变）
  - 模板化大标题（"Build Better, Faster"）
  - 网格背景 + 紫色渐变（已被滥用）
  - 玻璃拟态滥用（毛玻璃所有元素）
  - "AI / Magic / Smart" 等空洞 buzzword
  - 默认的 SaaS 配色（深紫 + 浅紫）
  - 万能的"科技感"装饰

⚠️ 需要克制使用：
  - 渐变（只用在主 CTA）
  - 阴影（不要每个元素都有）
  - 圆角（不要全部超大圆角）
  - 动效（不要每个元素都飞入）

✅ 提升独特性的做法：
  - 真实业务字段和状态
  - 真实用户头像（不是默认 avatar）
  - 真实数据（不是 Lorem Ipsum）
  - 自定义图标（不是 Heroicons 默认）
  - 品牌色（不是默认 indigo-600）
  - 特定场景的小细节

风格定义模板

## 视觉风格定义：[产品名]

### 选用风格
[风格名] + 理由

### 风格要素

颜色：
  - 主色：#XXXXXX（含义）
  - 辅助色：#XXXXXX
  - 中性色：灰阶 9 级
  - 状态色：success / warning / danger / info

字体：
  - 西文：[字体名]
  - 中文：[字体名]
  - 等宽：[字体名]（代码场景）

圆角：[规范]
阴影：[规范]
间距：[基础单位 4 / 8 / 16 / 24]

### 反 AI 化清单

明确不用：
  ❌ 漂浮发光球
  ❌ 通用 SaaS 紫色渐变
  ❌ 假 3D
  ❌ 玻璃拟态滥用

克制使用：
  ⚠️ 渐变（仅主 CTA）
  ⚠️ 阴影（仅卡片和悬浮）

突出独特：
  ✅ 自定义图标集
  ✅ 真实业务示例
  ✅ 品牌特色细节

工作流程

1. 识别产品场景和品类
2. 从风格库选 1 个主风格
3. 列出风格要素（颜色/字体/圆角...）
4. 列出反 AI 化检查项
5. 与产品方/用户研究对齐
6. 输出风格定义文档
7. 转交 design-tokens 实现

质量自检

□ 风格是否匹配产品场景
□ 是否避免了所有 AI 模板化效果
□ 是否克制使用了渐变 / 阴影 / 大圆角
□ 是否突出了独特性
□ 风格要素是否完整（颜色 / 字体 / 圆角 / 阴影 / 间距）
□ 是否能转化为 design tokens

常见坑

1. 风格不匹配场景——B 端工具用消费类风格
2. 照搬模板——dribbble 上看到就抄
3. AI 味太重——发光球 + 紫色渐变 + 玻璃拟态全上
4. 过度装饰——为了"好看"加了一堆动效和阴影
5. 多种风格混用——首页极简、内页粗野
6. 不考虑实现成本——复杂动效前端做不出
7. 缺乏独特性——和同类产品长得一样

配套模板

• templates/visual-style-template.md — 风格定义模板
• templates/anti-ai-style-checklist-template.md — 反 AI 化检查清单

与其他 skill 的协作

上游：
  product-manager 的 positioning → 产品定位

平行：
  hig-principles → 平台原则约束

下游：
  design-tokens → 风格转化为可执行 tokens
  design-system-mapping → 选择参考系统
  design-handoff → 风格指引交接前端