# 信息图生成提示词模板
## 🎨 风格选择
drawnote-skill 提供多种信息图风格，可根据内容类型和使用场景选择：
### 可用风格列表
1. **专业商务风格** (默认)
- 适用场景：商业报告、数据分析、专业文档
- 特点：简洁大方、清晰专业、易于阅读
- 配色：蓝灰色系，低饱和度
2. **彩色手写笔记风格** ⭐ 推荐
- 适用场景：学习笔记、读书总结、知识梳理
- 特点：多彩标注、手写字体、便签效果、荧光笔高亮
- 模板位置：`styles/彩色手写笔记风格.md`
- 特色功能：
- 🎨 6种颜色笔标注（红、蓝、绿、橙、紫、粉）
- 🖍️ 5种荧光笔高亮
- ✏️ 手写风格字体
- 📓 笔记本横线背景
- 📌 彩色便签纸效果
3. **科技创新风格**
- 适用场景：技术文档、产品介绍、创新方案
- 特点：深色背景、科技感、现代化
- 配色：深蓝黑色系，高对比度
4. **自然清新风格**
- 适用场景：环保主题、健康生活、自然科学
- 特点：绿色基调、清新自然、舒适柔和
- 配色：绿色系，明亮清爽
5. **现代简约风格**
- 适用场景：极简设计、艺术展示、创意作品
- 特点：黑白配色、留白充足、极简主义
- 配色：黑白灰，高度简化
### 如何指定风格
生成信息图时，在内容描述中指定风格：
**方式1：直接指定**
```
请使用【彩色手写笔记风格】生成关于XXX的信息图
```
**方式2：描述特征**
```
请生成一个学习笔记风格的信息图，需要多种颜色标注和荧光笔高亮
```
**方式3：引用模板**
```
请参考 styles/彩色手写笔记风格.md 模板生成信息图
```
### 风格自定义
如需自定义风格，可以：
1. 复制现有风格模板到 `styles/` 目录
2. 修改配色、字体、布局等参数
3. 在生成时引用自定义模板文件
---
## 设计原则
### 1. 视觉层次
- **标题**: 最大字号（32-48px），粗体，醒目配色
- **副标题**: 中等字号（20-28px），可使用不同颜色
- **主要内容**: 标准字号（16-18px），清晰易读
- **辅助信息**: 较小字号（12-14px），灰色或低对比度
### 2. 布局结构
- 使用 CSS Grid 或 Flexbox 创建灵活的布局
- 保持适当的留白（padding: 20-40px）
- 元素间距统一（margin: 15-30px）
- 响应式设计，适应不同屏幕尺寸
### 3. 配色方案
选择合适的配色方案（根据主题选择）：
**专业商务风格**：
- 主色：#2C3E50（深蓝灰）
- 辅色：#3498DB（亮蓝）
- 强调色：#E74C3C（红色）
- 背景：#ECF0F1（浅灰）
**科技创新风格**：
- 主色：#1A1A2E（深蓝黑）
- 辅色：#16213E（深蓝）
- 强调色：#0F3460（中蓝）
- 亮色：#E94560（粉红）
**自然清新风格**：
- 主色：#2ECC71（绿色）
- 辅色：#27AE60（深绿）
- 强调色：#F39C12（橙色）
- 背景：#F8F9FA（白色）
**现代简约风格**：
- 主色：#000000（黑色）
- 辅色：#FFFFFF（白色）
- 强调色：#FF6B6B（珊瑚红）
- 背景：#F5F5F5（浅灰）
### 4. 排版规范
- 字体：优先使用系统字体
- 标题：'SF Pro Display', 'Helvetica Neue', Arial, sans-serif
- 正文：'SF Pro Text', 'Helvetica Neue', Arial, sans-serif
- 数字：'SF Mono', 'Monaco', monospace（用于数据展示）
- 行高：1.5-1.8（确保可读性）
- 段落间距：0.5-1em
- 对齐方式：左对齐（正文），居中（标题/强调内容）
## HTML 结构模板
### 基础结构
```html
信息图标题
```
## 信息图类型模板
### 1. 流程图类型
适用于：步骤说明、工作流程、操作指南
```html
```
### 2. 对比分析类型
适用于：产品对比、优缺点分析、前后对比
```html
```
### 3. 数据统计类型
适用于：数据展示、统计信息、关键指标
```html
```
### 4. 层级结构类型
适用于：组织架构、知识体系、分类说明
```html
```
## 生成规范
### 1. 内容处理
- 提取关键信息，去除冗余
- 使用简洁的语言
- 数据需要格式化（千分位、百分比等）
- 长文本需要分段或列表化
### 2. 视觉元素
- 使用图标或符号增强理解（Unicode 符号：📊 📈 💡 🎯 ✓ ✗ ⭐ 🔍）
- 重要数据使用大字号突出显示
- 使用颜色区分不同类别或优先级
- 添加适当的阴影和渐变增加立体感
### 3. 响应式设计
```css
@media (max-width: 768px) {
.container {
padding: 30px 20px;
}
.header h1 {
font-size: 32px;
}
.content-grid {
grid-template-columns: 1fr;
}
.stats-container {
flex-direction: column;
}
}
```
### 4. 动画效果（可选）
```css
.card {
animation: fadeInUp 0.6s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
```
## 质量检查清单
生成信息图后检查：
- [ ] 标题清晰，概括主题
- [ ] 配色协调，符合主题
- [ ] 文字大小适中，易于阅读
- [ ] 布局平衡，不拥挤
- [ ] 关键信息突出显示
- [ ] 视觉层次清晰
- [ ] 没有拼写错误
- [ ] 数据准确无误
- [ ] 适当使用图标和视觉元素
- [ ] 整体美观专业
## 常用配色组合
| 主题 | 主色 | 辅色 | 强调色 | 背景色 |
|------|------|------|--------|--------|
| 科技 | #667eea | #764ba2 | #F093FB | #F8F9FA |
| 商务 | #2C3E50 | #3498DB | #E74C3C | #ECF0F1 |
| 自然 | #2ECC71 | #27AE60 | #F39C12 | #FFFFFF |
| 活力 | #FF6B6B | #4ECDC4 | #FFE66D | #F7F7F7 |
| 优雅 | #95E1D3 | #F38181 | #EAFFD0 | #FFFFFF |
## 图标使用指南
使用 Unicode 或 Emoji 图标：
- 数据/统计：📊 📈 📉 💹
- 技术/工具：🔧 ⚙️ 🔨 💻
- 创意/想法：💡 🎨 ✨ 🌟
- 目标/成就：🎯 🏆 ⭐ ✓
- 时间/日程：⏰ 📅 ⏳ 🕐
- 人物/团队：👤 👥 👨💼 👩💼
- 位置/地点：📍 🌍 🏢 🏠
- 警告/注意：⚠️ ❗ ⚡ 🔔