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