# 设计哲学风格库：20种体系

> 用于视觉设计（网页/PPT/PDF/信息图/配图/App等）的设计风格库。
> 每种风格提供：哲学内核 + 核心特征 + 提示词DNA（与场景模板组合使用）。

## 风格×场景×执行路径 速查表

| 风格 | 网页 | PPT | PDF | 信息图 | 封面 | AI生成 | 最佳路径 |
|------|:---:|:---:|:---:|:-----:|:---:|:-----:|---------|
| 01 Pentagram | ★★★ | ★★★ | ★★☆ | ★★☆ | ★★★ | ★☆☆ | HTML |
| 02 Stamen Design | ★★☆ | ★★☆ | ★★☆ | ★★★ | ★★☆ | ★★☆ | 混合 |
| 03 Information Architects | ★★★ | ★☆☆ | ★★★ | ★☆☆ | ★☆☆ | ★☆☆ | HTML |
| 04 Fathom | ★★☆ | ★★★ | ★★★ | ★★★ | ★★☆ | ★☆☆ | HTML |
| 05 Locomotive | ★★★ | ★★☆ | ★☆☆ | ★☆☆ | ★★☆ | ★★☆ | 混合 |
| 06 Active Theory | ★★★ | ★☆☆ | ★☆☆ | ★☆☆ | ★★☆ | ★★★ | AI生成 |
| 07 Field.io | ★★☆ | ★★☆ | ★☆☆ | ★★☆ | ★★★ | ★★★ | AI生成 |
| 08 Resn | ★★★ | ★☆☆ | ★☆☆ | ★☆☆ | ★★☆ | ★★☆ | AI生成 |
| 09 Experimental Jetset | ★★☆ | ★★☆ | ★★☆ | ★★☆ | ★★★ | ★★☆ | 混合 |
| 10 Müller-Brockmann | ★★☆ | ★★★ | ★★★ | ★★★ | ★★☆ | ★☆☆ | HTML |
| 11 Build | ★★★ | ★★★ | ★★☆ | ★☆☆ | ★★★ | ★☆☆ | HTML |
| 12 Sagmeister & Walsh | ★★☆ | ★★★ | ★☆☆ | ★★☆ | ★★★ | ★★★ | AI生成 |
| 13 Zach Lieberman | ★☆☆ | ★☆☆ | ★☆☆ | ★★☆ | ★★★ | ★★★ | AI生成 |
| 14 Raven Kwok | ★☆☆ | ★★☆ | ★☆☆ | ★★☆ | ★★★ | ★★★ | AI生成 |
| 15 Ash Thorp | ★★☆ | ★★☆ | ★☆☆ | ★☆☆ | ★★★ | ★★★ | AI生成 |
| 16 Territory Studio | ★★☆ | ★★☆ | ★☆☆ | ★★☆ | ★★★ | ★★★ | AI生成 |
| 17 Takram | ★★★ | ★★★ | ★★★ | ★★☆ | ★★☆ | ★☆☆ | HTML |
| 18 Kenya Hara | ★★☆ | ★★★ | ★★★ | ★☆☆ | ★★★ | ★☆☆ | HTML |
| 19 Irma Boom | ★☆☆ | ★★☆ | ★★★ | ★★☆ | ★★★ | ★★☆ | 混合 |
| 20 Neo Shen | ★★☆ | ★★☆ | ★★☆ | ★★☆ | ★★★ | ★★★ | AI生成 |

> 场景适配：★★★ = 强烈推荐 / ★★☆ = 适合 / ★☆☆ = 需改造
> AI生成：★★★ = 直出效果好 / ★★☆ = 需调整 / ★☆☆ = 建议HTML执行
> 最佳路径：AI生成（图片直出）/ HTML（代码渲染，数据精确）/ 混合（HTML布局+AI配图）

**核心规律**：有明确视觉元素的风格（插画/粒子/生成艺术）AI直出效果好；依赖精确排版和数据的风格（网格/信息架构/留白）HTML渲染更可控。

---

