SuperAPI AI 工具集

save-as-standalone-html

前端与建站

查看项目

更新于 10-15 17:19

技能介绍

用途:把当前设计导出为一个自包含、可完全离线运行的 HTML 文件,不依赖外部资源。

主要能力:配套的确定性打包工具 super_inline_html 能内联 HTML 属性中直接引用的资源,包括 img 的 src/srcset、source 的 src/srcset、video/audio/track 的 src、video poster、SVG image href/use href、link href(样式表、favicon)、script src,以及 CSS 中的 url()、@import 和行内 style 属性。

使用方式:

  1. 复制并读取 HTML 文件,查找所有仅以代码字符串形式引用的资源(如 React/JSX 中的 <img src={"./hero.png"} />、styled-components 里的 background: url(...)、动态导入脚本、fetch/XHR 资源、程序化设置的音视频源)。
  2. 为每个这类资源在 head 中添加 <meta name="ext-resource-dependency" content="<url>" data-resource-id="<id>" />,并把代码中的硬编码 URL 改为 window.__resources[id]。相对路径以 HTML 页面本身为基准。
  3. 创建必需的内联 SVG 缩略图(打包器缺少它会拒绝文件),放在 <template id="__bundler_thumbnail" data-bg-color="..."> 中,作为解包时的启动画面与 JS 禁用时的回退。
  4. 保存修改后调用 super_inline_html({ input_path: "<path-to-html>", output_path: "My Deck.html" }),输出文件用友好名称。
  5. 检查工具结果中列出的未打包资源并修复重跑,再用 show_html 与 get_webview_logs 做内部验证。
  6. 必须用 present_fs_item_for_download 指向内联后的 HTML 交付下载,不能仅用 show_html/show_to_user 代替。

限制:若项目使用 Anthropic API,则无法独立运行,属于核心功能时应停止并告知用户。资料未提供工具的平台支持范围、费用与性能数据。