chore: ruler files update
Signed-off-by: Dmytro Stanchiev <git@dmytros.dev>
This commit is contained in:
262
.claude/skills/huashu-design/references/scene-templates.md
Normal file
262
.claude/skills/huashu-design/references/scene-templates.md
Normal file
@@ -0,0 +1,262 @@
|
||||
# 场景模板库：按输出类型组织
|
||||
|
||||
> 与 design-styles.md 的「提示词DNA」组合使用。
|
||||
> 公式：`[风格提示词DNA] + [场景模板] + [具体内容描述]`
|
||||
|
||||
---
|
||||
|
||||
## 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
|
||||
|
||||
**场景提示词模板**：
|
||||
```
|
||||
[风格DNA插入此处]
|
||||
- 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
|
||||
|
||||
**场景提示词模板**：
|
||||
```
|
||||
[风格DNA插入此处]
|
||||
- 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
|
||||
|
||||
**场景提示词模板**：
|
||||
```
|
||||
[风格DNA插入此处]
|
||||
- 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
|
||||
|
||||
**场景提示词模板**：
|
||||
```
|
||||
[风格DNA插入此处]
|
||||
- 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
|
||||
|
||||
**场景提示词模板**：
|
||||
```
|
||||
[风格DNA插入此处]
|
||||
- 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
|
||||
|
||||
**场景提示词模板**：
|
||||
```
|
||||
[风格DNA插入此处]
|
||||
- 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
|
||||
|
||||
**场景提示词模板**：
|
||||
```
|
||||
[风格DNA插入此处]
|
||||
- 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
|
||||
|
||||
**场景提示词模板**：
|
||||
```
|
||||
[风格DNA插入此处]
|
||||
- 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提示词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
|
||||
|
||||
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
|
||||
Reference in New Issue
Block a user