app-store-screenshots

App Store 截图

制作能带来安装量的商店截图。**文案优先，设计其次。**每组截图都用 HTML/CSS/JS 制作，逐张并排检查，并按商店尺寸导出。

此技能包含的文件：

• copywriting.md：每张截图该写什么（第 3 步前阅读）
• STYLES.md + styles/NN-*/design.md：18 种经过验证的风格
• assets.md：如何获取图片（优先使用 AI 生成）以及如何使用图片
• build.md：技术方案（画框、倾斜手机、文字适配、3D、玻璃效果、导出）

---

步骤 0：图像生成设置（每次会话一次）

有机素材（手持手机的手、人物、吉祥物、毛皮、食物、产品、风景）均由 AI 生成。按以下顺序寻找服务提供商：

1. Codex 插件（使用用户的 ChatGPT 套餐；Codex 使用 GPT Image 生成图像）。如果存在 codex:codex-rescue 子 Agent 或 /codex:rescue，请使用它（见 assets.md）。如果没有，请告知用户如何安装：

   /plugin marketplace add openai/codex-plugin-cc
   /plugin install codex@openai-codex
   /codex:setup
   

2. API 密钥。 检查是否设置了 OPENAI_API_KEY 或 GEMINI_API_KEY。如果两者均未设置，请向用户索要其中一个。目前的模型（2026 年 10 月）：
   • OpenAI gpt-image-2.5-flare（快速，适合日常使用）和 gpt-image-2.5-sunburst（精度最高；用于基于参考图像的编辑）。支持输出真正透明的 PNG。
   • Google gemini-nano-banana-2.1（Nano Banana 2.1）。最多支持 14 张参考图，提供 1K/2K/4K 分辨率。不支持透明输出：先生成绿色背景，再将其抠除。
   • 模型 ID 经常变化。生成前，请检查服务提供商的模型列表，并使用最新的图像模型。
3. 免费图库照片。 仅在用户提出图库照片需求，或没有图像生成器时使用。

用一行说明将使用哪个服务提供商。

---

步骤 1：需求收集

在一条消息中询问以下内容（已提供的内容可跳过）：

1. 应用截图（必需）：以图像形式提供主要界面。
2. 应用的用途和目标用户，用 1–2 句话说明。
3. 灵感参考（可选）：你喜欢的一组截图。
4. 已有证明材料（可选）：星级评分和评论数量、用户数量、媒体报道、奖项。
5. 要展示的 Logo（可选）：报道过你的媒体、可连接的应用、合作伙伴。
6. 品牌信息：颜色、字体和 Logo（或“使用应用内现有的样式”）。
7. 截图数量（默认 6 张）、商店（App Store / Google Play / 两者）和语言。

---

步骤 2：了解应用

研究截图并列出：

• 核心承诺（用户想要实现的结果）；
• 3–6 个最有力的功能，以用户收益的形式表达；
• 最出色的界面（将作为主视觉）；
• 类别和目标用户（用于指导风格选择）。

---

步骤 3：故事板（文案）。设计前先获得确认。

遵循 copywriting.md。向用户展示一张表格，每张截图占一行，列出：作用、标题、小字说明、展示的应用界面、额外视觉元素、证明材料。

• 第 1 张截图吸引用户，第 2 张解释，第 3 张证明（或展示第二项收益），之后每张各展示一项收益，最后一张建立信任。
• 仅使用用户提供的真实数字。

等待用户确认或修改。

---

步骤 4：选择风格

