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 冷却锁定，避免自动下滑问题
• 生成后必须立即执行以下操作：

1. 通过 POPO 发送 HTML 文件给用户

   • 使用 send-popo-file.mjs 脚本发送文件
   • 接收人使用当前对话用户的邮箱

2. 在 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 文件给用户