## 一、信息建筑派（01-04）
> 哲学：「数据不是装饰，是建筑材料」

### 01. Pentagram - Michael Bierut风格
**哲学**：字体即语言，网格即思想
**核心特征**：
- 极度克制的颜色（黑白+1个品牌色）
- 瑞士网格系统的现代演绎
- 字体排印作为主要视觉语言
- 负空间的战略性使用（60%+留白）

**提示词DNA**：
```
Pentagram/Michael Bierut style:
- Extreme typographic hierarchy, Helvetica/Univers family
- Swiss grid with precise mathematical spacing
- Black/white + one accent color (#HEX)
- Information architecture as visual structure
- 60%+ whitespace ratio
- Data visualization as primary decoration
```

**代表作**：Hillary Clinton 2016 campaign identity
**搜索关键词**：pentagram hillary logo system

---

### 02. Stamen Design - 数据诗学
**哲学**：让数据成为可触摸的风景
**核心特征**：
- 地图学思维应用于信息设计
- 算法生成的有机图形
- 温暖的数据可视化色调（赭石、鼠尾草绿、深蓝）
- 可交互的层级系统

**提示词DNA**：
```
Stamen Design aesthetic:
- Cartographic approach to data visualization
- Organic, algorithm-generated patterns
- Warm palette (terracotta, sage green, deep blues)
- Layered information like topographic maps
- Hand-crafted feel despite digital precision
- Soft shadows and depth
```

**代表作**：COVID-19 surge map
**搜索关键词**：stamen covid map visualization

---

### 03. Information Architects - 内容优先原则
**哲学**：设计不是装饰，是内容的建筑
**核心特征**：
- 极端的内容层级清晰度
- 只使用系统字体（优化阅读）
- 蓝色超链接传统的坚守
- 性能即美学

**提示词DNA**：
```
Information Architects philosophy:
- Content-first hierarchy, zero decorative elements
- System fonts only (SF Pro/Roboto/Inter)
- Classic blue hyperlinks (#0000EE)
- Reading-optimized line length (66 characters)
- Progressive disclosure of depth
- Text-heavy, fast-loading design
```

**代表作**：iA Writer app
**搜索关键词**：information architects ia writer

---

### 04. Fathom Information Design - 科学叙事
**哲学**：每一个像素都必须承载信息
**核心特征**：
- 科学期刊的严谨+设计的优雅
- 定量数据的精确可视化
- 冷静的专业色调（灰、海军蓝）
- 注释与引用系统的设计化

**提示词DNA**：
```
Fathom Information Design style:
- Scientific journal aesthetic meets modern design
- Precise data visualization (charts, timelines, scatter plots)
- Neutral scheme (grays, navy, one highlight color)
- Footnote/citation design integrated into layout
- Clean sans-serif (GT America/Graphik)
- Information density without clutter
```

**代表作**：Bill & Melinda Gates Foundation年度报告
**搜索关键词**：fathom information design gates foundation

---

## 二、运动诗学派（05-08）
> 哲学：「技术本身就是一种流动的诗」

### 05. Locomotive - 滚动叙事大师
**哲学**：滚动不是浏览，是旅程
**核心特征**：
- 丝滑的视差滚动
- 电影化的分镜叙事
- 大胆的空间留白
- 动态元素的精确编排

**提示词DNA**：
```
Locomotive scroll narrative style:
- Film-like scene composition with parallax depth
- Generous vertical spacing between sections
- Bold typography emerging from darkness
- Smooth motion blur effects
- Dark mode (near-black backgrounds)
- Strategic glowing accents
- Hero sections 100vh tall
```

**代表作**：Lusion.co website
**搜索关键词**：locomotive scroll lusion

---

### 06. Active Theory - WebGL诗人
**哲学**：让技术可见化即让技术可理解
**核心特征**：
- 3D粒子系统作为核心元素
- 实时渲染的数据可视化
- 鼠标交互驱动的世界构建
- 霓虹与深空的配色

