1. 项目定位与用途
AI Animation 是一个 AI Prompt 模板集合项目，核心定位是帮助用户通过 AI 工具快速生成炫酷的 HTML 动画网页。项目提供分类整理的 Prompt 模板（prompt.md）和丰富的可运行示例（web_animation/），覆盖动画效果、3D 可视化、PPT 风格演示、UI 美化等多个类别。用户可直接预览示例，或利用模板指导 AI 生成自定义动画，适用于视频创作、教学演示和技术科普等场景，无需深厚的前端开发经验。
项目档案模板 / Starter
AI Animation：AI 生成 HTML 动画网页的 Prompt 模板库与示例集（含安装指南）
AI Animation 是一个专注于 HTML 动画网页生成的 AI Prompt 模板集合，提供动画效果、3D 可视化、PPT 风格等类别模板。本站详解项目用途、安装步骤（克隆后直接打开 HTML 文件）、三种使用方式，并展示示例预览，适用于视频创作、教学演示和技术科普场景。
AI 总结
AI Animation 是一个收集并分类整理 AI Prompt 模板的开源项目，专注于帮助用户快速生成炫酷的 HTML 动画网页，适用于视频创作、教学演示和技术科普场景，显著降低复杂动画的开发门槛。
中文项目介绍
AI Animation 是一个专注于 HTML 动画网页生成的 AI Prompt 模板集合项目。它通过预定义的 Prompt 模板和丰富的可运行示例，使用户能够借助 AI 工具（如 Trae、Claude、GPT-4o）快速创建专业级的动态可视化内容，无需从零编写复杂的 HTML/CSS/JS 代码。
项目主要解决了手动开发高交互性动画网页的技术门槛高、耗时长的痛点。通过结构化 Prompt，AI 可以生成包含 CSS 动画、3D 变换和交互逻辑的完整 HTML 文件，极大提升了效率。
适用场景包括：视频创作者制作 AI City 等系列动画；教育工作者进行技术概念（如神经网络、网络协议）的可视化教学；技术科普作者将抽象概念转化为图形化演示。
技术特征上，项目纯前端实现，无后端依赖；示例文件使用原生 HTML5、CSS3 和 JavaScript，动画基于 CSS Keyframes 和 3D Transform，图表纯 CSS/JS 绘制，兼容现代浏览器。所有资源可直接在浏览器中打开运行，无需构建或安装步骤。
详细信息与使用说明
2. 解决的问题
项目主要解决了从零开始编写复杂 HTML/CSS/JS 动画的困难。传统方式需要掌握动画原理、3D 变换和交互逻辑，开发门槛高、周期长。通过预定义的 AI Prompt 模板，用户只需描述需求，AI 即可生成完整可运行的动画代码，极大降低技术壁垒。同时，项目提供大量示例文件作为学习参考，帮助用户理解如何用代码实现各类动态效果，避免重复造轮子。
3. 适用场景
项目明确适用于三类场景：一是视频创作，例如生成 AI City 系列视频中的动画演示片段；二是教学演示，将技术概念（如 RNN、LSTM、网络协议）转化为可视化动态呈现，提升课堂互动性；三是技术科普，将抽象概念（如神经网络结构、数据包传输过程）以图形化方式展示，便于公众理解。此外，PPT 风格模板也适用于快速制作动态演示文稿。
4. 安装方式
安装方式在仓库中已明确给出，无需额外依赖。具体步骤：1. 克隆仓库：git clone https://github.com/Unclecheng-li/AI_Animation.git；2. 进入项目目录：cd AI_Animation；3. 无需安装任何软件或包，直接在浏览器中打开 web_animation/ 目录下的任意 .html 文件即可预览。所有示例均为静态文件，即开即用。
5. 使用方式
项目提供三种使用方式，均在 README 中详细说明：方式一，直接使用示例：在浏览器中打开 web_animation/ 下的 HTML 文件，使用方向键或鼠标滚轮交互；方式二，AI 生成新动画：参考 prompt.md 选择或修改 Prompt，发送给 Trae、Claude 或 GPT-4o 等 AI 工具，指定输出路径后预览；方式三，UI 参考重构：基于 UI/ 中的设计图，使用 prompt.md 中「UI 置换」类 Prompt 让 AI 重构视觉样式。推荐工具包括 Trae（免费，直接生成 HTML）、Claude（长上下文，代码质量高）和 GPT-4o（图形理解强）。
6. 补充说明与实现特点
项目技术栈完全基于原生 Web 技术：前端使用 HTML5、CSS3 和 JavaScript，无任何框架依赖；动画效果通过 CSS Animation、Keyframes 和 3D Transform 实现；图表绘制纯靠 CSS/JS，无外部库。兼容现代浏览器（Chrome、Firefox、Safari、Edge）。开源协议为 MIT，但明确声明仅供学习和研究使用，请勿用于非法或商业用途。项目结构稳定，分为 Prompt 模板库、示例动画集和 UI 设计参考三层，所有资源均可直接运行。
思维导图
AI Animation
Prompt 模板库
prompt.md（分类模板）
prompt.txt（原始文本）
示例动画集
Animation
AI Model
网络协议演示
PPT 模板
3D 与几何
背景与实验
UI 设计参考
design1.png ~ design6.png
timeline.png
常见问题
如何安装和使用 AI Animation 项目？
安装非常简单：克隆仓库（git clone https://github.com/Unclecheng-li/AI_Animation.git），进入目录（cd AI_Animation），然后直接在浏览器中打开 web_animation/ 下的任意 .html 文件即可预览，无需安装任何依赖。使用方式包括直接预览示例、用 Prompt 模板配合 AI 工具生成新动画、或基于 UI 参考图重构视觉样式。
项目中的 Prompt 模板如何配合 AI 工具使用？
打开 prompt.md 文件，选择或修改合适的 Prompt 模板，将其发送给推荐的 AI 工具（如 Trae、Claude、GPT-4o），并指定输出文件路径。AI 将生成完整的 HTML 动画代码，保存后即可在浏览器中预览。不同工具有不同优势：Trae 免费且能直接生成 HTML，Claude 上下文长、代码质量高，GPT-4o 图形理解能力强。
示例动画文件可以直接在浏览器中打开吗？是否需要服务器？
可以。所有示例文件均为静态 HTML，无需任何服务器或构建步骤，直接双击或用浏览器打开即可运行。交互方式通常使用方向键（← →）或鼠标滚轮翻页，具体操作可在打开后尝试。项目兼容现代浏览器（Chrome、Firefox、Safari、Edge）。
生成的动画可以用于商业用途吗？
不能。项目采用 MIT 开源协议，但 README 中明确声明“仅供学习和研究使用，请勿用于非法用途”和“请勿用于商业用途”。因此，所有模板和示例仅限非商业场景，商业使用需另行获得授权。
项目是否支持自定义修改示例动画？
支持。示例文件均为纯 HTML/CSS/JS 代码，用户可直接用文本编辑器打开并修改。此外，通过 prompt.md 中的 Prompt 模板，可以让 AI 基于现有示例进行重构或扩展，例如应用新的 UI 设计或调整动画逻辑，从而实现个性化定制。