app-store-screenshot

app-store-screenshot

核心规则

准确保留原始应用 UI。不要重绘、重新设计样式、翻译、改写、臆造或“改进”截图中的内容。将截图视为源素材，并围绕它进行设计。

绝不要将截图交给图像生成模型处理，再把生成结果当作应用 UI 展示：模型会更改文字、数字和图标，这些改动很容易被忽略。应使用合成的方式。此处的所有操作都会将截图渲染为纯图像图层，仅调整大小，不做其他处理。

工作流程

1. 检查截图。 记录平台、品牌颜色、浅色或深色 UI，以及每个屏幕展示的功能。检查像素尺寸：宽度低于约 1000 px（消息应用中常见的文件尺寸）的截图需要放大，显示效果会发虚。说明这一点并索要原图。同时，使用尺寸足够小、无需放大的设备：device_max_w 不超过源图宽度除以画布宽度（在 1290 px 画布上使用 738 px 的源图时，值为 0.57）。
2. 先选概念，再选颜色，每张截图选一个概念。 询问应用的主题是什么样的，并将设备置于相应场景中：艺术应用使用绘画，字幕应用使用多语言字幕气泡，徒步应用使用步道。接着更进一步，为每张图片设计专属背景，根据该屏幕所展示的内容构建背景，让背景从屏幕边框处延展出去。请参阅“背景”。纯色渐变加图案是备用方案，而非目标。
3. 以应用本身为基础构建主题。 从截图（按钮、高亮部分、图标）中提取 bg、accent 和 accent2。让边框与平台匹配，并选择能让屏幕从背景中凸显出来的边框材质：鲜艳背景上的浅色 UI 配深色边框，深色场景配钛金属或银色边框。
4. 撰写文案。 每张图片配一条标题，2 到 6 个词，优先突出益处，并强调关键词。可选配一句副标题。不要重复截图中已有的文字；对于健康和金融相关内容，宣传用语应保持审慎。第一张图片应传达核心价值主张，因为它往往是搜索结果中唯一展示的图片。使用应用商店商品页所用的语言；如果不确定，请先询问。
5. 使用 scripts/render.mjs（见下文）渲染。将配置、背景和输出文件写入用户的工作目录，绝不要写入技能文件夹。
6. 查看每张输出图片，并逐项检查文末的清单。修复问题并重新渲染，直到全部通过。

渲染

每张图片都是由无头 Chrome 截取的 HTML 页面。CSS 负责提供背景、金属设备边框和真实字体排版。

脚本路径相对于此技能所在目录。

cp <skill-dir>/assets/set.example.json ./set.json    # then edit it
node <skill-dir>/scripts/render.mjs ./set.json

脚本会为每张图片输出 JSON，其中包含 screen_box（截图在画布中的位置）、screenshot_scale、headline_px 和 warnings。配置中的路径可以是绝对路径、以 ~ 开头的路径，也可以是相对于配置文件的路径。

如果标题无法放入预留行数，系统会自动缩小标题，因此当某个标题过长时，各图片的 headline_px 会有所不同。每行尽量控制在约 20 个字符以内，并精简文案，直到整组图片的 headline_px 保持一致。

要求：Node 18 或更高版本，以及基于 Chromium 的浏览器（Chrome、Chromium、Edge 或 Brave；如果无法找到浏览器，请设置 CHROME_PATH）。无需安装任何软件包。如果没有可用的此类浏览器，请告知用户并让其安装；不要改用模型生成图片。

输出为不透明的 RGB PNG，这是两个应用商店都要求的格式（它们会拒绝透明图像）。脚本会检查这一点以及像素尺寸，并在不符合要求时发出警告。

配置参考

顶层：size（默认为 "1290x2796"；Google Play 会拒绝长边超过短边两倍的图片，因此请使用 "1080x1920"）、out_dir、可选的 template、theme、images。

主题键（每个键都可在单张图片条目中覆盖）：

