商店截图 — 全景

根据原始应用截图生成 App Store 截图集，所有图像如同一个连续的表面。布局参考自一个大型市场应用的截图集；3D 对象和英雄图像来自应用自身的内容。详细说明见 references/style.md。在开始第一套截图前，请从头到尾阅读该文件：模板无法决定的决策（颜色、曲线、哪些部分前置、哪些符号变为 3D、Duo 布局）都来自那里。

用户想要的是结果，而不是过程。不要编写计划、规范或测量文件，也不要停下来请求批准。自行做出决定，生成截图集，检查它们，然后交付。只有当输入确实缺失且没有合理的默认值时，才进行询问——例如，如果原始截图宽度小于 1206px，请求提供更大的原始图像。

核心规则

UI 保持像素级精确。 原始截图及其裁剪部分都是普通的图像层。不要重新绘制、用 AI 重新生成、翻译或更改屏幕上的任何文本。卡片只能从原始文件通过 data-crop 裁剪。商店截图必须展示真实的应用；虚构的 UI 会损害信任和 App Review 的通过。
每个设备显示其自身的原始截图。 在 iPhone Duo 上，标签栏和状态栏位于侧面，分屏视图在内屏打开。将 iPhone 截图放在 Duo 框架中会错误地展示应用；不要这样做。如果没有 Duo 截图，则生成 iPhone 截图集，并告知用户需要捕获哪些内容以用于 Duo（参见 style.md §10）。
变暗是单独的图层。 屏幕唯一应用的是 .phone.dim 图层；像素本身不变。
装饰来自上下文。 3D 对象重复应用的主题。不要借用购物截图集中的活动徽章、丝带、折扣用语或随机的加号和爱心；它们会让每个应用看起来像商店广告。
AI 或 3D 生成 仅用于对象和英雄符号，且绝不能包含手机或 UI。
未经验证的硬件不绘制。 Duo 框架没有摄像头、铰链或按钮；它们的位置未经验证。
没有其他品牌 的标志或名称。
优越性声明（“最佳”、“第一名”）必须附有来源。没有来源时，写出优势，而非声明。
状态栏 保持原始截图中的原样。

输入和默认值

输入	默认值
iPhone 原始截图	`raw/`（1206×2622 或更大），在两个主题下均显示。或者 `raw-light/` 和 `raw-dark/`：应用在浅色和深色模式下的截图，采用相同的文件名和尺寸；每个主题随后显示其对应的截图（参见 `style.md` §9）。
Duo 原始截图	`raw-duo-outer/`（外屏）和 `raw-duo-inner/`（内屏），顺序和文件名相同；按外观分为 `raw-duo-outer-light/`、`raw-duo-outer-dark/` 等。如果没有，则不生成 Duo 截图集。
输出文件夹	`out/`
设备尺寸	iPhone 6.9 英寸（1320×2868）和 6.3 英寸（1206×2622）：两者都需要（参见 `style.md` §4）。如果有 Duo 截图，则包括 Duo 外屏（1398×2034）和内屏（2007×2853）。
语言	原始截图的语言。标题按语言编写；裁剪根据该语言的截图进行测量。
主题	`both`：浅色和深色。如果用户指定一个，则仅生成该主题。
颜色	从原始截图中推导（参见 `style.md` §1、§9）
信息和 3D 符号	从原始截图中推导（参见 `style.md` §6、§8）

输出：<out>/<lang>/<theme>/<device>/01.png … NN.png。主题为 light 或 dark；设备为 iphone-6.9、iphone-6.3、duo-outer 或 duo-inner。源 HTML 文件和预览图保留在 <out>/.src/ 中；不要删除它们，以便用户可以更改文案并重新渲染。如果输出文件夹中已包含另一套截图的文件，不要触碰它们；如果发生冲突，则选择一个新的子文件夹并告知用户。

文件