**提示词DNA**：
```
Active Theory WebGL aesthetic:
- Particle systems representing data flow
- 3D visualization in depth space
- Neon gradients (cyan/magenta/electric blue) on dark
- Mouse-reactive environment
- Depth of field and bokeh effects
- Floating UI with glassmorphism
```

**代表作**：NASA Prospect
**搜索关键词**：active theory nasa webgl

---

### 07. Field.io - 算法美学
**哲学**：代码即设计师
**核心特征**：
- 生成艺术系统
- 每次访问都不同的动态图形
- 抽象几何的智能编排
- 技术感与艺术性的平衡

**提示词DNA**：
```
Field.io generative design style:
- Abstract geometric patterns, algorithmically generated
- Dynamic composition that feels computational
- Monochromatic base with vibrant accent
- Mathematical precision in spacing
- Voronoi diagrams or Delaunay triangulation
- Clean code aesthetic
```

**代表作**：British Council digital installations
**搜索关键词**：field.io generative design

---

### 08. Resn - 叙事驱动的交互
**哲学**：每个点击都推进故事
**核心特征**：
- 游戏化的用户旅程
- 强烈的情感化设计
- 插画与代码的深度结合
- 非线性的探索体验

**提示词DNA**：
```
Resn interactive storytelling approach:
- Illustrative style mixed with UI elements
- Gamified exploration (progress indicators)
- Warm color palette despite tech subject
- Character-driven design
- Scroll-triggered animations
- Editorial illustration meets product design
```

**代表作**：Resn.co.nz portfolio
**搜索关键词**：resn interactive storytelling

---

## 三、极简主义派（09-12）
> 哲学：「删减到无法再删」

### 09. Experimental Jetset - 概念极简
**哲学**：一个想法=一个形式
**核心特征**：
- 单一视觉隐喻贯穿整个设计
- 蓝/红/黄+黑白的蒙德里安色系
- 字体即图形
- 反商业的诚实设计

**提示词DNA**：
```
Experimental Jetset conceptual minimalism:
- Single visual metaphor for entire design
- Primary colors only (red/blue/yellow) + black/white
- Typography as main graphic element
- Grid-based with deliberate rule-breaking
- No photography, only type and geometry
- Anti-commercial, honest aesthetic
```

**代表作**：Whitney Museum identity
**搜索关键词**：experimental jetset whitney responsive w

---

### 10. Müller-Brockmann传承 - 瑞士网格纯粹主义
**哲学**：客观性即美
**核心特征**：
- 数学精确的网格系统（8pt基线）
- 绝对的左对齐或居中
- 单色或双色方案
- 功能主义至上

**提示词DNA**：
```
Josef Müller-Brockmann Swiss modernism:
- Mathematical grid system (8pt baseline)
- Strict alignment (flush left or centered)
- Two-color maximum (black + one accent)
- Akzidenz-Grotesk or similar rationalist typeface
- No decorative elements
- Timeless, objective aesthetic
```

**代表作**：《Grid Systems in Graphic Design》
**搜索关键词**：muller brockmann grid systems poster

---

### 11. Build - 当代极简品牌
**哲学**：精致的简单比复杂更难
**核心特征**：
- 奢侈品级的留白（70%+）
- 微妙的字重对比（200-600）
- 单一强调色的战略使用
- 呼吸感的节奏

**提示词DNA**：
```
Build studio luxury minimalism:
- Generous whitespace (70%+ of area)
- Subtle typography weight shifts (200 to 600)
- Single accent color used sparingly
- High-end product photography aesthetic
- Soft shadows and subtle gradients
- Golden ratio proportions
```

**代表作**：Build studio portfolio
**搜索关键词**：build studio london branding

---

### 12. Sagmeister & Walsh - 快乐极简
**哲学**：美即功能的情感维度
**核心特征**：
- 意外的色彩爆发
- 手工感与数字的融合
- 正能量的视觉语言
- 实验性但可读

**提示词DNA**：
```
Sagmeister & Walsh joyful philosophy:
- Unexpected color bursts on minimal base
- Handmade elements (physical objects in digital)
- Optimistic visual language
- Experimental typography that remains legible
- Human warmth through imperfection
- Mix of analog and digital aesthetics
```

