用途
该技能用于把当前设计导出为一个完全自包含、可离线使用的单文件 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 属性。
但它无法发现仅以字符串形式出现在 JavaScript 或 JSX 代码中的资源，例如：React 中设置的图片 src、styled-component 中的 background URL、动态导入的脚本。因此需要先准备 HTML 文件，使打包器能够捕获全部资源，然后再运行打包器。
使用方式
第 1 步：复制 HTML 并更新代码引用的资源
复制当前 HTML 文件，阅读它，并复制其依赖项。遍历所有代码（内联脚本、导入的 JSX 文件、styled-components 等），找出以字符串形式在代码中引用而非作为 HTML 属性出现的资源 URL，包括：React/JSX 中的图片 URL；CSS-in-JS 中的 URL；导入其他脚本且这些脚本自身引用资源的 script 标签；任何 fetch() 或 XMLHttpRequest 加载的资源；以编程方式设置的音频/视频源。
注意：如果项目使用 Anthropic API，它将无法独立运行。如果这是项目的核心，应停止并告知用户。
第 2 步：添加 ext-resource-dependency 元标签
为第 1 步找到的每个资源，在 head 中添加：
<meta name="ext-resource-dependency" content="<url>" data-resource-id="<id>" />
其中 content 是资源 URL（相对于 HTML 文件或绝对路径），data-resource-id 是简短唯一的标识符。随后把代码改为引用 window.__resources[id] 而非硬编码 URL。在打包后的文件中，window.__resources[id] 将包含指向内联资源数据的 blob URL。
示例：
<meta name="ext-resource-dependency" content="./hero.png" data-resource-id="heroImg" /> <meta name="ext-resource-dependency" content="./pattern.svg" data-resource-id="patternBg" />
代码中将 <img src={"./hero.png"} /> 替换为 <img src={window.__resources.heroImg} />。
注意：content 中的相对路径相对于 HTML 页面本身；对于被导入且自身引用资源的外部 script 标签也必须这样做——这些脚本会被打包器内联，但其资源引用同样需要提取。必须彻底，遗漏任何一个资源都会导致最终文件中的图片损坏或资源缺失。
第 3 步：创建缩略图（必需，缺少会被打包器拒绝）
创建一个轻量级 SVG 缩略图，作为打包文件解包期间的启动画面。该 SVG 应是设计的简化、有代表性的预览，例如关键形状、布局轮廓或品牌化加载视觉。它无需像素级精确，只需在视觉上有代表性，让用户立即看到有意义的内容。它将以极小尺寸显示，因此鲜艳背景上的简单图形即可。
将其作为 template 标签加入源 HTML：
<template id="__bundler_thumbnail" data-bg-color="#0a5e3e"> <svg viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg"> <!-- Simplified icon --> </svg> </template>
将 data-bg-color 设置为页面背景色；SVG 应使用 viewBox 以实现正确的等比适配缩放；保持简单，它只是加载占位符而非完整复现；使用设计的实际颜色，使过渡显得自然。打包器会提取该内容并在解包资源时全屏显示（按背景色等比适配），随后替换为真实页面。当 JavaScript 被禁用时，它也会作为永久回退内容保持可见。
第 4 步：运行打包器
如果第 1-3 步做了修改，先保存修改后的 HTML 文件。然后（或无需修改时）调用：
super_inline_html({ input_path: "<path-to-html>", output_path: "My Deck.html" })
为输出文件取一个友好的名称。
第 5 步：验证（仅内部检查）
先阅读工具结果——如果有资源无法解析，super_inline_html 会在输出中直接列出（"N asset(s) could not be bundled: - asset not found: ./foo.png"）。这是权威的缺失列表；修复这些引用并在打开任何内容前重新运行。
然后用 show_html 打开打包输出以检查是否正常工作——这是供自身使用的私有验证步骤，而非交付方式。检查 get_webview_logs 中的运行时错误（JS 异常、解码失败）。如有问题，修复源文件并重新运行。
第 6 步：交付下载（强制）
必须使用 present_fs_item_for_download 直接指向内联后的 HTML 输出交付最终文件。这是交付独立导出的唯一正确方式。不要用 show_html / show_to_user 作为交付步骤——它们是预览工具而非下载工具，用户无法从中保存文件。不要询问用户是否要下载，直接调用 present_fs_item_for_download。若跳过此步骤，用户将无法获得文件。此步骤不可省略。
适用场景
需要把网页应用（如演示文稿、单页应用、设计稿）打包为一个可离线分发、无需外部依赖的 HTML 文件时使用。
限制
打包器只能发现 HTML 属性中直接引用的资源，无法自动发现代码字符串中的资源，需手动标注；缺少缩略图模板会导致打包被拒绝；使用 Anthropic API 的项目无法独立运行。