HTML 工具展示演示稿

要解决什么问题

给开发者工具或应用做介绍时，常见痛点是：公众号文章需要可嵌入的展示页、开源项目要在 GitHub Pages 上「像产品页一样」呈现，而传统 PPT 要么信息密度不对、要么难以承载大截图和横向翻页体验。本技能产出的是单文件 HTML横向演示稿，视觉语言接近 Product Hunt / GitHub README，而不是堆文字的说明书。

技能如何工作

执行时 AI 会尽量少问：根据你提供的工具名、描述、截图与链接，自动选定一套主题色、编排页序，并为每页搭配背景装饰类名。

• 页面结构：固定包含 Hero 封面、功能卡片与收尾 CTA；有截图则插入大图/功能详情，有步骤、数据、对比、FAQ 等素材再按需加页，并在推荐页数范围内做删减。
• 视觉与动效：支持 Light / Dark 双模式；背景为纯 CSS + SVG（几何点阵、电路线、粒子等），无 WebGL；入场与 hover 动效已写在模板里。
• 截图工作流：图片布局使用带 onerror 的 <img>，缺图时显示占位提示；你把文件按 p{页码}-{序号}.jpg 放进 images/ 即可，无需改 HTML。
• 落地步骤：从 template.html 拷贝并按工具名命名 HTML 文件，替换 title 等必填占位符，填充各布局内容后对照 checklist.md 自检，浏览器直接打开预览。

适用边界

更适合工具推荐配图、产品发布演示、内部分享 slides、测评对比页；不适合人文艺术类长文（文档建议用 guizang-ppt-skill）、大段表格数据或高密度培训课件。核心原则是截图优先于文字、每页一个信息点，性能数据需有来源、不编造。