12 KiB

Raw Permalink Blame History

信息图生成提示词模板

🎨 风格选择

drawnote-skill 提供多种信息图风格，可根据内容类型和使用场景选择：

可用风格列表

专业商务风格 (默认)
- 适用场景：商业报告、数据分析、专业文档
- 特点：简洁大方、清晰专业、易于阅读
- 配色：蓝灰色系，低饱和度
彩色手写笔记风格 ⭐ 推荐
- 适用场景：学习笔记、读书总结、知识梳理
- 特点：多彩标注、手写字体、便签效果、荧光笔高亮
- 模板位置：styles/彩色手写笔记风格.md
- 特色功能：
  - 🎨 6种颜色笔标注（红、蓝、绿、橙、紫、粉）
  - 🖍️ 5种荧光笔高亮
  - ✏️ 手写风格字体
  - 📓 笔记本横线背景
  - 📌 彩色便签纸效果
科技创新风格
- 适用场景：技术文档、产品介绍、创新方案
- 特点：深色背景、科技感、现代化
- 配色：深蓝黑色系，高对比度
自然清新风格
- 适用场景：环保主题、健康生活、自然科学
- 特点：绿色基调、清新自然、舒适柔和
- 配色：绿色系，明亮清爽
现代简约风格
- 适用场景：极简设计、艺术展示、创意作品
- 特点：黑白配色、留白充足、极简主义
- 配色：黑白灰，高度简化

如何指定风格

生成信息图时，在内容描述中指定风格：

方式1：直接指定

请使用【彩色手写笔记风格】生成关于XXX的信息图

方式2：描述特征

请生成一个学习笔记风格的信息图，需要多种颜色标注和荧光笔高亮

方式3：引用模板

请参考 styles/彩色手写笔记风格.md 模板生成信息图

风格自定义

如需自定义风格，可以：

复制现有风格模板到 styles/ 目录
修改配色、字体、布局等参数
在生成时引用自定义模板文件

设计原则

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 结构模板

基础结构

<!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. 流程图类型

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

<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. 对比分析类型

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

<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. 数据统计类型

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

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

4. 层级结构类型

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

<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. 响应式设计

@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. 动画效果（可选）

.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 图标：

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

12 KiB Raw Permalink Blame History Unescape Escape