# 场景模板库：按输出类型组织

> 与 design-styles.md 的「风格配方」组合使用。
> 公式：`[风格配方] + [场景模板] + [具体内容描述]`

---

## 1. 公众号封面 / 文章题图

**规格**：
- 封面图：2.35:1（900×383px 或 1200×510px）
- 正文插图：16:9（1200×675px）或 4:3（1200×900px）

**关键设计要素**：
- 视觉冲击力优先（用户在信息流中快速扫过）
- 文字极少或无文字（公众号标题会覆盖在上面）
- 色彩饱和度适中（微信阅读环境偏白）
- 避免过度细节（缩略图也要可辨识）

**推荐风格**：01 Pentagram / 11 Build / 12 Sagmeister / 18 Kenya Hara / 07 Field.io

**场景提示词模板**：
```
[风格配方插入此处]
- Article cover image for WeChat subscription
- Landscape format, 2.35:1 aspect ratio
- Bold visual impact, minimal or no text
- Moderate color saturation for white reading environment
- Must remain recognizable as thumbnail
- Clean composition with clear focal point
```

---

## 2. 正文配图 / 概念插画

**规格**：
- 16:9（1200×675px）最通用
- 1:1（800×800px）适合强调
- 4:3（1200×900px）适合信息密集

**关键设计要素**：
- 服务于文章论点，不是装饰
- 与上下文形成视觉节奏
- 简洁表达一个核心概念
- AI生成优先，HTML截图仅在精确数据表格时用

**推荐风格**：根据文章调性选择，常用 01/04/10/17/18

**场景提示词模板**：
```
[风格配方插入此处]
- Article illustration, concept visualization
- [16:9 / 1:1 / 4:3] aspect ratio
- Single clear concept: [描述核心概念]
- Serve the argument, not decoration
- [Light/Dark] background to match article tone
```

---

## 3. 信息图 / 数据可视化

**规格**：
- 竖版长图：1080×1920px（手机阅读）
- 横版：1920×1080px（文章内嵌）
- 方形：1080×1080px（社交媒体）

**关键设计要素**：
- 信息层级清晰（标题 → 核心数据 → 细节）
- 数据准确，不编造
- 视觉引导线（用户阅读路径）
- 适当使用图标/图表辅助理解

**推荐风格**：04 Fathom / 10 Müller-Brockmann / 02 Stamen / 17 Takram

**场景提示词模板**：
```
[风格配方插入此处]
- Infographic / data visualization
- [Vertical 1080x1920 / Horizontal 1920x1080 / Square 1080x1080]
- Clear information hierarchy: title → key data → details
- Visual flow guiding reader's eye path
- Icons and charts for comprehension
- Data-accurate, no decorative distortion
```

---

## 4. PPT / Keynote 演示

**规格**：
- 标准：16:9（1920×1080px）
- 宽屏：16:10（1920×1200px）

**关键设计要素**：
- 每页一个核心信息（不堆砌）
- 字号层级明确（标题40pt+ / 正文24pt+ / 注释16pt+）
- 大量留白，投影时更清晰
- 图文比例至少 60:40
- 一致的视觉系统（颜色、字体、间距）

**推荐风格**：01 Pentagram / 10 Müller-Brockmann / 11 Build / 18 Kenya Hara / 04 Fathom

**场景提示词模板**：
```
[风格配方插入此处]
- Presentation slide design, 16:9
- One core message per slide
- Clear type hierarchy (title 40pt+, body 24pt+)
- Generous whitespace for projection clarity
- Consistent visual system throughout
- [Light/Dark] theme
```

---

## 5. PDF 白皮书 / 技术报告

**规格**：
- A4 纵向（210×297mm / 595×842pt）
- Letter 纵向（216×279mm / 612×792pt）

**关键设计要素**：
- 长文阅读优化（行宽66字符、行高1.5-1.8）
- 清晰的章节导航系统
- 页眉/页脚/页码的统一设计
- 图表与正文的优雅共存
- 引用/注释系统
- 封面页设计精致

**推荐风格**：10 Müller-Brockmann / 04 Fathom / 03 Information Architects / 17 Takram / 19 Irma Boom

**场景提示词模板**：
```
[风格配方插入此处]
- PDF document / white paper design
- A4 portrait format (210×297mm)
- Long-form reading optimized (66 char line width, 1.5 line height)
- Clear chapter navigation system
- Elegant header/footer/page number design
- Charts integrated with body text
- Professional cover page
```

---

## 6. 落地页 / 产品官网

**规格**：
- Desktop: 1440px 宽度设计（响应至320px）
- 首屏高度：100vh

**关键设计要素**：
- 首屏5秒内传达核心价值
- 清晰的CTA（行动按钮）
- 滚动叙事结构（问题→方案→证明→行动）
- 移动端适配
- 加载速度

**推荐风格**：05 Locomotive / 01 Pentagram / 11 Build / 08 Resn / 06 Active Theory

**场景提示词模板**：
```
[风格配方插入此处]
- Landing page / product website
- Desktop 1440px width, responsive
- Hero section 100vh, core value in 5 seconds
- Clear CTA button design
- Scroll narrative: problem → solution → proof → action
- Modern web aesthetic
```

---

## 7. App UI / 原型界面

**规格**：
- iOS: 390×844pt（iPhone 15）
- Android: 360×800dp
- 平板: 1024×1366pt（iPad Pro）

**关键设计要素**：
- 触摸友好（最小点击区44×44pt）
- 系统设计语言一致性
- 状态栏/导航栏/Tab栏的标准处理
- 信息密度适中（移动端不宜过密）

**推荐风格**：17 Takram / 11 Build / 03 Information Architects / 01 Pentagram

**场景提示词模板**：
```
[风格配方插入此处]
- Mobile app UI design
- iOS [390×844pt] / Android [360×800dp]
- Touch-friendly (44pt minimum tap targets)
- Consistent design system
- Standard status bar / navigation / tab bar
- Moderate information density
```

---

## 8. 小红书配图

**规格**：
- 竖版：3:4（1080×1440px）最佳
- 方形：1:1（1080×1080px）
- 首图决定点击率

**关键设计要素**：
- 视觉吸引力第一（在瀑布流中竞争）
- 可以有少量文字（但不超过画面20%）
- 色彩鲜明但不俗
- 生活感/质感/氛围感

**推荐风格**：12 Sagmeister / 11 Build / 20 Neo Shen / 09 Experimental Jetset

**场景提示词模板**：
```
[风格配方插入此处]
- Social media image for Xiaohongshu (RED)
- Vertical 3:4 (1080×1440px)
- Eye-catching in waterfall feed
- Minimal text overlay (under 20% of area)
- Vivid but tasteful colors
- Lifestyle/texture/atmosphere feel
```

---

## 组合示例

**场景**：公众号封面，介绍一款AI编程工具，想要专业但有温度

**Step 1**：选风格 → 17 Takram（专业+温度）
**Step 2**：取Takram风格配方 + 公众号封面模板

```
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

Article cover image for WeChat subscription
- Landscape format, 2.35:1 aspect ratio (1200×510px)
- Bold visual impact, minimal text
- Moderate color saturation for white reading environment
- Must remain recognizable as thumbnail
- Clean composition with clear focal point

Content: An AI coding assistant tool, showing the concept of human-AI collaboration
in software development, warm and professional atmosphere
```

---

**版本**：v1.0
**更新日期**：2026-02-13