Beautiful HTML Templates

模板选型、内容替换与同体系扩展

让 AI 从现成的 HTML 幻灯片设计体系中选型，用真实内容制作封面候选，再完成整套演示。

作者 Zara Zhang

安装与上手查看 GitHub
森林绿底、粉色衬线大标题与等宽页眉，展示安静的编辑感。打开作者原图

森林绿底、粉色衬线大标题与等宽页眉，展示安静的编辑感。

查看作者图库

三张均为作者 README 链接的原始模板截图，保留示例文案与占位区域；不是本站生成的演示。原图页码可能反映截图时的状态，例如 Neo-Grid Bold 显示 12 页，而当前索引记录 13 页。实际选型仍需把你的标题放进去比较。

适用工作方式

  • 可读写本地文件的编程助手
  • 浏览器 HTML 演示
GitHub Star
4,897
资料核对
分类
文档与幻灯片

先看自己的标题放进去是什么样。

把视觉选择提前到三张真实封面，再把时间花在整套内容、数据和资源上。已有模板选型时，可以直接进入替换、扩展或本地化任务。

选一个任务，开始使用

先取得完整仓库，再把下面的任务和自己的材料交给助手。首次选型会停在封面比较；已有选型可直接用后面的任务。

你这次想做什么？

从已有提纲开始，先选择气质，再完成 8 页演示。

  1. 把模板库放进工作区

    按作者 README 取得完整仓库，放入助手可访问的工作区，再读取 AGENTS.md。这里使用模板文件，不添加一个并不存在的 SKILL.md；先做现有模板适配，无需运行新模板维护脚本。

    查看作者安装说明

  2. 把这段话发给 AI

    以下是本站依据作者流程编写的任务示例；方括号是你要提供的材料或路径。候选预览、数据核对和字体检查都需实际完成，不能把提示词要求当成已验证结果。

    请用 beautiful-html-templates 制作一份 8 页 HTML 幻灯片。输入是 [真实标题/副标题/作者/日期]、[提纲和证据文件]、[可用图片]，输出目录是 [新目录]。如果本地还没有仓库，先取得 https://github.com/zarazhangrui/beautiful-html-templates 的完整副本；原模板保留不动。 阅读根目录 AGENTS.md 的操作流程。先确认场合、听众和希望传达的气质；作者要求在挑选前明确询问场合与气质，等我回答。再读 index.json，按 mood、tone、best_for 选择三个有区别的候选，用 formality、density、scheme 校验适配，不按行业名称机械筛选。 分别读入围模板的 template.html、template.json 和 design.md，用我的真实标题、作者与日期替换各自首张封面；每个候选放独立目录，保留自己的脚本和资源，避免同名 deck-stage.js 互相覆盖。只生成封面预览，在浏览器查看字体、长标题、资源和尺寸后给我三个文件路径与简短说明，等我选定。 选定后复制该模板完整目录到输出目录，按我的材料安排 8 页：封面、议程、核心判断、证据、数据或实例、行动、检查指标、收束。只在材料支持时使用数据页，不编数字填满版式。沿用该模板字体、配色、装饰、页面结构和导航；超长内容优先精简或拆页，页数需要改变时说明原因。需要缺失版式时只在这一套体系内扩展。 逐页替换正文、示例数字、姓名、年份、引文署名、页脚、品牌缩写、图片占位和手写页码；同步导航标签与页数。图表还要核对刻度、单位、柱高和来源。保持所用资源的相对路径，附 LICENSE 及需要保留的素材说明。 在实际演示尺寸和小窗口逐页检查裁切、字体回退、翻页、图片和链接，保留实际检查结果。交付完整目录、入口 HTML 的绝对路径、选型理由和未解决问题。HTML 能打开不等于完全离线；若还有联网字体或图片，明确列出。

  3. 检查你拿到的结果

    • 三张使用真实标题的候选封面与明确的选择节点。
    • 选定风格下的完整 HTML 演示目录、入口路径和逐页检查记录。
    查看这项任务的作者说明
进一步了解这个 Skill

Beautiful HTML Templates 由 Zara Zhang 维护。当前索引列出 34 套模板、共 358 张示例幻灯片。每套有 HTML、元数据和设计说明，部分还附自己的导航脚本；编程助手负责读懂它们、选择合适的体系并改写内容。它适合已有提纲、希望获得完整视觉起点的演示制作。

作者把选型变成了可见的过程：先问场合与气质，再从索引挑出三个方向，用用户真实的标题、作者和日期各做一张封面。选择依据包括情绪、语气、正式程度和内容密度；“适合某行业”只是参考。用户选定后才铺开整套，减少成稿之后再推翻风格的成本。

后续工作有两条边界：文字、数字、署名、图片和页码必须换成自己的内容；字体、色板、装饰与导航要保持同一体系。模板缺少对比表或时间线时，允许按原有设计规则新增版式。中文、图表和离线使用仍要单独处理，模板不会自动把这些细节变成可靠成品。

来源与核验

资料核对

已核对固定提交的操作手册、索引计数、三套元数据，以及 Editorial Forest 的 HTML、设计说明和关键导航/打印实现；未逐套运行 34 套模板。

作者说明模板操作手册完整模板索引本例设计说明

选择另一种演示起点

Frontend Slides 从视觉探索组织 HTML 幻灯片；归藏 PPT Skill 提供另一条演示制作流程。按你的输出需要选择。

Frontend Slides先比较三种风格预览，再把大纲、图片或 PPTX 做成可播放、可改字的 16:9 HTML 幻灯。歸藏网页 PPT把文章、大纲和产品资料做成浏览器翻页的 HTML 演示，配齐讲述备注、排练与封面。Baoyu Design五个设计入口：baoyu-design 推进界面方案与交付，claude-design 在画布里改字、调样式和比较。HTML Anything把文章、数据和提纲交给已配置的编码 CLI，在本地预览文章页、演示稿和分享卡片，再按用途导出。