beautiful-html-templates

在 AI 辅助创作日益普及的今天，生成文字内容已变得轻而易举，但将其转化为视觉精美的演示文稿（PPT/Slides）仍是一大挑战。beautiful-html-templates 是一个专为编码代理（Coding Agents） 设计的可复用 HTML 幻灯片模板库。

它不仅仅是一堆静态页面，更是一套标准化的“设计系统”。通过内置的 AGENTS.md 操作手册，AI 代理能够理解用户需求，智能匹配最合适的视觉风格，并自动生成结构完整、美观大方的 HTML 演示文稿。无论是技术分享、产品路演还是个人总结，都能瞬间拥有专业级的外观。

核心亮点：智能、标准、美观

1. AI 原生设计，代理友好

• AGENTS.md 操作手册：专门为 AI 代理编写的指令文件，指导其如何读取 index.json、解析用户意图、匹配模板、克隆代码及注入内容。
• 标准化结构：每个模板都遵循统一的文件结构和元数据规范，确保 AI 能够稳定、准确地操作，避免“幻觉”导致的代码错误。
• 一键生成：用户只需提供主题或大纲，代理即可全自动完成从选型到渲染的全过程。

2. 32 款精选模板，覆盖多场景

• 丰富选择：涵盖极简主义、科技感、商务风、创意插画等多种视觉风格。
• 完整展示：每个模板均提供封面、中间页、封底三张典型幻灯片的预览，直观呈现其在不同布局下的表现力。
• 响应式设计：基于现代 Web 技术（HTML/CSS/JS），适配各种屏幕尺寸，支持浏览器直接演示或导出 PDF。

3. 元数据驱动，灵活扩展

• index.json 索引：集中管理所有模板的元数据（名称、标签、适用场景、预览图链接），方便代理快速检索和过滤。
• 模块化资源：每个模板文件夹独立包含 HTML、CSS、JS 及相关图片资源，便于单独调用或二次开发。
• 易于定制：基于标准 Web 技术，开发者可轻松修改配色、字体和动画，打造品牌专属风格。

快速开始：如何让 AI 为你制作幻灯片？

你无需手动下载或编写代码，只需将以下指令复制给你的编码代理（如 Claude Code, Cursor, GitHub Copilot 等）：

提示词示例：
“克隆 https://github.com/zarazhangrui/beautiful-html-templates 并按照 AGENTS.md 中的说明，为我构建一个关于‘[你的主题，例如：2026年AI趋势展望]’的精美 HTML 幻灯片演示文稿。”

代理将自动执行以下步骤：

1. 克隆仓库：获取最新模板库。
2. 阅读手册：解析 AGENTS.md 理解操作规范。
3. 匹配模板：根据主题从 index.json 中选择最合适的视觉风格。
4. 生成内容：创建 HTML 文件，注入标题、正文、图表占位符等。
5. 交付成果：提供可本地运行的 HTML 文件或在线预览链接。

适用场景