SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场overwatch-slidedeck

overwatch-slidedeck

设计与创作

查看项目

更新于 10-27 12:06

技能介绍

用途

Overwatch Slide Deck Designer 用于把演示内容做成交互式、演示级的实时单页应用（SPA），而不是静态 PDF。适合投资人路演、产品演示、会议演讲等需要悬停状态、内容切换、提示框等交互的场合，也适合需要 WebGPU 着色器封面背景、侧边栏导航和键盘导航的演示。

主要能力

  • 技术栈：Vite + React 19 + TanStack Router，原生 1920x1080 分辨率。
  • 视觉：深色背景、橙色强调色（#ff6e41）、Playfair Display 标题、WebGPU 着色器封面（支持降级为动画 CSS 渐变）、粒子场、网络图、SVG 雷达图。
  • 动效：Framer Motion 编排，AnimatePresence 方向感知切换（前进从右、后退从左），入场变体 fade/slideUp/slideLeft/scale，交错动画容器。
  • 导航：侧边栏 3 秒自动收起、悬停展开、弹簧动画；键盘 ArrowRight/Space（下一页）、ArrowLeft（上一页）、Home/End；URL 路由 /deck/1 等，相邻幻灯片预加载。
  • 组件库：10 个布局组件（SlideWrapper、Headline、SubHeadline、Eyebrow、BodyText、MonoLabel、Divider、SplitLayout、CenterLayout、GridLayout）、18 个交互组件（AnimatedItem、StaggeredAnimation、HoverLift、GlowBorder、ExpandableCard、Accordion、TabGroup、QuoteRotator、ContentRotator、SocialProofCard、TerminalTyper、TimelineConnector、InfiniteScrollTicker、ProgressBar、RevealCaption、Tooltip、PulseIndicator、Skeleton）、4 个图形组件、3 个工具 Hook（useAutoCycle、useTypewriter、useReducedMotion）。
  • 无障碍：所有自动轮播与入场组件遵循 prefers-reduced-motion（直接呈现最终状态、不轮播）；TabGroup、Accordion、Tooltip 带 ARIA 角色与键盘导航；全局快捷键会忽略交互元素上的按键。
  • 演讲者模式：/presenter/1 显示当前页、下一页预览、演讲者备注、计时器、页码；通过 BroadcastChannel('overwatch-deck') 同步两个同源窗口。
  • 导出：脚本以 ?static=1 和 reduced-motion 模拟逐页渲染 1920x1080 PNG，--pdf 合并为 deck.pdf。
  • 部署：npm run build 输出 dist/，脚手架内含 Cloudflare Workers（wrangler.jsonc）、Vercel（vercel.json）、Netlify（public/_redirects）的 SPA 重写配置，部署后直达 /deck/7 不会 404。

使用方式

  1. 查看参考截图：open ~/.claude/skills/overwatch-slidedeck/assets/examples/（15 张示例展示深色背景、橙色强调、Playfair Display 标题、悬停状态、WebGPU 封面等标准美学）。
  2. 脚手架：cp -r ~/.claude/skills/overwatch-slidedeck/assets/scaffold/ ./my-deck；cd my-deck；npm install；npm run dev（打开 http://localhost:5173，导航到 /deck/1）。
  3. 图标库需自行安装：Lucide（lucide-react，https://lucide.dev/icons）、Tabler（@tabler/icons-react，https://tabler.io/icons）、Phosphor（@phosphor-icons/react，https://phosphoricons.com）。
  4. 规划内容：分 4-8 个区块，每区块 3-5 页，识别页面类型（共 14 种，见 references/slide-templates.md）。
  5. 品牌色提取：可用 Firecrawl 抓取客户站点 branding，或 agent-browser 截图参考，然后在 src/styles/globals.css 覆盖 --color-orange 与 --color-orange-muted。避免亮红（#DC2626、#E11D48）与浅底饱和黄（#fbbf24），可加深到 amber-800/900（#92400E、#B45309）。
  6. 研究与素材：Firecrawl 抓网页转 markdown、Exa Search 神经搜索、Reddit JSON 接口（curl "https://www.reddit.com/r/{SUBREDDIT}/search.json?q={QUERY}&limit=25&sort=relevance"）。
  7. 编写幻灯片：每页位于 src/slides/，使用 SlideWrapper（mode 为 dark/white/orange）等组件；在 src/config.ts 的 slides 数组与 slideModules 映射中注册。
  8. 设计 QA：用 agent-browser 在 http://localhost:5173 逐页截图核对模式、侧栏、着色器回退、键盘导航、访问门、字体、悬停状态、动画、移动端屏蔽（<375px 显示“Desktop Required”）、页码、转场方向、减少动效、演讲者同步、深链接。
  9. 演示：第二窗口打开 /presenter/1，两个同源窗口同步；远程演示时共享观众窗口并在演讲者窗口操作。
  10. 导出：cd ~/.claude/skills/overwatch-slidedeck/scripts && npm install（一次安装 playwright、pdf-lib、yaml）；npm run dev &；node ~/.claude/skills/overwatch-slidedeck/scripts/export-deck.mjs --url http://localhost:5173 --out ./export --pdf。着色器封面按当前帧导出，实时演示效果优于导出件。
  11. 部署：npx wrangler deploy / npx vercel / npx netlify deploy --prod。

数据驱动建稿：提供 YAML 规格文件后运行 node ~/.claude/skills/overwatch-slidedeck/scripts/init-deck-from-spec.mjs deck-spec.yaml ./my-deck，脚本复制脚手架、生成 config.ts 并创建空幻灯片文件；完整 YAML 模式见 references/deck-schema.md（覆盖 14 种页面类型）。

自定义素材流水线：Nano Banana Pro → ImageMagick → Potrace → SVGO，需安装 nano-banana-pro 技能、ImageMagick（brew install imagemagick）、Potrace（brew install potrace）、SVGO（npm install -g svgo）。

适用场景与内容原则

支持业务与金融（KPI 仪表盘、收入图表、增长趋势、定价）、医疗（患者指标、临床结果、治疗时间线）、健康与教练（转变历程、里程碑、引言）、AI/ML 研究（模型架构、训练指标、STT/TTS 流程）等领域的页面。设计上强调：数字必须有可追溯来源；标题承载洞察（如“上线修复后流失率下降 31%”，而非“流失数据”）；用具体表述而非套话；每套演示只用一套动效语法；每页脱离讲者也应自解释。

转场：Deck 级默认在 config.transition（none | fade | slide | scale，默认 fade）与 config.transitionDuration（毫秒）；单页可通过 SlideEntry 同名字段覆盖，但一套演示只应使用一种转场，单页覆盖仅用于章节分隔和结束页。prefers-reduced-motion 与 ?static=1 均强制 none。演讲者备注通过 SlideEntry 的 notes 字段或 YAML 的 notes: 设置，仅在演讲者模式显示。

限制

访问门仅在客户端实现：密码与全部幻灯片内容会随 JavaScript 打包发给任何请求该 URL 的人，只能阻止随意转发，不能作为真正的安全措施。对真正不能泄露的内容（未公布财务数据、并购信息），应在其前面加 Cloudflare Access 或 Vercel 部署保护等真实授权。BroadcastChannel 同步仅限同源窗口（同一部署的两个标签页/窗口）。视口低于 375px 时显示“Desktop Required”。移动端适配、收费与价格信息资料中暂未提供。