SuperAPI AI Directory
Partner中文AI newsFavorites
Skillsai-animation

ai-animation

Design & creation

View repository

Updated 10-16 09:18

About this skill

AI-Animation: AI generates HTML presentation animations

Overview

This Skill implements a three-step automated process to convert popular science text into a cool HTML animation presentation.

Core features:

  • 📦 Built-in templates — All template files are integrated and ready to use out of the box
  • 🔧 Configurable paths — The output path is customizable by the user, defaulting to the desktop
  • 🎨 Icon replacement — Step 2 enforces converting emoji to flat UI icons

File structure

AI-Animation/
├── SKILL.md                    # 本文件
├── references/
│   └── workflow.md             # 工作流参考文档
└── templates/
    ├── PPT-Template/           # PPT 风格模板
    │   ├── PPT-Generate-1.html
    │   ├── PPT-Generate-2.html
    │   ├── PPT-Generate-3.html  ← 推荐
    │   ├── PPT-Generate-4.html
    │   ├── PPT-Generate-5.html
    │   ├── PPT-Generate-6.html
    │   └── PPT-Generate-7.html
    └── RNN-Template/           # 流程图风格模板
        ├── Comprehension.html
        ├── Cross-modal disentanglement - 2.html
        ├── GPU.html
        ├── LSTM-1.html
        ├── onehot.html
        ├── onehot-drawback.html
        ├── RNN-2.html
        ├── RNN-3.html          ← 推荐
        ├── RNN-4.html
        ├── RNN-5.html
        ├── RNN-6.html
        ├── RNN-7.html
        ├── The fatal flaw of DNN.html
        └── word2vec-1.html

Workflow

Step 1: Generate the base HTML

  1. Read the popular science content text input by the user
  2. Concatenate the text into the following Prompt:
根据以上内容生成基于纯前端页面单页布局仿PPT换页轮播进行直观图形化可视化的介绍，
加大文字大小，并运用加粗、下划线、斜体、文字颜色、文字背景等强调方式方便进行视频演示。
添加每次切换页面时页面中的各个元素依次"缓入"出现的动画效果(细化到每行文字)。
  1. Send the concatenated full Prompt to the AI (GPT-4o, Claude, etc.)
  2. After waiting for generation to complete, save the output as AI_Animation.html

Output path (specified by the user):

  • Default:桌面/AI_Animation.html
  • User specified:用户指定路径/AI_Animation.html

Step 2: Refactor using a PPT template

The user selects one from the following templates:

Option Template file Features
1 PPT-Generate-1.html Minimalist style
2 PPT-Generate-2.html Rich in charts
3 PPT-Generate-3.html Best visual effect (recommended)
4 PPT-Generate-4.html Flexible layout
5 PPT-Generate-5.html Tech feel
6 PPT-Generate-6.html Multiple charts
7 PPT-Generate-7.html Minimalist and professional

Template path: templates/PPT-Template/

Send the following Prompt to the AI to refactor the HTML file generated in Step 1:

以 templates/PPT-Template/[选定的模板文件] 为模板，重构 [Step1生成的文件路径] 的内容。
将AI_Animation.html的网页的风格转为选定的网页模板的风格，减少PPT演示的字数，
增大文字大小，加强图形化显示，图文并茂，方便视频展示。
将emoji图标换成平面ui库的图标。

⚠️ Mandatory requirement: The Prompt must include the instruction "replace emoji icons with flat UI library icons".

Step 3 (optional): Generate flowchart style

Executed when the user inputs "generate flowchart".

Merge the content of every two adjacent pages of the HTML generated in Step 1, then use one of the following RNN templates for visual refactoring:

