NetEase Red Slides
Generate 16:9 presentations in the 网易红 (NetEase Red) + White Swiss Modern style.
工作流程（必须严格遵守）
第一步：收集内容
- 询问用户主题、要点、页数
前置准备：确保发送脚本可用
- 检查
~/.openclaw/workspace/send-popo-file.mjs是否存在 - 如果不存在，创建该脚本（参考 AGENTS.md 中的标准实现）
第二步：先生成 HTML
- 读取 references/design-system.md、references/html-patterns.md 和 references/html-template.html
- 生成单文件 HTML，保存到 workspace
- 滚动翻页实现：使用 CSS transform 驱动整页切换（
translateY(-${index * 100}vh)），1.3s 动画 + 1400ms 冷却锁定，避免自动下滑问题 - 生成后必须立即执行以下操作：
- 通过 POPO 发送 HTML 文件给用户
- 使用 send-popo-file.mjs 脚本发送文件 - 接收人使用当前对话用户的邮箱
- 在 POPO 中发送完成通知：
🎉 HTML 演示文稿已生成！ 📎 文件已通过 POPO 发送，请查收。 📝 在线编辑： 用浏览器打开 HTML 文件，按 E 键 或将鼠标移到左上角进入编辑模式，直接点击文字修改，Ctrl+S 保存。 💬 哪里想修改可以直接跟我说，我来帮你调整。 ✅ 如果想生成 PPT，直接说"生成 PPT"，我帮你转成 PowerPoint 文件。
第三步：迭代调整
- 用户可能通过 E 键自行微调文字，或者提出修改需求由 AI 调整
- 反复迭代直到用户满意
第四步：生成 PPTX
- 用户确认 HTML 满意后，读取 references/pptx-patterns.md
- 基于最终 HTML 内容生成 PPTX，保持内容一致
- 不要在用户确认前主动生成 PPTX
Design Identity
- Primary:
D51312(网易红, RGB 213/19/18) — dominant accent, backgrounds, borders - White/Warm:
FFFFFF/FAF8F5— clean content backgrounds - Dark:
1A1A1A— dark slides, text - Signature element: Red diagonal clip-path split layout, red accent borders on cards, grid background pattern
- Fonts HTML: Display — Archivo (800), Body — Nunito (400), Mono — JetBrains Mono（通过 Google Fonts 加载）
- Fonts PPTX: 统一使用 Microsoft YaHei（微软雅黑）
Slide Types Library
| Type | When to use | Layout |
|---|---|---|
| hero-split | Title/cover slides | Red left 42% diagonal + white right 58% |
| red-full | Section dividers, emphasis | Full red bg, centered white text |
| dark-full | Cases, premium feel | Full dark bg, white text |
| content-cards | Features, benefits (2x3, 2x2, 1x4) | White bg + card grid with red accent borders |
| stat-grid | Data points, KPIs | Big red numbers + labels in cards |
| tier-compare | Pricing, plans | 3 cards, middle "featured" with red border + badge |
| timeline | Process, steps | Horizontal dots + red gradient line |
| faq-list | Q&A | Stacked items with red left border |
| formula | Equations, combinations | Boxes + operators centered |
| split-detail | Decision chains, roles | Red left + stacked cards right |
| cta | Closing | Red bg, contact info, outline button |
技术参考
HTML 生成
- 读取 references/html-patterns.md 获取完整 CSS/JS 模板
- 单文件自包含 HTML，所有 CSS/JS 内联
- 功能：scroll-snap 导航、进度条、导航点、reveal 动画、FAQ 折叠、内联编辑（E 键 / 左上角热区触发，Ctrl+S 保存）
- 所有尺寸使用
clamp()响应式
PPTX 生成（仅在用户确认 HTML 满意后执行）
- 读取 references/pptx-patterns.md 获取 PptxGenJS 模式
- 安装依赖：
npm init -y && npm install pptxgenjs - 生成 CommonJS
.cjs脚本，用node运行 - 关键规则：hex 颜色不加
#，不复用 option 对象，使用breakLine: true - 生成后通过 POPO 发送 PPTX 文件给用户