SuperAPI AI 工具集

soil-html-deck

办公与效率

查看项目

更新于 10-21 01:23

技能介绍

用途

soil-html-deck 用于创建 YAML 驱动的 SOIL 交互式 HTML 演示文稿,把演示内容输出为可移植的单文件网页。它是 SOIL Image Deck 的交互超集,沿用相同的 SOIL 教学流程、页面架构、设计系统、受控布局路由、图像简报与 YAML 核心,但用 HTML/CSS/JS 渲染实时文字与交互,而不是生成图片幻灯片。

输出契约

  • 生成一个可在浏览器打开的 .html 文件,样式与脚本全部内联。
  • 接受的图片以 data:image/...;base64,... 形式嵌入,保证最终文件可便携。
  • 标题、段落、标签、卡片、表格、公式、图表、决策节点与控件保持为实时 HTML、SVG、Canvas 或数学标记。
  • 仅允许在封面、章节分隔或结尾主图上使用烤制文字。
  • 使用内置图像生成能力制作 AI 视觉素材,不用程序化占位符替代请求的 AI 视觉。
  • 保留键盘、鼠标与触控导航;包含减少动效行为与无交互降级方案。

共享 SOIL 核心

从 references/soil-deck-core.md 中的渲染器中立字段开始,再用 assets/interactive-spec-template.yaml 中的 HTML 交互与无障碍字段扩展。配置轴包括:

  • planning_mode:quick 或 yaml_spec,默认 yaml_spec。
  • visual_mode:native、asset、plate 或 hero-only baked。
  • interaction_level:none、guided 或 exploratory,默认 guided。
  • portability:single_file 或 linked,默认 single_file。
  • style_lock:none 或 golden_trio,默认 golden_trio。

使用方式(工作流)

  1. 概念与流程:确定一个核心大想法、受众目标、常见误解,以及「引起动机 → 维持注意 → 唤起行动」。
  2. 页面架构:为每页分配一个教学任务、核心要点、学习任务、语义结构、受控布局与简短可见文案。
  3. YAML 契约:基于 assets/interactive-spec-template.yaml 创建 spec.yaml,在编写 HTML 前锁定设计、响应式、交互、无障碍与验证规则。
  4. 交互路由:根据语义选择交互,而非装饰;参考 references/interaction-router.md。
  5. 黄金三页:在构建完整演示前,先确认封面、标准内容页与一个代表性交互页。
  6. 素材制作:只生成所需图片;实时 HTML 页面优先选择无文字底板与辅助素材。
  7. HTML 制作:使用 references/html-patterns.md 中的组件与导航模式;保持选定主题,不强制固定暗色科技风。
  8. 验证:校验 YAML、嵌入素材、运行独立验证器、在浏览器中检查每一页,并测试桌面与窄视口表现。

若已有经过验证的 SOIL Image Deck YAML,可迁移其渲染器中立字段,而不必重新规划;随后补充 learning_task、speaker_only、interaction、accessibility 与响应式布局行为,再验证升级后的规格。

交互策略

  • 仅在能澄清比较、顺序、分类、因果、层级、数据、决策、练习或探索时使用交互。
  • 8–12 页演示默认安排 2–4 个有意义的交互;仅当学习设计需要时可更多。
  • 每页保留一个主要交互。
  • 每个交互都需要明确的学习目标、初始状态、键盘/触控控制与静态降级方案。
  • 不要把关键教学内容藏在仅悬停可见的行为后面。
  • 不把动效当装饰;支持 prefers-reduced-motion。

排版与视觉规则

使用 YAML 设计系统。默认中文展示字体保持粗体、圆润、友好、低棱角。本地可用时优先 jf open 粉圓 2.1、GenSenRounded TW 或 GenJyuuGothic;便携 HTML 可使用声明的圆体网页字体或有记录的系统回退。保持固定外壳与受控变化:标题锚点、色板、材质语言、重复母题、安全区域与进度元素保持一致,同时布局与交互响应内容变化。

命令

校验交互式 YAML:

python .\scripts\validate_interactive_spec.py --spec .\spec.yaml

将生成的素材嵌入最终 HTML 文件:

python .\scripts\embed_assets.py --template .\slides.template.html --output .\slides.html --asset COVER=.\assets\cover.png

验证最终独立演示:

python .\scripts\verify_html.py --html .\slides.html --spec .\spec.yaml --strict-offline

参考文档

  • 迁移或编写 YAML 前阅读 references/soil-deck-core.md。
  • 分配交互前阅读 references/interaction-router.md。
  • 实现 HTML 前阅读 references/html-patterns.md。
  • 交付前阅读 references/validation.md。

适用场景与限制

适用于交互式教学演示、课程讲义、产品讲解、需要对比或流程展示的网页演示;要求最终产物为单文件、可离线打开。限制包括:依赖 YAML 规格与配套脚本、需要浏览器端测试;字体本地可用性影响中文圆体效果,不保证所有环境一致;图片需预先接受并内嵌,体积受嵌入素材影响。具体收费、价格与平台支持信息暂未提供。