SuperAPI AI 工具集

hyperframes-slide-work-title-bullets

前端与建站

查看项目

更新于 10-15 20:04

技能介绍

用途:该技能面向 HyperFrames 合成的 title-bullets 幻灯片,适合概念说明、要点整理、核心主张展开等最基础的说明页,以及在无图片、需要让信息本身成为主角时使用。

主要能力:提供 HTML 结构模板(.scene clip 场景容器、eyebrow 类别、scene-title 主标题、ul.bullets 项目符号列表)、CSS 规格(标题 88–120px、weight 800、负字距且不超过两行;列表无项目符号、纵向 flex、间距 24–28px;条目 38–44px、line-height 1.45、左内边距 56px、keep-all 换行;::before 为左侧线条标记;strong 使用强调色与 weight 700),以及 GSAP 入场动画写法(按 data-start 计算起始时间,eyebrow、scene-title、各条目依次入场,条目间 stagger 0.12–0.15s,可为每条目赋 id 独立控制或使用 stagger 选项)。同时给出构建生成器时的 Markdown 识别规则:以“# [徽章] 标题”形式识别标题,以“- 内容”形式识别各条目。

使用方式:按资料中的 HTML 结构与 CSS 关键类编写或修改幻灯片,用 id 引用元素并在 GSAP 时间线中按 start + 偏移量设置入场。

适用场景与撰写原则:每张幻灯片条目不超过 4 个,每条尽量一句话,第一条应是最重要的信息;需要图片时应改用 split 或 title-image。布局默认单列;条目较多或 3–4 条均为中长文本、或需要并列比较两组内容时可用两列(grid-template-columns: 1fr 1fr),但两列目的是在同等密度下提升可读性,仍须保持第一条优先;两条及以下、首条格外重要、或需按顺序由上至下阅读时用单列;两列也无法容纳时应拆成两张幻灯片。

限制:资料未提供安装命令、依赖版本、授权与收费等信息,具体使用需结合 HyperFrames 合成环境。