视觉风格和反 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
常见坑
- 风格不匹配场景——B 端工具用消费类风格
- 照搬模板——dribbble 上看到就抄
- AI 味太重——发光球 + 紫色渐变 + 玻璃拟态全上
- 过度装饰——为了"好看"加了一堆动效和阴影
- 多种风格混用——首页极简、内页粗野
- 不考虑实现成本——复杂动效前端做不出
- 缺乏独特性——和同类产品长得一样
配套模板
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 → 风格指引交接前端
zhaoxuya520