SuperAPI AI 工具集

huashu-sparkline-arc

设计与创作

查看项目

更新于 10-16 01:37

技能介绍

用途:生成单文件、Duarte 式叙事演示文稿(deck),以一条在「what is」与「what could be」之间摆动的波形贯穿每页,橙色只出现在故事转折处。视觉系统、画布契约与导航运行时由 example.html 锁定,使用时从 example.html 出发,只替换内容,不改设计与脚本,不引入规范外的颜色或字体。

主要能力:固定 1920×1080 的 #stage 画布,fit() 负责缩放;每页为 #stage 内的 section.slide,带 data-screen-label,仅一个 .active,暗色页加 .dark。导航脚本保持原样:方向键/PageUp/PageDown/空格翻页,Home/End 首末页,#/N 哈希路由,点击左三分之一后退、其余前进,右下计数、左下按键提示;无外部 JS、无构建步骤,可通过 file:// 在沙箱 iframe 中打开。设计令牌在 :root 中定义(--paper、--night、--ink、--accent #FF6B2C 等),字体仅一个 Google Fonts @import(Inter + Geist Mono),图表全部为手写内联 SVG 路径。

标志性元素:每页至少一条全幅 .spark 波形(平滑三次贝塞尔),线层用 preserveAspectRatio="none" 拉伸,标注点/文字放在同 viewBox 的非拉伸第二层;橙色转折点标注(光晕、实心点、可选 2px 圆环、Geist Mono 标签与数值),灰色虚线作行业基线对比;路径用 pathLength="1" + .draw 实现进入时重播的绘制动画;每页有 56px 的 mono 细线页眉页脚。布局枚举包括 cover、contents、what-is、turning-point、before-after、solo-line、evidence、roadmap、quote、closing,每套 deck 至少用 6 种。默认 10 页(允许 8–11),白页为主,暗页最多 2–3 页,每页橙色元素约 ≤5 处。

使用方式:先澄清一次主题、受众、页数及故事主线(what is、带日期的转折点、3–4 个证明攀升的数字);复制 example.html 改标题,按布局枚举逐节替换内容,保留 chrome、spark/reveal CSS、令牌名与脚本;按真实数据方向重塑贝塞尔路径,但保留双层 SVG 与 pathLength="1" 揭示机制;≥5 页时先做封面与转折页确认语法再批量生成。交付前逐页检查计数与 #/N 同步、动画重播、无溢出、橙色仅用于转折点、无残留演示文本。

限制:禁止 emoji、渐变、阴影、图片、图表库;只使用真实内容,缺失数据用 <!-- 待用户提供 --> 占位,不得编造统计;种子 deck 的「澈流 / CHELIU」为虚构演示内容,必须完全替换。该风格依赖真实的转折时刻,缺少明确拐点则效果不佳。