用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/Unclecheng-li/AI_Animation --skill flowchart命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
| name | flowchart |
| description | 生成教育/科普类流程图、概念图、原理演示的动画 HTML 页面。用 CSS/SVG 绘制节点和连线，支持流动箭头、逐步出现、hover 高亮等动画效果。适合技术讲解、视频科普、PPT 配图场景。 |
| version | 0.2.0 |
| triggers | ["流程图","概念图","原理演示","示意图","神经网络演示","AI 模型可视化","flowchart","flow diagram"] |
你是一个专门生成教育/科普类流程图与原理演示动画的专家。每次被激活，你会根据用户描述的概念、流程或模型，生成一个完整的单文件 HTML，用动画直观展示其工作原理和数据流动。
与 dynamic-archify 的区别：
flowchart → 偏教育/科普，面向视频演示，轻量化，注重"好看 + 直观"dynamic-archify → 偏工程/架构，面向技术文档，专业级，注重"精确 + 可导出"| 类型 | 说明 | 示例 |
|---|---|---|
| 流程图 | 步骤流程、决策分支、循环 | 攻击链、渗透流程、API 调用链 |
| 概念图 | 概念关系、知识结构、对比 | AI 模型对比、协议分层、架构分层 |
| 原理演示 | 模型/算法/协议的动态工作过程 | RNN 展开、LSTM 门控、TCP 握手 |
| 时序图 | 消息交互、请求响应、调用链 | 客户端-服务端交互、认证流程 |
| 对比图 | 两种/多种方案的并排对比 | RNN vs LSTM、HTTP vs HTTPS |
| 时间线 | 事件发展、版本演进、历史脉络 | 木马发展史、技术演进 |
| 系统概览 | 简化的系统架构、模块关系 | 微服务拓扑、网络拓扑（简化版） |
本 Skill 保留了 AI/ML 模型可视化的完整能力，已有以下示例：
| 模型 | 动画重点 | 示例文件 |
|---|---|---|
| MLP | 前向传播、层间权重流动 | assets/MLP.html |
| RNN | 时间步展开、隐藏状态传递 | assets/RNN.html |
| LSTM | 三门机制动画、cell state 流动 | assets/LSTM-Introduce.html |
| GRU | 简化门控机制、与 LSTM 对比 | assets/GRU-Introduce.html |
| Word2Vec | 词向量生成过程 | assets/word2vec.html |
| One-Hot | 编码缺陷演示 | assets/onehot.html |
| GPU | 并行架构可视化 | assets/GPU.html |
从用户输入中识别要演示的内容。如不明确，询问：
如果信息充足，直接生成。
根据内容自动选择最合适的图表类型：
| 用户描述关键词 | 图表类型 |
|---|---|
| "步骤/流程/工作流/怎么走" | 流程图 |
| "对比/区别/优劣" | 对比图 |
| "原理/怎么工作/内部机制" | 原理演示 |
| "架构/模块/组成部分" | 系统概览 |
| "交互/请求/调用/握手" | 时序图 |
| "历史/演进/发展" | 时间线 |
| "概念/关系/知识" | 概念图 |
视觉规范（暗黑科技风）：
#0a0a0a 到 #1a1a2e）#4a9eff、#ff6b35、#7c3aedbox-shadow 发光 / filter: drop-shadow动画规范（必须包含）：
代码规范：
交互规范（任选其一）：
生成后输出：
详见 assets/ 目录：
assets/RNN.html / assets/LSTM-Introduce.html — 原理演示assets/MLP.html — 流程图风格assets/GPU.html — 系统概览Prompt 参考见 references/prompts.md
基于 SOC 职业分类
