SuperAPI AI Directory
Partner中文AI newsFavorites
Skillsscience-content-ppt

science-content-ppt

Design & creation

View repository

Updated 10-16 06:08

About this skill

Science Content PPT Skill

A complete workflow for converting popular science content text into a visualized PPT-style webpage.

Real case (OSI seven-layer network model)

User input text:

In order to enable computers produced by different computer manufacturers to communicate with each other and to establish computer networks on a larger scale, the International Organization for Standardization (ISO) proposed the "Open Systems Interconnection Reference Model" in 1978... The seven layers from bottom to top are: physical layer, data link layer, network layer, transport layer, session layer, presentation layer, application layer. The fourth layer completes the data transmission service, and the upper three layers are user-oriented. In addition to the standard OSI seven-layer model, common network layer divisions also include the TCP/IP four-layer protocol and the TCP/IP five-layer protocol.

Execution flow:

  1. Use the "Step 1 prompt template" below to generate the PPT prompt
  2. The model directly generates the complete HTML (or restructures it using the Step 3 template)
  3. When the user says "generate flowchart", use mode two to convert the content into a flat UI style

Output result:

  • PPT mode: 13-page carousel, including cover, introduction, seven-layer details, layer division of labor, protocol comparison
  • Flowchart mode: horizontal seven-layer process cards, green flat UI style

Template files (built into the Skill)

When calling, use paths relative to the Skill root directory:

PPT carousel template (mode one, default, used by Step 3):

# 优先使用 level2 模板（由当前对话模型根据内容选择最合适的）
assets/templates/PPT Template-level2/   ← 优先选用
assets/templates/PPT/PPT-Generate-3.html
assets/templates/PPT/PPT-Generate-1.html
assets/templates/PPT/PPT-Generate-2.html
assets/templates/PPT/PPT-Generate-4.html
assets/templates/PPT/PPT-Generate-5.html
assets/templates/PPT/PPT-Generate-6.html
assets/templates/PPT/PPT-Generate-7.html

Animation flat UI template (mode two, default):

assets/templates/Animation/RNN-3.html  ← 默认
assets/templates/Animation/RNN-2.html
assets/templates/Animation/RNN-4.html
assets/templates/Animation/RNN-5.html
assets/templates/Animation/RNN-6.html
assets/templates/Animation/RNN-7.html
assets/templates/Animation/LSTM-1.html
assets/templates/Animation/Comprehension.html
assets/templates/Animation/GPU.html
assets/templates/Animation/word2vec-1.html
assets/templates/Animation/onehot.html
assets/templates/Animation/onehot-drawback.html
assets/templates/Animation/The fatal flaw of DNN.html
assets/templates/Animation/Cross-modal disentanglement - 2.html

Mode one: generate a PPT presentation webpage (default)

When the user provides popular science text and wants to generate a presentation page, execute the following steps:

Step 1 — Generate the PPT prompt

Apply the following prompt template to the popular science text content input by the user:

根据以下内容生成基于纯前端页面单页布局仿PPT换页轮播进行直观图形化可视化的介绍，加大文字大小，并运用加粗、下划线、斜体、文字颜色、文字背景等强调方式方便进行视频演示。添加每次切换页面时页面中的各个元素依次"缓入"出现的动画效果(细化到每行文字)。

---
{用户输入的科普内容文本}
---

Step 2 — Generate AI_Animation.html

Use the prompt generated in Step 1 to call the current conversation model to generate the complete HTML page code.

⚠️ Key: the following two constraints must be appended to the generation prompt:

将emoji图标换成平面ui库的图标（如Font Awesome或Lucide图标库）。添加完成后检查页面中是否还有残留的emoji字符，如有则全部替换为对应的ui图标。

所有动画元素的class名统一使用 an 或 anim-item，以便后续动画重置逻辑能正确识别并处理。

⚠️ Key: animation reset fix HTML directly generated by the AI model has the bug that animations play only once and do not replay after switching pages. The following fix JS must be inserted at the bottom of the page after generation (ensure it is before </body> ):

(function() {
    // 克隆节点强制重置CSS动画，确保每次切换页面动画重新触发
    document.querySelectorAll('.slide').forEach(function(s) {
        s.querySelectorAll('.an, .anim-item, [style*="animation"]').forEach(function(item) {
            var clone = item.cloneNode(true);
            item.parentNode.replaceChild(clone, item);
        });
    });
})();

Output path: determined by the user; when the user does not specify, output by default to the desktop /home/mt/桌面/AI_Animation.html

Step 3 — Restructure into PPT template style (optional)

Restructure the generated webpage using a PPT template.

Template selection rules:

  1. Prefer to select from the assets/templates/PPT Template-level2/ directory(20+ templates in total)
  2. Bythe model of the current conversationjudge on its own according to the content characteristics of the popular science copy (theme, structure, complexity), and select the most suitable PPT template
  3. If there is no suitable option in level2, fall back to the assets/templates/PPT/ directory

Prompt template:

以页面 {模板相对路径} 为模板重构 {用户指定的输出路径}。

请将AI_Animation.html的内容按照指定PPT模板的布局、样式和轮播机制进行重构，保持科普内容不变，优化视觉效果使其更适合视频演示。