references/style.md：颜色角色、背景、标题、设备、高亮技术、上下文相关的 3D 对象、英雄、文案语气、深色主题、iPhone Duo。
assets/panorama.html：模板。设备框架（iPhone、Duo 外屏、Duo 内屏）、标题、裁剪（弹出卡片、聚光、框架、芯片）、变暗、蓬松的 3D 对象（.obj：新月、星星、火花、气泡、播放、音符、心形、球体，或您自己的路径）、英雄对象以及按主题划分的原始文件夹（RAW）均已准备就绪；布局测量是固定的。复制它，并仅编辑调色板、背景形状、图像和 RAW。
scripts/render.mjs：将全景图切割为 PNG。 node <skill>/scripts/render.mjs <panorama.html> --out <dir> --theme light|dark --device iphone|duo-outer|duo-inner [--size WxH] [--preview <png>] [--only 2,5] [--no-slices]。每个设备的默认尺寸是 App Store Connect 接受的尺寸；对于 iPhone，默认值为 6.9 英寸，如需 6.3 英寸，请传递 --size 1206x2622。其 JSON 输出的 warnings 字段列出了尺寸、比例和 Alpha 通道问题、页面错误以及对比度和裁剪警告（WARN:）。
scripts/grid.mjs：在原始截图上绘制带标签的像素网格和试验框，用于测量裁剪。 node <skill>/scripts/grid.mjs raw/02.png --out <png> [--box x,y,w,h]。凭肉眼猜测的裁剪在缩放后会出现偏移，因此请在网格上测量每个裁剪。

需要 Node 18+ 和 Chrome（或 Chromium、Edge、Brave）；如果未找到，请设置 CHROME_PATH。标题字体在 macOS 上为 SF Pro Display，在其他平台上为 Inter（Google Fonts）。

工作流程

检查原始截图。 检查每个文件的像素尺寸、每个屏幕的用途以及上面的文本。记录应用的主题和符号：图标、标签图标、屏幕上的插图。3D 对象和英雄符号从这些中选取。选取强调色（A）：按钮的颜色、选中的标签或 Logo。按照 style.md §1 中的方法从 A 推导调色板。要采样颜色，使用 magick <png> -format "%[hex:p{x,y}]" info: 或网格图像。检查 Duo 文件夹是否存在且尺寸正确（style.md §10）。检查哪些原始文件夹存在，并选择每个主题的文件夹（style.md §9）。如果存在浅色和深色文件夹，请检查它们是否包含相同文件名和像素尺寸的文件，并显示相同的状态（内容、滚动位置、时间）。
在心中规划截图集；不要写下来。 顺序：英雄，然后按价值排序的屏幕。对于每张图像，决定：标题、标题区域的颜色（A 或第二背景，按 2-3 张一组）、主要高亮技术以及要裁剪的部分。能够证明该屏幕重点的部分就是主要高亮。然后将 3D 对象分布在接缝处。Duo 截图集讲述相同的故事：相同的顺序、标题、调色板和符号。
测量裁剪。 为每个部分运行 grid.mjs，查看图像，使用 --box 尝试框选，然后再次查看。框选应该紧贴元素并留有一点空间，不要切割文本，也不要包含相邻的 UI。同样测量卡片的圆角半径（data-r）。分别从 Duo 的原始文件中测量 Duo 的裁剪。在浅色截图上测量。如果存在深色文件夹，请在深色截图上尝试相同的框选（grid.mjs raw-dark/02.png --box …）：裁剪是共享的，因此它们必须在两种主题下都紧贴相同的元素。
构建 iPhone 全景图。 将 assets/panorama.html 复制到 <out>/.src/panorama.html：
- 在 :root 中更改调色板。
- 在脚本中设置 RAW：如果使用两个文件夹，则设置为 { light: 'raw-light', dark: 'raw-dark' }；如果使用一个文件夹，则设置为 { light: 'raw', dark: 'raw' }。所有路径都使用浅色文件夹编写；深色渲染会将其替换。
- 为每张图像编写一个 <section class="shot">。为裁剪提供 data-raw；路径相对于 HTML 所在的 .src 文件夹（当输出为 out/ 时，使用 ../../raw/…；对于 out/x/，使用 ../../../raw/…）。模板中的裁剪和颜色值仅为示例；请为此应用测量所有值。
- 在 svg.bg 中以全景坐标绘制背景形状：首先决定标题区域的颜色序列，然后根据颜色序列安排形状的路径。
- 将 3D 对象作为 .pano 的直接子元素放置在接缝处。将英雄对象放在第一个 section 中。
- 删除示例 section 和对象。
构建 Duo 全景图（如果有 Duo 截图）。将 iPhone 全景图复制到 .src/panorama-duo-outer.html 和 .src/panorama-duo-inner.html，并按照 style.md §10 进行调整：相同的标题、调色板和符号；新的裁剪；卡片、对象和背景形状根据设计高度重新布局；RAW 设置为 Duo 文件夹（例如 { light: 'raw-duo-outer-light', dark: 'raw-duo-outer-dark' }）。

