SuperAPI AI Directory
Partner中文AI newsFavorites
Skillsvisual-style

visual-style

Design & creation

View repository

Updated 10-16 10:18

About this skill

Visual Style and Anti-AI

Applicable Scenarios

  • Setting the visual style tone before design
  • Avoiding generalized, obviously AI-flavored pages
  • Matching styles to different product scenarios
  • Visual guidance for designers/frontend

Core Principles

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

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

  1. Anti-AI Avoid common AI-templated effects Preserve uniqueness and expressiveness

  2. Consistency Once the style is set, keep it across the whole product


## 风格库

### 1. 极简 SaaS

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

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

2. Enterprise Professional

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

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

3. Dark Tech

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

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

4. Liquid Glass

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

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

5. Data-Dense

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

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

6. Developer Tools

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

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

7. Editorial Typography

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

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

8. Bento Grid

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

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

9. Neo-Brutalism

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

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

10. Warm Humanist

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

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

Anti-AI Checklist

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

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

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

Style Definition Template

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

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

### 风格要素

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

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

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

### 反 AI 化清单

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

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

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

Workflow

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

Quality Self-Check

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

Common Pitfalls

  1. Style doesn't match the scenario——Using a consumer style for a B2B tool
  2. Copying templates——Copying whatever you see on dribbble
  3. Too much AI flavor——Glowing orbs + purple gradients + glassmorphism all at once
  4. Over-decoration——Adding a bunch of animations and shadows just to "look good"
  5. Mixing multiple styles——Minimalist homepage, brutalist inner pages
  6. Ignoring implementation cost——Complex animations that the frontend can't build
  7. Lack of uniqueness——Looks the same as similar products

Supporting Templates

  • templates/visual-style-template.md — Style Definition Template
  • templates/anti-ai-style-checklist-template.md — Anti-AI Checklist

Collaboration with Other Skills

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

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

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