SuperAPI AI 工具集

make-a-deck

设计与创作

查看项目

更新于 10-24 16:19

技能介绍

用途:make-a-deck 用于制作16:9的演示幻灯片、视觉故事板或路演材料,输出为单个自包含的HTML页面。它把AI设定为演示设计师:HTML只是交付媒介,设计思路应像顾问、分析师或高管为董事会准备材料那样,强调清晰、叙事流畅,并保证坐在后排的人也能看清。

主要能力:套件内置的 deck-stage 组件负责舞台缩放与信箱式留边、键盘与轻触导航、页码浮层、演讲者备注的 postMessage 约定、data-screen-label 与 data-om-validate 标记,以及逐页打印为PDF;后续如需导出PPTX,可向 gen_pptx 传入 resetTransformSelector: "deck-stage",组件支持 noscale 属性以关闭 Shadow DOM 缩放,使捕获时按原始尺寸几何。整体采用1920×1080的16:9画布。

使用方式:开始前先写大纲,并确认用途与叙事结构。若用户未说明演示时长(分钟)、目标受众、期望的品牌或视觉风格,技能要求先提问;没有设计系统时也不应直接给通用设计。调用 copy_starter_component(kind: "deck_stage.js")获取舞台组件,再以 <deck-stage width="1920" height="1080"> 包裹每页 <section data-label="…">,用普通 <script src="deck-stage.js"></script> 加载(原生JS,非JSX)。幻灯片内容应以静态HTML书写,而不是React或由脚本生成DOM,以便用户在编辑模式下直接点选标题或段落改字并即时合并回源文件;文本应各自放在独立的叶子元素中,重复结构要逐条写出而非循环生成。字号至少48px,用户若按点(pt)指定字号,需按 px = pt × 1.333 换算。建议在 <head> 的 <style> 中用CSS自定义属性定义字号与间距(如 --type-title: 64px、--pad-x: 100px 等),便于统一调整。图片方面应区分满版图(aspect-fill)与截图、示意图(aspect-fit,少叠加文字),叠字时沿用品牌常见做法(卡片、护罩渐变或模糊)。可使用平滑的页面过渡、充足留白、强排版与统一配色。

适用场景:需要面向听众现场讲解的演示材料,如商业汇报、分析结论、路演与视觉故事板。标题应像书本章节一样连贯,仅读标题即可理解整体内容;可在全文中混合整图页、不同底色、大数字、引言、表格与文字页,保持视觉多样与平行结构(分节标题一致、重复元素位置一致)。

限制与注意事项:避免在单页塞入过多文字,也不要在每页 <section> 上自行设置 position/inset/width/height;避免使用emoji或自绘素材,除非用户要求,应优先使用用户提供的图片或品牌素材与图标;避免“下判决式”、过度戏剧化或“不是X而是Y”式的标题。不要手写舞台、缩放与导航脚手架。Tweaks 面板(tweaks-panel.jsx)属于控制面板而非幻灯片内容,可以保留。验证时应按幻灯片构图规则检查截图,底部留白属于刻意的构图而非缺陷;同时核对字号是否匹配 --type-* 比例、边框留白是否匹配 --pad-*、标题是否平行一致,并避免强调色边框卡片或结论框。