ppt-skill

name ppt-skill version 0.2.0 description 触发关键词：演示、PPT、幻灯片、slides、presentation、keynote、deck、汇报、展示; 使用场景：用户需要生成演示文稿、汇报材料或教学幻灯片。 Reveal.js PPT Skill Overview 触发关键词：演示、PPT、幻灯片、slides、presentation、keynote、deck、汇报、展示 使用场景：用户需要生成基于 Reveal.js 的 HTML 演示文稿，在浏览器中运行。 使用 Reveal.js 创建专业的 HTML 演示文稿，支持丰富的过渡效果、图表集成、演讲者备注等功能。 设计原则 关键要求 ：在创建任何演示文稿之前，必须先分析内容并选择合适的设计元素。 内容驱动设计 分析主题 ：这个演示文稿是关于什么的？它暗示了什么样的基调、行业或情绪？ 检查品牌 ：如果用户提到公司/组织，考虑其品牌色彩和身份 匹配配色 ：选择反映主题的颜色 声明方案 ：在编写代码之前，解释你的设计选择 必须遵守 ： ✅ 在编写代码之前，声明你的内容驱动设计方案 ✅ 使用网络安全字体或通过 `@import` 引入 Google Fonts ✅ 通过大小、粗细和颜色创建清晰的视觉层次 ✅ 确保可读性：强对比度、适当的文字大小、整洁的对齐 ✅ 保持一致性：在所有幻灯片中重复使用相同的模式、间距和视觉语言 配色方案选择 创意选色原则 ： 超越默认 ：什么颜色真正匹配这个特定主题？避免自动驾驶式的选择 多角度考虑 ：主题、行业、情绪、能量水平、目标受众、品牌身份 大胆尝试 ：尝试意想不到的组合——医疗演示不一定要用绿色，金融不一定要用深蓝 构建调色板 ：选择 3-5 种协调的颜色（主色 + 辅助色 + 强调色） 确保对比度 ：文字必须在背景上清晰可读 精选配色方案 （选择一个、调整它，或创建你自己的）： 编号 名称 颜色组合 1 Classic Blue 深海军蓝 `#1C2833`、石板灰 `#2E4053`、银色 `#AAB7B8`、米白 `#F4F6F6` 2 Teal & Coral 青色 `#5EA8A7`、深青 `#277884`、珊瑚 `#FE4447`、白色 `#FFFFFF` 3 Bold Red 红 `#C0392B`、亮红 `#E74C3C`、橙 `#F39C12`、黄 `#F1C40F`、绿 `#2ECC71` 4 Warm Blush 淡紫 `#A49393`、腮红 `#EED6D3`、玫瑰 `#E8B4B8`、奶油 `#FAF7F2` 5 Burgundy Luxury 酒红 `#5D1D2E`、深红 `#951233`、铁锈 `#C15937`、金色 `#997929` 6 Deep Purple & Emerald 紫色 `#B165FB`、深蓝 `#181B24`、翡翠 `#40695B`、白色 `#FFFFFF` 7 Cream & Forest 奶油 `#FFE1C7`、森林绿 `#40695B`、白色 `#FCFCFC` 8 Pink & Purple 粉红 `#F8275B`、珊瑚 `#FF574A`、玫瑰 `#FF737D`、紫色 `#3D2F68` 9 Lime & Plum 青柠 `#C5DE82`、李子 `#7C3A5F`、珊瑚 `#FD8C6E`、蓝灰 `#98ACB5` 10 Black & Gold 金色 `#BF9A4A`、黑色 `#000000`、奶油 `#F4F6F6` 11 Sage & Terracotta 鼠尾草 `#87A96B`、赤陶 `#E07A5F`、奶油 `#F4F1DE`、炭灰 `#2C2C2C` 12 Charcoal & Red 炭灰 `#292929`、红色 `#E33737`、浅灰 `#CCCBCB` 13 Vibrant Orange 橙色 `#F96D00`、浅灰 `#F2F2F2`、炭灰 `#222831` 14 Forest Green 黑色 `#191A19`、绿色 `#4E9F3D`、深绿 `#1E5128`、白色 `#FFFFFF` 15 Retro Rainbow 紫 `#722880`、粉 `#D72D51`、橙 `#EB5C18`、琥珀 `#F08800`、金 `#DEB600` 16 Vintage Earthy 芥末 `#E3B448`、鼠尾草 `#CBD18F`、森林绿 `#3A6B35`、奶油 `#F4F1DE` 17 Coastal Rose 老玫瑰 `#AD7670`、海狸 `#B49886`、蛋壳 `#F3ECDC`、灰绿 `#BFD5BE` 18 Orange & Turquoise 浅橙 `#FC993E`、灰青 `#667C6F`、白色 `#FCFCFC` 幻灯片内容多样化 多样化展示是关键 。即使幻灯片有相似的内容类型，也要变化视觉呈现： 在不同幻灯片使用 不同布局 ：一页用分栏，另一页用堆叠盒子，第三页用带图标的标注 混合容器样式：纯文本、盒子、标注、引用块 使用 视觉层次 ：` ` 标记关键词，不同颜色区分类别 用其他元素（引用、标注、分栏）打破列表的单调 不要在连续幻灯片上重复相同的布局模式 保持可扫描性 ： 短要点，不是段落 每页尽可能只有一个主要观点 使用图标（Font Awesome）增加视觉趣味 内容少时放大 ：当幻灯片内容较少时，使用更大的字号填充空间，不要留下大片空白配小字。 视觉细节选项 几何图案 (Geometric Patterns) ： 对角线分隔符代替水平线 不对称列宽（30/70、40/60、25/75） 90° 或 270° 旋转文字标题 圆形/六边形图片框架 角落三角形装饰 重叠形状增加深度 边框与框架处理 (Border & Frame Treatments) ： 单侧粗边框（10-20pt） 双线边框配对比色 角括号代替完整边框 L 形边框（上+左 或 下+右） 标题下划线强调（3-5pt 粗） 排版处理 (Typography Treatments) ： 极端尺寸对比（72pt 标题 vs 11pt 正文） 全大写标题配宽字间距 超大编号显示 等宽字体用于数据/统计/技术内容 窄体字体用于密集信息 轮廓文字强调 图表与数据样式 (Chart & Data Styling) ： 单色图表配单一强调色 水平条形图代替垂直 点图代替条形图 最少或无网格线 数据标签直接在元素上（无图例） 超大数字显示关键指标 布局创新 (Layout Innovations) ： 全出血图片配文字叠加 侧边栏列（20-30% 宽度）用于导航/上下文 模块化网格系统（3×3、4×4 块） Z 形或 F 形内容流 浮动文字框覆盖彩色形状 杂志风格多栏布局 背景处理 (Background Treatments) ： 纯色块占据 40-60% 幻灯片 渐变填充（仅垂直或对角线） 分割背景（两色，对角线或垂直） 边缘到边缘色带 负空间作为设计元素 布局技巧 图表/表格布局规则 ： ✅ 两栏布局（首选） ：标题横跨全宽，下方两栏 - 一栏文字/要点，另一栏特色内容。使用不等宽 flexbox（如 40%/60%）优化空间 ✅ 全屏布局 ：让特色内容（图表/表格）占据整个幻灯片以获得最大冲击力和可读性 ❌ 禁止垂直堆叠 ：不要将图表/表格放在文字下方的单列中 - 这会导致可读性差和布局问题 核心规范 技术选型 使用 Reveal.js 实现（功能强大、专业演示库、支持丰富的过渡效果和主题） 优势 ： 专为演示文稿设计，支持嵌套幻灯片（垂直/水平导航） 内置多种过渡动画和主题样式 支持 Markdown、代码高亮、演讲者备注 完善的键盘导航和触控支持 响应式设计，自动适配不同屏幕 CDN 引入 ： ```html \`\`\` HTML 结构 ```html 第一页标题 第一页内容 第二页标题 要点一 要点二