• bg、bg2：基础渐变，从上到下。accent：光晕。accent2：强调词和高亮线条。省略 text、line 时，会根据 bg 派生。
• headline_font（CSS 字体栈）、headline_weight、em_style（normal 或 italic）、font_links（仅在线时使用的 Google Fonts URL）。粗体无衬线字体在繁杂场景上最清晰；衬线字体适合背景平和的编辑类或文化类应用。
• headline_lines、sub_lines：为主标题和副标题预留的空间。在主题中设置一次，即可让每张图片中的设备保持相同的尺寸和位置。出于同样的原因，要么为每张图片都设置 eyebrow（主标题上方的小型大写胶囊标签），要么都不设置。
• device_max_w：屏幕宽度占画布的比例（默认值为 0.73；设为 0.62 到 0.68 可让场景有更多舒展空间）。
• platform（ios 或 android）、frame（black、titanium、silver）、cutout（设为 false 可隐藏灵动岛或摄像头开孔）。
• scene、scene_vars：HTML 场景片段及其单张图片专属变量；请参阅“背景”。
• background_image、background_position（CSS 位置，例如 "94% center"）、scrim（0 到 1，表示将图片着色并向 bg 靠拢的程度）。设置背景图片后，光晕、颗粒和图案会关闭，但颜色仍然重要：bg2 会使主标题后方的区域变暗，并影响文字阴影；bg 则决定默认文字为白色还是近黑色。

图片键：screenshot、out、headline（\n 强制换行，*text* 标记强调词）、sub、eyebrow、pattern，以及任意主题键；其中最实用的是 scene 和 scene_vars，可为图片设置专属背景。

背景

构建背景有三种方式，按推荐顺序排列。

为每张图片基于其截图打造专属背景。 打开截图，列出其中实际包含的内容：图像、图案、仪器或图表，以及颜色。然后构建一个延伸这些元素至设备外部的背景，让手机看起来像是嵌入场景的窗口，而不是贴在渐变背景上的贴纸。黄昏照片上的倒计时界面，可以延伸为带有应用自身装饰元素的日落天空；指南针界面，可以延伸为手机嵌在其中的大型表盘，方位指向目标；同时带有浅色和深色主题的设置界面，则可以延伸为一分为二的画布。无论有多漂亮，在整组图片中重复使用同一个背景都会显得像模板，审核者看到的五张图片也会像是在重复表达同一件事。

将整组图片的统一元素保留在共享主题中：画布尺寸、字体、device_max_w、边框和主标题样式。让场景体现差异。将 device_max_w 设为约 0.66，可留出足够宽的边距来呈现场景。

1. 场景图片。 将照片、艺术作品或插画作为 background_image 传入。图片来源优先顺序：用户自己的品牌图片；与应用内容相符的公有领域图片或自由授权图片（Wikimedia Commons、博物馆开放资源库、Unsplash），并检查许可证、向用户说明来源；仅用于背景的图像生成工具。生成图片时，要求场景中不要包含手机或 UI。选择主标题后方区域较为平和的图片；深色图片的 scrim 设为约 0.05 到 0.15，若主标题对比度不足则调高该值。 2. HTML 场景。 没有合适的图片时，可用 HTML 构建场景。为每张图片在配置文件旁的 scenes/ 文件夹中创建一个片段文件（包含 <style> 块、标记，可选的内联 <svg> 和 <script>），并让每个图片条目指向各自的文件："scene": "scenes/02-compass.html"。scene 是主题键，因此在主题中设置后，所有图片都会使用相同的背景；在单张图片中设置则会覆盖主题设置；建议按图片分别设置。渲染器会将其注入背景层，位于 bg 到 bg2 渐变之上、标题和设备之下。根据应用的主题构建场景：品牌渐变、柔和的径向渐变光效，以及说明文字胶囊、命令芯片流水线、波形、地图等高线、乐谱线或图表线等装饰。以下是同一食谱应用示例集中的三个可用示例，每个示例均基于不同屏幕构建，可供改编：examples/scenes/berries.html（顶部饰有浆果的食谱照片：水果溢出边框，延伸至树莓红色光效上）、examples/scenes/plate.html（照片展示条纹盘子的膳食计划：手机放在盘子上，条纹环绕设备）和 examples/scenes/tracker.html（每日追踪器：屏幕中的周视图条和营养素条形图显示在侧边留白中，并通过 scene_vars 填充）。assets/set.example.json 将这三个场景关联到同一个示例集中。