**代表作**：The Happy Show
**搜索关键词**：sagmeister walsh happy show

---

## 四、实验先锋派（13-16）
> 哲学：「打破规则即创造规则」

### 13. Zach Lieberman - 代码诗学
**哲学**：编程即绘画
**核心特征**：
- 手绘感的算法图形
- 实时生成艺术
- 黑白的纯粹表达
- 工具本身的可见性

**提示词DNA**：
```
Zach Lieberman code-as-art style:
- Hand-drawn aesthetic generated by code
- Black and white only, no color
- Real-time generative patterns
- Sketch-like line quality
- Visible process/grid/construction lines
- Poetic interpretation of algorithms
```

**代表作**：openFrameworks creative coding
**搜索关键词**：zach lieberman openframeworks generative

---

### 14. Raven Kwok - 参数化美学
**哲学**：系统的美胜过个体的美
**核心特征**：
- 分形与递归图形
- 黑白高对比
- 建筑化的信息结构
- 东方园林的算法演绎

**提示词DNA**：
```
Raven Kwok parametric aesthetic:
- Fractal patterns and recursive structures
- High-contrast black and white
- Architectural visualization of data
- Chinese garden principles in algorithm form
- Intricate detail that rewards zooming
- Processing/Creative coding aesthetic
```

**代表作**：Raven Kwok generative art exhibitions
**搜索关键词**：raven kwok processing generative art

---

### 15. Ash Thorp - 赛博诗意
**哲学**：未来不是冰冷的，是孤独的诗
**核心特征**：
- 电影级的光影
- 赛博朋克的温暖版本（橙/青，非冷蓝）
- 故事性的概念设计
- 工业美学的精致化

**提示词DNA**：
```
Ash Thorp cinematic concept art:
- Film-grade lighting and atmospheric effects
- Warm cyberpunk (orange/teal, NOT cold blue)
- Industrial design meets luxury
- Narrative concept art feel
- Volumetric lighting and god rays
- Blade Runner warmth over Tron coldness
```

**代表作**：Ghost in the Shell concept art
**搜索关键词**：ash thorp ghost shell concept art

---

### 16. Territory Studio - 屏幕界面虚构
**哲学**：未来UI的今日想象
**核心特征**：
- 科幻电影中的屏幕设计（FUI）
- 全息投影感
- 多层叠加的数据可视化
- 可信的未来感

**提示词DNA**：
```
Territory Studio FUI (Fantasy User Interface):
- Fantasy User Interface design
- Holographic projection aesthetics
- Orange/amber monochrome or cyan accents
- Multiple overlapping data layers
- Believable future technology
- Technical readouts and data streams
```

**代表作**：Blade Runner 2049 screen graphics
**搜索关键词**：territory studio blade runner interface

---

## 五、东方哲学派（17-20）
> 哲学：「留白即内容」

### 17. Takram - 日式思辨设计
**哲学**：技术是思考的媒介
**核心特征**：
- 概念原型的优雅
- 柔和的科技感（圆角、柔和阴影）
- 图表即艺术
- 谦逊的精致

**提示词DNA**：
```
Takram Japanese speculative design:
- Elegant concept prototypes and diagrams
- Soft tech aesthetic (rounded corners, gentle shadows)
- Charts and diagrams as art pieces
- Modest sophistication
- Neutral natural colors (beige, soft gray, muted green)
- Design as philosophical inquiry
```

**代表作**：NHK Fabricated City
**搜索关键词**：takram nhk data visualization

---

### 18. Kenya Hara - 空的设计
**哲学**：设计不是填充，是清空
**核心特征**：
- 极致的留白（80%+）
- 纸张质感的数字化
- 白色的层次（暖白、冷白、米白）
- 触觉的视觉化

**提示词DNA**：
```
Kenya Hara "emptiness" design:
- Extreme whitespace (80%+)
- Paper texture and tactility in digital form
- Layers of white (warm white, cool white, off-white)
- Minimal color (if any, very desaturated)
- Design by subtraction not addition
- Zen simplicity
```

