store-screenshots-panorama

Store 截图 — panorama

根据原始应用截图制作 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 字段会列出尺寸、比例和透明度问题、页面错误，以及对比度和裁剪警告（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）。

工作流

1. 检查原始截图。 查看每个文件的像素尺寸、每个屏幕的用途以及屏幕上的文字。记录应用的主题和符号：图标、标签页图标、屏幕上的插画。3D 物体和主视觉符号会从中选取。 选定强调色（A）：按钮、选中标签页或 logo 的颜色。按照 style.md §1，以 A 为基础推导调色板。要采样颜色，请使用 magick <png> -format "%[hex:p{x,y}]" info: 或网格图。 检查 Duo 文件夹是否存在，以及尺寸是否正确（style.md §10）。 检查哪些原始文件夹存在，并为每种主题选定文件夹（style.md §9）。如果同时有浅色和深色文件夹，请检查它们是否包含文件名相同、像素尺寸相同且状态相同（内容、滚动位置、时间）的文件。
2. 在脑中规划整组图片；不要写下来。 排序：先放主视觉，再按重要性排列屏幕。对每张图片，确定标题、标题区域的颜色（A 或第二背景色，每组 2–3 张）、主要突出手法以及裁剪部分。最能体现屏幕重点的部分就是主要突出部分。然后将 3D 物体分布在接缝处。Duo 套图讲述相同的故事：顺序、标题、调色板和符号都要一致。
3. 测量裁剪区域。 对每个部分运行 grid.mjs，查看图片，用 --box 尝试框选，然后再次查看。选框应紧贴元素并留出少许空隙，不要截断文字，也不要包含相邻的 UI。还要测量卡片的圆角半径（data-r）。分别从各自的原始文件测量 Duo 裁剪区域。 在浅色截图上测量。如果有深色文件夹，也要在深色截图上尝试相同的选框（grid.mjs raw-dark/02.png --box …）：裁剪区域是共用的，因此必须在两种截图中都紧贴同一元素。
4. 构建 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 的直接子元素放在接缝处。将主视觉物体放在第一个部分中。
   • 删除示例部分和物体。
5. 构建 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' }）。
6. 渲染。 每种主题和设备各运行一次（深色主题使用 --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 …；交付前从头渲染所有内容。
7. 检查并修复。 先查看预览，再逐张查看图片，并按照清单逐项检查。修复后重新渲染。不要交付未检查过的图片：裁剪位置偏移、标题后方的曲线或遮挡卡片的物体，都只能在图片中发现。6.3" 套图是 6.9" 套图缩小后的版本；查看其中一套即可，但要检查两套的文件数量和尺寸。
8. 交付。 简要说明文件夹、设备套图、图片数量、每张图片的标题以及每种主题使用的原始文件夹。如果深色截图显示了不同状态，请列出需要重新截取的屏幕。如果没有制作 Duo 套图，请说明原因以及需要截取哪些内容。说明只需编辑 .src/ 中的 HTML 并运行第 6 步中的命令，即可更改文案。

如果提供了参考套图

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

• 先逐张查看图片，再并排查看，并以原始分辨率进行测量：背景及其连贯性、标题、设备、高亮手法、装饰、特殊图片、节奏和基调。
• 不要添加参考图中没有的内容。
• 如果参考图的宽高比与输出图不同，请按宽度比例换算测量值。将顶部元素固定在顶部，将底部被截断的元素固定在底部。
• 只参考其风格和布局。绝不要复制其徽标、品牌名称、吉祥物、照片或文字。也要将其装饰元素转化为适合该应用的内容。
• 不要为这些测量结果创建文件。

检查清单

• 每种主题和设备的 warnings 是否都为空？每个文件的尺寸是否正确且不含 Alpha 通道？每套设备的图片数量是否相同？
• 在预览中，背景形状和接缝处的元素是否都能跨越每条接缝连贯衔接？
• 标题区域（y 0–650）是否有曲线？标题颜色是否与背景相配，并按 2–3 个一组变化？
• 每张图片中的标题大小是否一致？除主视觉图外，是否有标题超过 2 行？
• 每张图片中的设备位置是否一致？是否有重要的 UI 部分被圆角或灵动岛遮挡？
• 每个裁切区域是否恰好展示了应展示的内容？是否有被截断的文字，或边缘处露出细窄的相邻 UI？卡片是否清晰？
• 浮出卡片的边缘是否将其下方变暗屏幕上的某行文字拦腰截断？卡片网格的空隙中是否透出文字？
• 如果主视觉物体延伸到第 2 张图片，是否触碰到其中的卡片或文字？主视觉卡片是否藏在边框后面，还是看起来正在消融？
• 3D 物体是否取材于应用的主题？它们是否遮挡标题、卡片或重要的 UI 文字？每张图片最多放 2 个物体？
• 主视觉中的符号是否容易辨认？卡片是位于符号内部还是前方？
• 深色主题是否以深色为主（没有大块纯色 A 区域；A 仅用于标题、物体和边框）？设备边框、卡片和物体是否与背景形成对比？两种主题的布局是否相同？
• 对于深色模式截图：深色套图是否在设备画面和每个裁切区域中展示深色 UI，浅色套图是否展示浅色 UI？每个共用的裁切区域在两套图中是否都展示相同元素？
• 对于 Duo 套图，每个屏幕是否都来自 Duo 原始截图？卡片、物体和背景形状是否适合 Duo 的短画布？设备底部或卡片是否被截断？侧边标签和状态栏在裁切后是否仍然完好？
• 各语言特有字符是否正确（例如土耳其语 İ、ı、ş、ğ）？（<html lang> 必须与语言一致。）