ismail c5f76b3855
Some checks are pending
Build and Push Docker Image / build (push) Waiting to run
updates
2026-05-11 14:45:30 +03:00

592 lines
18 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# 设计哲学风格库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 执行生成