**代表作**：Muji art direction, 《Designing Design》
**搜索关键词**：kenya hara designing design muji

---

### 19. Irma Boom - 书籍建筑师
**哲学**：信息的物理诗学
**核心特征**：
- 非线性的信息架构
- 边缘与边界的游戏
- 意外的颜色组合（粉+红、橙+棕）
- 手工艺的数字转译

**提示词DNA**：
```
Irma Boom book architecture style:
- Non-linear information structure
- Play with edges, margins, boundaries
- Unexpected color combos (pink+red, orange+brown)
- Handcraft translated to digital
- Dense information inviting exploration
- Editorial design, unconventional grid
```

**代表作**：SHV Think Book (2136 pages)
**搜索关键词**：irma boom shv think book

---

### 20. Neo Shen - 东方光影诗
**哲学**：技术需要人的温度
**核心特征**：
- 水墨晕染的数字化
- 柔和的光晕效果
- 诗意的留白
- 情感化的色彩（深蓝、暖灰、柔金）

**提示词DNA**：
```
Neo Shen poetic Chinese aesthetic:
- Digital interpretation of ink wash painting
- Soft glow and light diffusion effects
- Poetic negative space
- Emotional palette (deep blues, warm grays, soft gold)
- Calligraphic influences in typography
- Atmospheric depth
```

**代表作**：Neo Shen digital art series
**搜索关键词**：neo shen digital ink wash art

---

## 提示词使用说明

**组合公式**：`[风格提示词DNA] + [场景模板（见scene-templates.md）] + [具体内容]`

### 核心原则：描述情绪而非布局（Mood, Not Layout）

AI图像生成的关键：短提示词 > 长提示词。描述3句情绪和内容，比30行布局细节效果更好。

| 杀死多样性的写法 | 激发创造力的写法 |
|----------------|----------------|
| 指定颜色比例（60%/25%/15%） | 描述情绪（"warm like Sunday morning"） |
| 规定布局位置（"标题居中，图片右侧"） | 引用具体美学（"Pentagram editorial feel"） |
| 限制角色姿势和表情 | 让AI自然诠释风格 |
| 列出所有要包含的视觉元素 | 描述观众应该感受到什么 |

### Good / Bad 示例

**Bad — 过度约束（AI生成出来空且平）：**
```
Professional presentation slide. Dark background, light text.
Title centered at top. Two columns below. Left column: bullet points.
Right column: bar chart. Colors: navy 60%, white 30%, gold 10%.
Font size: title 36pt, body 18pt. Margins: 40px all sides.
```

**Good — 情绪驱动（生成多样且有质感）：**
```
A data visualization that feels like a Bloomberg Businessweek
editorial spread. The key number "28.5%" should dominate the
composition like a headline. Warm cream tones with sharp black
typography. The data tells a story of dramatic channel shift.
```

### 执行路径选择

根据速查表的「最佳路径」列选择：
- **AI生成**：有明确视觉元素的风格（06/07/12/13/14/15/16/20），用 Gemini/Midjourney 直出
- **HTML渲染**：依赖精确排版的风格（01/03/04/10/11/17/18），代码控制数据和布局
- **混合**：HTML做骨架布局 + AI生成配图/背景（02/05/08/09/19）

### 质量控制

1. ❌ 不要直接写 "in the style of Pentagram" → ✅ 用具体设计特征描述
2. 文字在AI生成中常出错 → 生成后替换文字
3. 比例易失真 → 明确指定 aspect ratio
4. 先生成3-5个变体，选择最佳后细化

**默认审美禁区**（用户可按自己品牌 override）：
- ❌ 赛博霓虹/深蓝色底（#0D1117）
- ❌ 封面图加个人署名/水印

---

**版本**：v2.1
**更新日期**：2026-02-13
**适用场景**：网页/PPT/PDF/信息图/封面/配图/App等所有视觉设计
**与 image-to-slides 联动**：PPT场景可直接引用本文件风格，通过 image-to-slides skill 执行生成