用途
store-screenshots-panorama 用于把原始应用截图制作成一套成品 App Store 截图。它的目标是让整套截图在视觉上读起来像同一个表面:品牌色渐变与白色(或深色主导的暗色主题)作为背景,跨越多张截图连续流动,形成一幅全景。布局测量自某大型市场类应用的截图集,3D 对象与主视觉来自应用自身内容。
主要能力
- 生成 iPhone 6.9 英寸(1320×2868)与 6.3 英寸(1206×2622)两套设备截图。
- 在提供 Duo 原始截图时,生成 Duo 外屏(1398×2034)与内屏(2007×2853)截图。
- 同时支持浅色与深色主题;用户指定其一则只生成该主题。
- 提供全景 HTML 模板,内含设备边框(iPhone、Duo 外屏、Duo 内屏)、标题、裁剪样式(弹出卡片、聚光灯、边框、标签)、调暗层、蓬松 3D 对象(.obj:月牙、星星、闪光、气泡、播放、音符、心形、球体或自定义路径)以及主视觉对象。
- 提供渲染脚本,把全景图切片为 PNG,并输出尺寸、比例、alpha 通道、页面错误、对比度与裁剪等警告。
- 提供网格脚本,在原始截图上绘制带标签的像素网格与试选框,用于测量裁剪区域。
使用方式
需要 Node 18+ 以及 Chrome(或 Chromium、Edge、Brave);若未找到浏览器,可设置 CHROME_PATH。标题字体在 macOS 上为 SF Pro Display,其他平台为 Inter(Google Fonts)。
默认输入:iPhone 原始截图放在 raw/(1206×2622 或更大);Duo 原始截图放在 raw-duo-outer/(外屏)与 raw-duo-inner/(内屏),文件名与顺序需一致,缺少则不生成 Duo 套装。输出文件夹默认为 out/。
输出路径为 <out>/<lang>/<theme>/<device>/01.png … NN.png,其中 theme 为 light 或 dark,device 为 iphone-6.9、iphone-6.3、duo-outer 或 duo-inner。源 HTML 文件与预览保留在 <out>/.src/ 中,便于用户修改文案后重新渲染。
渲染命令示例:
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。
网格测量命令示例:
node <skill>/scripts/grid.mjs raw/02.png --out <png> [--box x,y,w,h]
工作流程大致为:检查原始截图、选取强调色并推导调色板、检查 Duo 文件夹、在脑中规划套装顺序、用网格脚本测量裁剪、构建 iPhone 全景、构建 Duo 全景(如有)、按主题与设备渲染、查看预览并修复、最后交付。
适用场景
适用于需要为 App Store 制作成套截图、并希望多张截图在视觉上连续统一的开发者或设计者。也适用于用户提供另一应用的商店截图作为参考时,按参考集的布局与风格重新测量并生成。
限制
- UI 必须保持像素级精确:原始截图及其裁剪是普通图像层,不得重绘、用 AI 重新生成、翻译或修改屏幕上的任何文字。
- 卡片只能通过 data-crop 从原始文件裁剪。
- 每个设备必须使用其自身的原始截图;不得把 iPhone 截图放入 Duo 边框。
- 调暗是独立图层,屏幕像素本身不变。
- 装饰必须来自应用上下文,不得借用购物类套装的促销徽章、缎带、折扣语言或随机的加号与心形。
- AI 或 3D 生成仅用于对象与主视觉符号,绝不能包含手机或 UI。
- 未经验证的硬件不绘制:Duo 边框没有摄像头、铰链或按钮。
- 不得使用其他品牌的标志或名称。
- 优越性声明(如“最好”“第一”)仅在提供来源时使用,否则写利益点而非声明。
- 状态栏保持原始截图中的样子。
- 若原始截图宽度小于 1206px,需向用户索取更大的原图。
- 若输出文件夹已有其他套装文件,不得触碰;如有冲突需另选子文件夹并说明。
暂未提供
关于收费、价格、平台支持范围、具体效果指标等信息,资料中暂未提供。