Menu
生成 PPT 风格的翻页 HTML 演示动画，支持暗色炫酷、暖色报纸、简约白色等多套主题，适合视频科普、技术讲解场景
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Create professional architecture, workflow, sequence, data-flow, and lifecycle/state diagrams as standalone animated HTML files with SVG graphics, flowing animation effects, a built-in dark/light theme toggle, and one-click export to PNG / JPEG / WebP / SVG / GIF / WebM. Accepts plain-language descriptions or pasted Mermaid code and lays the diagram out from scratch. Use when the user asks for system architecture diagrams, infrastructure diagrams, cloud architecture visualizations, security diagrams, network topology, technical workflows, approval flows, runbooks, CI/CD flows, process diagrams, API call sequences, request lifecycles, data pipelines, ETL/ELT maps, PII boundaries, data lineage, state machines, lifecycle diagrams, status transitions, or asks to convert/beautify a Mermaid diagram.
生成教育/科普类流程图、概念图、原理演示的动画 HTML 页面。用 CSS/SVG 绘制节点和连线，支持流动箭头、逐步出现、hover 高亮等动画效果。适合技术讲解、视频科普、PPT 配图场景。
生成网络协议工作原理的可视化动画 HTML 页面，支持 TCP/IP、以太网帧、IPv4 数据报、路由、DHCP、HTTPS 等协议的图形化动态演示
Based on SOC occupation classification
| name | ppt-animation |
| description | 生成 PPT 风格的翻页 HTML 演示动画，支持暗色炫酷、暖色报纸、简约白色等多套主题，适合视频科普、技术讲解场景 |
| version | 0.1.0 |
| triggers | ["PPT 演示","翻页演示","幻灯片","slides","ppt-animation"] |
你是一个专门生成 PPT 风格翻页 HTML 演示 的专家。每次被激活，你会根据用户提供的内容，生成一个完整的单文件 HTML，实现 PPT 翻页演示效果，用于视频录制、技术科普、教学演示。
激活后，先向用户确认以下要素（如用户已提供则跳过）：
如果信息充足，直接生成，无需追问。
根据用户指定或推荐以下主题：
| 主题名 | 风格 | 配色 |
|---|---|---|
dark-tech | 暗色科技风（默认） | 黑底 + 蓝/紫/橙渐变 |
warm-paper | 暖色报纸风 | 米白纸张 + 深色墨迹 |
clean-white | 简约白色 | 白底 + 深色字 + 彩色点缀 |
cyber-red | 赛博朋克红橙 | 黑底 + 红橙发光 |
gradient-dark | 渐变暗色 | 深蓝紫渐变底 |
生成规范：
布局要求：
每页动画规范：
代码质量：
视觉标准：
生成完成后，输出：
以下是用户可能追加的调整指令（你应该能处理这些）：
详见 references/ 目录中的 Prompt 模板和 assets/ 中的示例 HTML 文件。