渲染。 每个主题和设备运行一次（对于深色，使用 --theme dark 和 dark）：

R=<skill>/scripts/render.mjs; S=<out>/.src; O=<out>/<lang>/light
node $R $S/panorama.html          --theme light --device iphone    --out $O/iphone-6.9 --preview $S/preview-light.png
node $R $S/panorama.html          --theme light --device iphone    --out $O/iphone-6.3 --size 1206x2622
node $R $S/panorama-duo-outer.html --theme light --device duo-outer --out $O/duo-outer --preview $S/preview-light-duo-outer.png
node $R $S/panorama-duo-inner.html --theme light --device duo-inner --out $O/duo-inner --preview $S/preview-light-duo-inner.png

修复所有警告；对于对比度警告，调整调色板。每张图像都是独立的 Chrome 运行（约 10 秒）。修复时，仅使用 --only 2,5 渲染更改的图像，或使用 --no-slices --preview … 仅渲染预览；在交付前从头开始渲染所有内容。

检查并修复。 首先查看预览图，然后查看每张图像，并对照清单检查。修复后重新渲染。不要交付您未查看过的图像：偏移的裁剪、标题后面的曲线或覆盖卡片的对象只会在图像中显现。6.3 英寸的截图集是 6.9 英寸截图集的缩小版；查看一个即可，但请检查两者的文件数量和尺寸。
交付。 简要说明文件夹、设备截图集、图像数量、每张图像的标题以及每个主题使用的原始文件夹。如果深色截图显示了不同的状态，请说明需要重新截取的屏幕。如果没有生成 Duo 截图集，请说明原因以及需要捕获的内容。提到更改文案只需编辑 .src/ 中的 HTML 并运行第 6 步中的命令即可。

如果提供了参考截图集

如果用户提供了另一个应用的商店截图作为参考，请将 style.md 中的布局值替换为该截图集的测量值：

逐个查看图像，然后并排查看，并以全分辨率进行测量：背景和连续性、标题、设备、高亮技术、装饰、特殊图像、节奏和语气。
不要添加参考集中没有的内容。
如果参考集的宽高比与输出的宽高比不同，则相对于宽度进行测量传递。将顶部元素固定到顶部，底部被裁切的元素固定到底部。
仅从参考集中获取样式和布局。切勿复制其 Logo、品牌名称、吉祥物、照片或文本。同样将其装饰转化为应用自身的上下文。
也不要为测量值编写文件。

检查清单

每个主题和设备的 warnings 是否都为空？每个文件是否尺寸正确且没有 Alpha 通道？每个设备截图集的图像数量是否相同？
在预览图中，背景形状和接缝对象是否在每处接缝中连续？
标题区域（y 0–650）中是否有曲线？标题颜色是否与其背景匹配，并且是否按 2-3 张一组变化？
每张图像中的标题是否大小相同？除英雄外，是否有任何标题超过 2 行？
每张图像中的设备是否在相同位置？UI 的任何重要部分是否位于圆角或灵动岛下方？
每个裁剪是否准确显示应有的内容？是否有任何被截断的文本，或边缘处有相邻 UI 的细条？卡片是否清晰？
弹出卡片的边缘是否将变暗屏幕下方的一行文本切成了两半？文本是否透过卡片网格的缝隙显示出来？
如果英雄对象延伸到图像 2 中，它是否接触到那里的卡片或文本？英雄的卡片是否塞入边框下方，还是看起来像在溶解？
3D 对象是否来自应用的主题？它们是否覆盖了标题、卡片或重要的 UI 文本？每张图像最多 2 个对象？
英雄上的符号是否可识别？卡片是位于符号内部还是前面？
深色主题是否以深色为主（没有大面积的平坦 A 区域；A 仅出现在标题、对象和框架中）？设备边框、卡片和对象是否与背景形成对比？两个主题的布局是否相同？
如果使用深色模式截图：深色截图集是否在设备内和每个裁剪中都显示深色 UI，浅色截图集是否显示浅色 UI？每个共享的裁剪是否在两种主题下都显示相同的元素？
在 Duo 截图集中，每个屏幕是否都来自 Duo 原始截图？卡片、对象和背景形状是否适合较短的 Duo 画布；设备底部或任何卡片是否被裁切？侧边的标签和状态栏在裁剪后是否正确保留？
特定语言的字符是否正确（例如土耳其语的 İ、ı、ş、ğ）？（<html lang> 必须与语言匹配。）

Store Screenshots Panorama：像一条长卷的 App Store 截图组