# 信息图生成提示词模板

## 🎨 风格选择

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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信息图标题</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
            line-height: 1.6;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 40px;
            min-height: 100vh;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            padding: 60px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        }

        .header {
            text-align: center;
            margin-bottom: 50px;
            border-bottom: 3px solid #667eea;
            padding-bottom: 30px;
        }

        .header h1 {
            font-size: 48px;
            color: #2C3E50;
            margin-bottom: 15px;
            font-weight: 700;
        }

        .header p {
            font-size: 20px;
            color: #7F8C8D;
        }

        .content-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-bottom: 40px;
        }

        .card {
            background: #F8F9FA;
            border-radius: 15px;
            padding: 30px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }

        .card h3 {
            font-size: 24px;
            color: #667eea;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }

        .card-icon {
            width: 40px;
            height: 40px;
            background: #667eea;
            border-radius: 10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            color: white;
            font-size: 24px;
        }

        .card ul {
            list-style: none;
            padding-left: 0;
        }

        .card li {
            padding: 8px 0;
            padding-left: 25px;
            position: relative;
            color: #34495E;
        }

        .card li:before {
            content: "▸";
            position: absolute;
            left: 0;
            color: #667eea;
            font-weight: bold;
        }

        .timeline {
            position: relative;
            padding: 30px 0;
        }

        .timeline-item {
            display: flex;
            margin-bottom: 30px;
            position: relative;
        }

        .timeline-marker {
            width: 50px;
            height: 50px;
            background: #667eea;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            flex-shrink: 0;
            margin-right: 20px;
        }

        .timeline-content {
            flex: 1;
            background: #F8F9FA;
            padding: 20px;
            border-radius: 10px;
        }

        .timeline-content h4 {
            color: #2C3E50;
            margin-bottom: 10px;
        }

        .stats-container {
            display: flex;
            justify-content: space-around;
            margin: 40px 0;
            flex-wrap: wrap;
        }

        .stat-box {
            text-align: center;
            padding: 20px;
            min-width: 200px;
        }

        .stat-number {
            font-size: 48px;
            font-weight: bold;
            color: #667eea;
            font-family: 'SF Mono', monospace;
        }

        .stat-label {
            font-size: 16px;
            color: #7F8C8D;
            margin-top: 10px;
        }

        .footer {
            text-align: center;
            margin-top: 50px;
            padding-top: 30px;
            border-top: 2px solid #ECF0F1;
            color: #95A5A6;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 内容区域 -->
    </div>
</body>
</html>
```

## 信息图类型模板

### 1. 流程图类型

适用于：步骤说明、工作流程、操作指南

```html
<div class="timeline">
    <div class="timeline-item">
        <div class="timeline-marker">1</div>
        <div class="timeline-content">
            <h4>步骤标题</h4>
            <p>步骤描述内容...</p>
        </div>
    </div>
    <!-- 重复更多步骤 -->
</div>
```

### 2. 对比分析类型

适用于：产品对比、优缺点分析、前后对比

```html
<div class="content-grid">
    <div class="card">
        <h3><span class="card-icon">A</span>选项 A</h3>
        <ul>
            <li>特点 1</li>
            <li>特点 2</li>
            <li>特点 3</li>
        </ul>
    </div>
    <div class="card">
        <h3><span class="card-icon">B</span>选项 B</h3>
        <ul>
            <li>特点 1</li>
            <li>特点 2</li>
            <li>特点 3</li>
        </ul>
    </div>
</div>
```

### 3. 数据统计类型

适用于：数据展示、统计信息、关键指标

```html
<div class="stats-container">
    <div class="stat-box">
        <div class="stat-number">95%</div>
        <div class="stat-label">指标名称</div>
    </div>
    <!-- 重复更多统计数据 -->
</div>
```

### 4. 层级结构类型

适用于：组织架构、知识体系、分类说明

```html
<div class="content-grid">
    <div class="card">
        <h3><span class="card-icon">📚</span>类别 1</h3>
        <ul>
            <li>子项 1</li>
            <li>子项 2</li>
        </ul>
    </div>
    <!-- 重复更多类别 -->
</div>
```

## 生成规范

### 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 图标：
- 数据/统计：📊 📈 📉 💹
- 技术/工具：🔧 ⚙️ 🔨 💻
- 创意/想法：💡 🎨 ✨ 🌟
- 目标/成就：🎯 🏆 ⭐ ✓
- 时间/日程：⏰ 📅 ⏳ 🕐
- 人物/团队：👤 👥 👨‍💼 👩‍💼
- 位置/地点：📍 🌍 🏢 🏠
- 警告/注意：⚠️ ❗ ⚡ 🔔