Template path example:

  • Level2 example:assets/templates/PPT Template-level2/3-1.html
  • Default fallback:assets/templates/PPT/PPT-Generate-3.html
  • The user can specify other built-in templates

Template directory list:

  • PPT Template-level2/(Preferred): 1.html ~ 9-3.html, 25 templates in total, see the SUMMARY reference below
  • PPT/(Fallback): PPT-Generate-1.html ~ PPT-Generate-7.html

AI template selection reference document: assets/templates/PPT Template-level2/SUMMARY.md

Before refactoring in Step 3, the AI must first read SUMMARY.md, select the most suitable one from the 25 templates according to the type of popular science content, and then proceed with refactoring. The core basis for template selection:

  • Comparison/debate type → 8-1 (12 groups VS), 8-3 (30 groups VS), 6-2 (architecture comparison)
  • Step/process type → 3-2 (SVG flowchart), 6-1/6-3/6-4 (step animation)
  • Case/experiment type → 4-2, 4-3 (code rain animation)
  • Warning/danger type → 5-4 (13 pages + 15 kinds of animation), 7-3 (red pulse)
  • Lightweight/fast → 3-3 (331 lines), 4-1 (315 lines), 9-3 (5 pages)
  • Strongest visual impact → 2 (13 kinds of animation), 6-2 (15 kinds of animation + red-green VS comparison)

Note: After refactoring is complete, check whether the target template has built-in animation reset fix JS; if not, add it manually.

Mode 2: Generate flowchart (requires explicit user trigger)

When the user says "generate flowchart", perform the following steps:

Step 1 — Determine the template + read the SUMMARY reference

The AI must first read: assets/templates/Animation/SUMMARY.md

According to the type of popular science content, select the most suitable one from the 14 Animation templates:

Content type Recommended template Reason
RNN/LSTM recurrent network RNN-3 (hidden state, default) > RNN-4 (standard process) Dark green theme, RNN series
Vanishing/exploding gradients RNN-6 (explosion warning) > RNN-7 (dual problems) explode + shake animation
Architecture/system/multi-module Comprehension > Cross-modal Architecture cards + connecting line animation
Word2Vec/word vectors word2vec-1 Semantic vector visualization
One-hot encoding onehot (introduction) > onehot-drawback (drawbacks) Vector sparsity visualization
DNN/deep learning drawbacks The fatal flaw of DNN Purple warning style
GPU/computing hardware GPU Computing node connection animation
LSTM three stages LSTM-1 Gating structure in three stages

Default template: assets/templates/Animation/RNN-3.html The user can specify other Animation templates.

Step 2 — Refactor into flat UI style

Prompt template:

将 {用户指定的输出路径} 网页的每相邻的两页的内容合并后按照指定网页的平面UI样式进行视觉重构，保持现有颜色方案不变。

具体实施要求包括：
1. 精确还原模板中的布局结构、元素间距、字体样式、图标设计和视觉层次
2. 确保所有交互元素（按钮、表单、导航等）的视觉表现与参考网页一致
3. 维持原有的颜色值和配色方案
4. 保证修改后的页面在不同设备和浏览器上具有良好的响应式表现
5. 优化DOM结构以匹配UI设计，同时保持原有功能完整性和交互逻辑不变

完成后需进行视觉一致性检查，确保实现效果与参考网页达到95%以上的相似度。

模板路径：{模板相对路径，默认 assets/templates/Animation/RNN-3.html}

Known issues and solutions (practical summary)

Q1: Animation does not retrigger after switching pages

Cause：CSS animation-fill-mode: forwards makes the animation run only once, and display:none cannot reset the animation state either. Solution: When switching pages, clone the DOM node (cloneNode(true) + replaceChild), forcing the browser to re-render the animation. This is themost reliable across browserssolution. Code：

document.querySelectorAll('.slide').forEach(function(s) {
    s.querySelectorAll('.an, .anim-item').forEach(function(item) {
        var clone = item.cloneNode(true);
        item.parentNode.replaceChild(clone, item);
    });
});

Q2: The amount of HTML code generated directly by AI is insufficient

Symptom: The HTML generated by the model is sometimes only 200-400 lines, with thin content. Solution: In the prompt, explicitly require "code of over 1000 lines", or generate in multiple steps and then concatenate the content.

Q3: Flowchart mode does not generate new content

Note: Flowchart modedoes not generate new content, it only visually re-presents the already generated AI_Animation.html page content according to the template style. You must first have the PPT version content before saying "generate flowchart".

Parameter Description

Parameter Default Value Description
PPT template path assets/templates/PPT Template-level2/(model selects automatically) The template used by Mode 1; the model selects the most suitable level2 template based on the content characteristics
Flowchart template path assets/templates/Animation/RNN-3.html The template used by Mode 2
Output path /home/mt/桌面/AI_Animation.html The generated webpage file; the default value is used when the user does not specify one
Animation repair JS Built into the template Clones nodes to reset CSS animations when switching pages

Usage

Mode 1 (default PPT process):

User inputs popular science content → Skill automatically completes the full process of prompt generation, webpage generation, and animation repair

Mode 2 (flowchart):

After the user inputs popular science content, they then say "generate flowchart" → reconstruct the already generated AI_Animation.html according to the Animation template into a flat UI style

Template replacement:

Users can specify other built-in templates for reconstruction by saying "use xxx.html as the template"