• 提供了灵感参考： 按照制作 styles/*/design.md 文件时使用的方式，提取其设计系统：测量版块、采样颜色、识别字体、描述布局和装饰。将该风格应用于用户的应用和文案。不要照搬参考内容。
• 未提供灵感参考： 根据类别、目标用户和品牌颜色，从 STYLES.md 中选择最合适的 3 种风格。选择彼此明显不同的 3 种风格，包括主视觉的内容也要有所不同：手机只是其中一种选择。多数风格开篇不会展示手机，而是使用醒目的标题搭配物件、人物，或从应用中提取的 UI 卡片。
• 契合品牌。 只有当应用已有吉祥物或角色，或用户提出要求时，才使用吉祥物或角色。只有当应用与人物相关时，才使用人物。

第 5 步：3 个方向，仅制作截图 1

每个方向仅制作截图 1，达到预览质量，并在同一页面上并排展示。由用户选择一个，或混搭（“用 B 的设计搭配 A 的配色”）。绝不制作 3 套完整内容。

---

第 6 步：素材

遵循 assets.md：

• **应用界面：**手机边框可选；大多数顶级套图会让 UI 占满整个画面。如果用户的截图看起来粗糙或过时，使用 HTML/CSS 重新绘制简洁的 UI（保留相同功能和流程，使用虚构示例数据），不要直接粘贴旧图片。重新绘制只替换屏幕内容：截图周围的设计仍须遵循选定的 design.md（布局、字体、边框和装饰）。绝不要照搬旧截图的视觉风格。
• **AI 生成素材：**手、人物、吉祥物和角色、产品、食物和风景。要求使用透明背景，或使用便于抠除的纯色背景。
• **手持手机：**生成时使用纯绿色屏幕，然后根据屏幕的 4 个角将真实屏幕映射到上面。
• **吉祥物：**生成一次，然后在其他所有姿势中重复使用该图像作为参考。
• **代码绘制：**文字、卡片、药丸形元素、玻璃、涂鸦、图标和简单的 3D 元素（硬币、宝石、Logo 标记）。

---

第 7 步：制作完整套图

遵循 build.md 和选定的 design.md：

• 使用一个 HTML 页面；每张截图都是符合该风格几何布局的面板；
• 按行、按词放置标题，并使用测量后的宽度；
• 将真实应用界面放入边框中；
• 放置 AI 素材，并根据故事板检查。

---

第 8 步：检查，然后导出

• 按照选定风格的保真度检查清单和文案检查清单（copywriting.md §9）进行检查。
• 以缩略图大小（宽约 230 px）查看每张截图：标题是否清晰易读？主体是否明确？
• 使用 scripts/export.js 导出（官方尺寸见 build.md → Export）：
  • App Store：ios-6.9（1320 × 2868）和 ios-6.3（1206 × 2622，必需的尺寸类别）；如果应用支持 iPad，则还需 ipad-13（2064 × 2752）。每种尺寸 1–10 张截图，格式为 PNG/JPEG，不得含 Alpha 通道。
  • Google Play：play-phone（1080 × 1920，9:16），每种设备类型 2–8 张截图，不得含 Alpha 通道；每张截图还需附上替代文本（不超过 140 个字符）、1024 × 500 的宣传图，以及在应用支持平板电脑时提供平板套图（play-tablet，至少 4 张）。Play 套图需采用独立的 9:16 布局，并符合 Play 安全规范（copywriting.md §7）。
• 交付一个预览页面，以一行展示所有截图；另按尺寸创建文件夹，文件命名为 01.png、02.png……；Play 套图还需附上 alt-text.txt。

---

第 9 步：修改

根据用户要求进行修改。确保整套内容中的文案、风格和素材保持一致。每次修改后都重新导出。

---

规则

• 先复制，再设计。 切勿设计未经批准的分镜。
• 只用真实证据。 切勿编造评分、评论、用户数量或媒体报道。
• 生成的人物和物体必须符合分镜描述（姿势、服装、颜色）。不合适就重新生成，别将就。
• 只有真正的 3D 物体才用 3D。 扁平元素就保持扁平。
• 不要为没有吉祥物的应用编造吉祥物。
• 保留品牌色。 配色应取自应用的品牌（图标、主强调色），而不是所选风格；只借鉴风格的布局、字体和装饰。
• 为每张截图选择合适的边框： 无边框（UI 卡片独立呈现）、柔和边框（圆角屏幕、柔和的发光边框、轻柔阴影；不要金属或按钮），或逼真的手机（真实的手机边框 PNG；仅当画面需要实体设备时使用，例如手持或倾斜的主视觉图）。不要默认使用逼真的手机，也不要使用绘制粗劣的“逼真”手机。
• 每个应用都要有自己的字体风格。 为多个应用制作设计时，切勿通过共享辅助函数复用其他应用的标题字体或强调元素（下划线笔触、荧光笔、贴纸）。应根据每个应用的品牌和风格，为其选择字体组合和强调标记。
• 借鉴风格的基因，而非固定布局。 从 design.md 中汲取配色逻辑、字体组合、面板处理、装饰元素和设备处理方式。每次都为用户的应用创作新的构图。
• 风格在于结构，而非颜色。 每种风格都有自己的布局语法（横跨多个面板的全景、剪贴簿、跨越拼接处的玻璃板、搭配倾斜手机的色块、悬浮 UI……）。在同一框架上替换颜色和字体，仍然只算一种风格。为多个应用制作设计套件时，应为每个应用采用结构不同的风格，并展现其标志性特点。
• 风格是指引，不是模板。 选择适合当前应用和信息的元素；不要在不同应用之间重复使用相同形式。
• App Store 截图中不要出现价格。 遵守各应用商店的规则。