excalidraw-presentation-generator

Excalidraw 演示文稿生成器

这个 Skill 帮助你创建专业的 Excalidraw 演示文稿，基于实战总结的最佳实践。

🎯 何时使用

• 需要创建技术演示文稿
• 制作教学材料或培训内容
• 可视化复杂概念或流程
• 创建架构图或系统设计图
• 准备技术分享或讲座

📋 最佳实践总结

1. 视觉设计原则

颜色系统

• 为不同主题使用一致的配色方案
• 建议配色：
  • 蓝色系 (#1971c2, #e7f5ff) - 概念介绍
  • 绿色系 (#2f9e44, #d3f9d8) - 成功案例/推荐做法
  • 橙色系 (#f08c00, #fff4e6) - 重要提示/对比
  • 红色系 (#e03131, #ffe3e3) - 警告/避坑指南
  • 紫色系 (#7950f2, #f3f0ff) - 代码示例/技术细节

布局策略

• 使用箭头连接逻辑流程
• 左右分栏对比不同概念
• 纵向滚动设计，便于逐步讲解
• 每个概念用独立的矩形卡片包裹
• 合理的间距：相关元素间距 20-50px，不同区块间距 80-150px

字体层次

• 标题：48-56px（粗体）
• 副标题/节标题：28-36px
• 正文：18-24px
• 代码/注释：14-18px（等宽字体 fontFamily: 3）

2. 内容组织

开场结构

1. 吸引人的标题
2. 副标题用类比或比喻
3. 快速说明核心价值

主体内容

• 概念解释 → 实战示例 → 最佳实践 → 总结
• 每3-4个卡片后添加箭头过渡
• 理论与实践平衡（建议 40% 理论 + 60% 实战）

实战示例格式

┌─────────────────┐  ┌──────────────────┐
│ 代码/配置       │  │ 效果/演示        │
│ (左侧灰色背景)  │  │ (右侧彩色背景)   │
└─────────────────┘  └──────────────────┘

3. Excalidraw JSON 规范

必需字段

{
  "type": "excalidraw",
  "version": 2,
  "source": "https://excalidraw.com",
  "elements": [...],
  "appState": {
    "gridSize": null,
    "viewBackgroundColor": "#ffffff"
  },
  "files": {}
}

元素通用字段

• id: 唯一标识符
• type: "text" | "rectangle" | "arrow" | "ellipse" 等
• x, y: 坐标位置
• width, height: 尺寸
• strokeColor: 边框颜色
• backgroundColor: 填充颜色
• fontSize: 字体大小（仅文本）
• fontFamily: 1=手写体, 3=等宽字体
• roughness: 0=光滑, 1=手绘风格

4. 趣味性和可读性

使用 Emoji

• 💡 概念/想法
• 🚀 开始/行动
• ⚡ 重点/对比
• ✅ 推荐做法
• ❌ 避免做法
• 📝 示例
• 🔍 详细说明
• 🎯 目标/要点

信息密度

• 5分钟讲解：约15-20个视觉元素
• 10-15分钟讲解：约30-40个视觉元素
• 每屏不超过3个主要概念

5. 常见模式

对比卡片

┌─────────────┐  ┌─────────────┐
│ ✅ 推荐     │  │ ❌ 不推荐   │
│ - 清晰      │  │ - 模糊      │
│ - 具体      │  │ - 宽泛      │
└─────────────┘  └─────────────┘

流程图

┌──────┐
│ 步骤1 │
└───┬──┘
    ↓
┌──────┐
│ 步骤2 │
└───┬──┘
    ↓
┌──────┐
│ 步骤3 │
└──────┘

代码展示

• 使用灰色背景 (#f8f9fa)
• 等宽字体 (fontFamily: 3)
• 左侧展示代码，右侧展示效果

🔧 技术细节

坐标系统

• 从左上角 (0, 0) 开始
• 向右 x 增加，向下 y 增加
• 建议起始坐标：x=100, y=50