SuperAPI AI 工具集

damncool-html-slides

设计与创作

查看项目

更新于 10-15 20:14

技能介绍

用途:把用户提供的主题、大纲、笔记或素材,制作成带动画、可直接在浏览器运行的 HTML 幻灯片,强调电影感与空间导航。

主要能力:内置 cinematic-suite 套件,包含 assets/cinematic-suite/index.html 起始页、css/cinematic-slides.css(主题、布局、图标样式、动画)、js/cinematic-slides.js(类似 impress 的镜头导航、总览、随机转场、图标包),以及 references/authoring-patterns.md 类名模式与示例。提供五种 body 主题:theme-solar-pop、theme-noir-lux、theme-cyber-acid、theme-editorial-fire、theme-forest-lab。

使用方式:先在用户指定路径创建输出文件夹(未指定则按主题命名,如 ai-future-slides),把 assets/cinematic-suite/ 全部文件复制进去,通常只编辑 index.html。每张幻灯片用 section.step 加 data-x、data-y、data-z、data-scale、data-rotate 定义唯一 3D 变换路径,并混用 cover、split、bento、quote、metric wall、timeline、comparison、image/visual placeholder、closing 等布局,多数页加大型视觉锚点如 <div class="mega-icon" data-icon="..."></div>。建议 8-16 页。用浏览器打开 index.html 或本地服务验证,方向键、空格、滚轮、点击导航,Ctrl/Command+G 打开总览,O/Backspace/Escape 为备用总览快捷键。

适用场景:产品、教育、乐观科技、战略金融、未来黑客 AI 游戏、观点报告、文化话题、科学可持续研究医疗等演示。

限制:除非用户明确要求,不要重建演示引擎;避免默认 Tailwind 式蓝紫靛配色及 #3b82f6、#6366f1、#8b5cf6 等;素材不足时可做合理假设并标注为框架而非事实。交付时返回 index.html 路径,并简要说明所选主题与主要操作。