Option Template file Features
1 RNN-2.html Comparison style
2 RNN-3.html Layered cards (recommended)
3 RNN-4.html Vertical flow
4 RNN-5.html Branch structure
5 RNN-6.html Tree diagram
6 RNN-7.html Grid layout
7 LSTM-1.html LSTM display
8 onehot.html one-hot encoding
9 onehot-drawback.html one-hot drawbacks
10 word2vec-1.html word2vec
11 Comprehension.html Understanding the model
12 GPU.html GPU architecture
13 Cross-modal disentanglement - 2.html Cross-modal decoupling
14 The fatal flaw of DNN.html DNN drawbacks

Template path: templates/RNN-Template/

Send the following Prompt to the AI:

将 [Step1生成的文件路径] 网页的相邻两页内容合并后
按照 templates/RNN-Template/[选定的RNN模板] 的平面UI样式进行视觉重构，
保持现有颜色方案不变。具体实施要求包括：
精确还原模板中的布局结构、元素间距、字体样式、图标设计和视觉层次；
确保所有交互元素（按钮、表单、导航等）的视觉表现与参考网页一致；
维持原有的颜色值和配色方案；保证修改后的页面在不同设备和浏览器上具有良好的响应式表现；
优化DOM结构以匹配UI设计，同时保持原有功能完整性和交互逻辑不变。
完成后需进行视觉一致性检查，确保实现效果与参考网页达到95%以上的相似度。

Complete workflow example

User input:

请帮我制作一个关于TCP三次握手的科普动画，输出到桌面

Step 1 — Generate the base HTML: Send the user content + PPT Prompt to the AI, save as 桌面/AI_Animation.html

Step 2 — PPT template refactoring:

Please use PPT-Generate-3.html as the template to refactor 桌面/AI_Animation.html... (mandatory inclusion of the emoji-to-icon prompt)

Step 3 (optional) — Flowchart style:

User inputs "generate flowchart" Please merge adjacent pages and refactor according to the style of RNN-3.html ...

Output path configuration

Configuration method Output location
Default 桌面/AI_Animation.html
User specified 用户指定路径/AI_Animation.html

Path specification method: Users can specify the output path when inputting, such as:

  • "Output to desktop"
  • "Save to D:\Videos\"
  • "Output to the current project folder"

Notes

  1. During Step 1 generation: Ensure the Prompt includes keywords such as "ease-in animation," "enlarged text," and "graphical"
  2. During Step 2 refactoring：
    • Mandatory inclusion of "replace emoji icons with flat UI library icons"
    • Recommended to use PPT-Generate-3.html, for best results
  3. Step 3 flowchart: Execute only when the user explicitly requests it, merging two pages each time
  4. All generated file paths useforward slashes /, to avoid cross-platform compatibility issues
  5. Built into the template: This Skill already includes all template files, no additional download or configuration required

Practical case: OSI seven-layer model

User input:

In order to enable computers produced by different computer manufacturers to communicate with each other and establish computer networks on a larger scale, the International Organization for Standardization (ISO) proposed the "Open Systems Interconnection Reference Model" in 1978, namely the famous OSI/RM model...

Step 1 result: Generated 7 pages of basic HTML, including:

  • Cover page: OSI seven-layer model
  • OSI model background introduction
  • Seven-layer overview (colorful layer display)
  • Core responsibilities of each layer (table)
  • OSI vs TCP/IP comparison
  • Transport layer core hub
  • Summary

Step 2 result (PPT-Generate-3):

  • Cyan theme color scheme + particle effect background
  • Cover rotating ring decoration
  • Interactive seven-layer model (hover zoom effect)
  • OSI vs TCP/IP comparison table
  • Transport layer core hub flowchart

Step 3 result (RNN-3):

  • Dark green background + cyan particle effects
  • Layered card architecture:
    • User layer (L7-L5): application layer, presentation layer, session layer
    • Transport layer (L4): TCP/UDP · data segments
    • Network layer (L3): IP · data packets
    • Physical layer (L2-L1): frames/bitstream
  • Data encapsulation process visualization
  • Protocol labels (each layer's corresponding protocol identified with different colors)
  • Bottom comparison card

Final output: 桌面/AI_Animation.html