SuperAPI AI 工具集

open-design-landing-deck

设计与创作

查看项目

更新于 10-16 01:37

技能介绍

用途:为 OpenDesign 制作面向合作伙伴与媒体的品牌故事演示,说明其存在原因、理念与设计趋势,属于营销与 GTM 场景。它是 open-design-landing 的姊妹技能,沿用同一 Atelier Zero 视觉系统(暖纸色、Inter Tight + Playfair Display、斜体衬线强调、珊瑚色圆点),但以横向杂志式翻页呈现,而非长滚动页面。导航模式借鉴 guizang-ppt:←/→ 方向键、滚轮/滑动、ESC 打开总览网格。

主要能力:生成单个自包含 HTML 文件,N 个视口大小的幻灯片横向排列在一条变换的 flex 轨道上。支持键盘导航(←/→、↑/↓、PageUp/PageDown、Space、Home/End)、滚轮与触摸滑动(带惯性保护)、每页顶部信息条(品牌标记、标题、地点、罗马数字年份、实时页码如 01/11)、底部珊瑚色进度条、圆点指示器(可点击跳转)、ESC 缩略图总览网格。幻灯片类型包括 cover、section、content、stats、quote、cta、end。复用姊妹技能的 16 槽图片库,不重复资源。

使用方式:先编写 inputs.json(可从 inputs.example.json 起步,brand 与 imagery 可直接沿用姊妹技能配置),为每页选择 kind 并填写 schema.ts 中的字段。图片可选:用 FAL_KEY=... npx tsx ../open-design-landing/scripts/imagegen.ts ../open-design-landing/inputs.example.json --out=../open-design-landing/assets/ 生成,或用 npx tsx ../open-design-landing/scripts/placeholder.ts ../open-design-landing/assets/ 生成占位图。然后运行 npx tsx scripts/compose.ts inputs.json out/index.html 合成。最后自检:打开 HTML 确认封面与页码、方向键/空格/滚轮翻页、End/Home 跳转、ESC 总览、1080px 与 640px 响应式、prefers-reduced-motion 与 Lighthouse 对比度等。

限制:样式表在编译时读取 ../open-design-landing/styles.css,不在此维护副本;图片库同样复用。每页须保持单视口,1280×800 下内容超出会溢出,需精简文案或拆分。不要改为垂直 scroll-snap,不要添加路由,多页演示超出范围。具体收费、价格与平台信息暂未提供。