SuperAPI AI 工具集

editorial-collage-deck

设计与创作

查看项目

更新于 10-16 06:51

技能介绍

用途:把内容编排为单文件 HTML 幻灯片,采用 Atelier Zero 视觉系统,与 editorial-collage 共用样式表和 16 槽图片库。

主要能力:输出一个自包含 HTML,含 N 张视口高度幻灯片;键盘导航(←/→、↑/↓、PageUp/PageDown、Space、Home/End);顶部 HUD 显示品牌标记、标题、按键提示与实时页码;底部珊瑚色进度条;scroll-snap 分页并设 scroll-snap-stop: always。幻灯片类型包括 cover、section、content、stats、quote、cta、end。

使用方式:先编写 inputs.json(可参考 inputs.example.json),为每张幻灯片选择 kind 并填写 schema.ts 中的字段;MixedText 编码与姊妹技能一致。图片可选:用 FAL_KEY=... npx tsx ../editorial-collage/scripts/imagegen.ts ../editorial-collage/inputs.example.json --out=../editorial-collage/assets/ 生成,或用 npx tsx ../editorial-collage/scripts/placeholder.ts ../editorial-collage/assets/ 生成占位图,并把 inputs.imagery.assets_path 指向图片目录。然后运行 npx tsx scripts/compose.ts inputs.json out/index.html 生成幻灯片。

适用场景:需要单文件、可键盘翻页的演示稿,如 11 页左右的 pitch deck。

限制:样式表在编译时读取 ../editorial-collage/styles.css,不在此维护副本;图片库复用姊妹技能,不重复生成;每张幻灯片须适配单视口,1280×800 下内容超出 100vh 会溢出,需精简或拆分;不支持路由,多页 deck 超出范围,多 deck 需分别渲染并从父级索引链接。自检可检查封面页码、翻页、End/Home、prefers-reduced-motion、1080px 与 640px 响应式及 Lighthouse 对比度 AA、font-display swap、无布局偏移。