• 在图片条目中使用 "scene_vars": {"seed": 4, ...} 为片段设置参数（与主题中的任何 scene_vars 合并）；片段通过 window.SCENE 读取这些参数。可用它将截图中的实际值（例如应用显示的方位角）传给场景，也可用它为分散的装饰元素设定随机种子。像示例中那样使用带种子的随机数生成器，确保重新渲染后画面保持一致。
• 根据测量值而非猜测来放置装饰。页面布局完成后会设置 window.LAYOUT，并在 document 上触发 store:layout 事件，其中包含 canvas {w, h}、device 和 screen 边界框 {left, top, right, bottom}，以及以像素为单位的 headerBottom。侧边留白宽度为 LAYOUT.device.left。在该事件处理器中绘制装饰。
• 将装饰放在两侧留白和底边，尺寸应确保完整显示。文字被裁掉一半会显得像错误。标题区域（headerBottom 以上）应保持简洁。
• 装饰应契合主题且抽象。不要在手机周围绘制仿造的应用 UI、通知或评论。
• 装饰应处于次要位置：鲜艳背景上使用低对比度填充，深色背景上使用细的强调色线条。
• 片段可以使用模板中的占位符和 CSS 变量：{{ACCENT}}、{{ACCENT2}}、{{BG}}、{{BG2}}、{{WIDTH}}、{{HEIGHT}}、{{SCREENSHOT}}（当前截图的 URL）、var(--vh) 和 vw 单位。请勿使用 vh 单位。
• 场景可以将截图的模糊或着色副本用作背景光效。滤镜规则仅适用于设备内的截图；该截图必须保持原样。
• 使用已安装的字体系列，或通过 font_links 加载网络字体。
• 如果输出中缺少装饰，请查看 warnings：页面中的 JavaScript 错误会报告在其中。

3. 内置图案。 pattern 可选值为 rings、dots、grid、rays、arcs、diagonal、frames、none。图案绘制在 bg 渐变之上，并带有 accent 光效和颗粒纹理。适合快速生成可靠效果。

自定义模板。 如果配置无法实现所需效果，可复制 assets/template.html、修改 CSS，并将 "template" 指向副本。请遵守两条规则：绝不要在截图 <img> 上添加滤镜、叠加层或色调，也绝不要使用 vh 单位或 innerHeight。无头 Chrome 加载页面时使用的视口高度比实际捕获时更短，因此请使用 var(--vh) 和 var(--canvas-h)。

交付前检查清单

打开渲染后的文件并逐项确认。若有任何一项不符合，请如实报告，不要隐瞒。

• 每张图片的 warnings 均为空。“upscaled”警告表示源文件太小：请告知用户并索取原始文件。
• 整组图片的 screen_box 完全一致。
• 画面框内的文字、数字和图标与源截图一致，且圆角或摄像头开孔没有遮挡任何重要内容。
• 图片以约 300 px 宽度查看时，主标题和副标题仍清晰可读，因为应用商店图库就是以这种尺寸展示图片的。
• 背景装饰不会在单词中间被裁切，也不会喧宾夺主，影响截图。
• 每张图片都有自己的背景，而且背景主题能让人一眼看出与其呈现的屏幕有关。若两张图片的背景可以互换而无人察觉，就说明概念过于通用；请返回第 2 步。
• 场景中的任何元素都不会与主标题冲突：主标题框内没有网格线、星星或装饰元素。
• 输出尺寸符合目标应用商店的要求（脚本会在尺寸或 Alpha 通道不匹配时发出警告）。
• 文件按图库顺序编号，并告知用户配置文件的位置，以便他们编辑文案并重新渲染。

更多指南

• references/visual-directions.md：方向、主标题语气、构图和类别说明（健康、金融、深色模式、效率、教育、创作者工具）。
• references/store-sizes.md：App Store 和 Google Play 的确切尺寸、数量和格式规则。
• examples/：健康、金融和深色模式应用的主标题创意与图片组排序，以及 examples/scenes/ 中的三个 HTML 场景，assets/set.example.json 会将它们渲染为一组图片。