Appshot Images 是 trunghaiy/appshot 项目中的一个技能，用于生成 App Store 和 Google Play 的应用商店截图设计。当用户想要创建商店列表图片、截图样机或推广图形时可以使用它。
用途 该技能以“App Store 截图创意总监”的角色工作，目标是把应用的最佳功能组织成一组静态图片，将浏览者转化为下载者。它适用于制作应用商店列表所需的截图素材。
前置条件 需要阅读 appshot-core 的 SKILL.md，以获取原语库、配置模式、设备尺寸和商店要求。
输出目录 所有生成文件放入 [target-project]/appshot-images/，绝不写入 appshot 模板目录。目录结构包括：html/（HTML 源文件）、ios/（为 App Store 渲染的 PNG）、android/（为 Google Play 渲染的 PNG）、convert-screenshots.js（Puppeteer 渲染脚本，若为 HTML 格式）。
工作流程（阶段门控） 必须严格按顺序完成各阶段，不得跳步。每个阶段以 AskUserQuestion 调用结束，用户回应前不得进入下一阶段，也不得把多个阶段合并到一次回复中。
阶段 1：提取与确认。从 appshot-core 运行提取。若存在上次运行留下的 .appshot-context.json，则加载并向用户确认，而不是重新扫描。展示提取摘要后必须调用 AskUserQuestion 询问提取是否正确。确认后运行收集截图步骤；若用户提供截图，则运行视觉参考分析并把 visualSpec 保存到 .appshot-context.json。截图是参考材料，绝不复制进输出项目。
阶段 2：截图策略。必须调用 AskUserQuestion 询问输出目标（App Store Preview 推荐，或 Marketing）、截图数量（4/6/8 张）、布局风格（全出血、设备居中、设备偏左、设备偏右）。用户回应后，按原则决定顺序：第 1 张为主视觉，展示核心价值主张；第 2-4 张为关键功能；第 5 张为社会证明或数据；最后一张为 CTA 或差异化点。规则包括：每张截图只讲一个功能；每张截图必须展示真实应用功能（Apple 要求）；设备屏幕应展示应用的不同状态，不得重复；整套应覆盖完整用户旅程。展示排序方案后必须再次调用 AskUserQuestion 请求批准。
阶段 3：逐张截图创意。为每张截图定义：主功能（设备屏幕展示什么）、标题（最多 4-6 个词）、副标题（一个具体细节或数字）、设备内容描述、背景处理。设备屏幕内容规则：每个模拟屏幕必须展示应用主要用户角色执行该应用类别的真实任务。导航栏规则（App Store Preview 目标）：每个模拟屏幕必须包含应用的导航栏元素，如状态栏（iOS 为“9:41”，Android 为“12:30”）、导航栏、标签栏和 home 指示器。文案规则：标题最多 4-6 词，利益优先，每张只做一件事；副标题是一个具体细节或数字；序列测试要求所有标题连读能讲完整故事；ASO 关键词整合，标题是搜索索引权重最高的文本面。常见错误包括用功能名当标题、每张都重复应用名、泛泛而谈、使用占位文本。展示所有文案后必须调用 AskUserQuestion 请求批准。
阶段 4：生成输出。必须调用 AskUserQuestion 选择格式（HTML/Tailwind 推荐、Remotion 组合、规格文档）和目标平台（iOS App Store、Google Play、两者）。设备屏幕内容以 HTML/CSS 模拟构建，使用提取的屏幕、功能、导航、uiPatterns、品牌色和 coreAction。若提供了截图，visualSpec 是主要风格参考，使用精确颜色、圆角、间距、组件形状和字体。若无截图，则匹配应用的视觉设计语言。对于有直接截图匹配的屏幕，优先直接使用截图图片加文字叠加。App Store Preview 目标下模拟屏幕全出血填满画布，包含状态栏、导航栏、标签栏和 home 指示器，标题和副标题叠加在应用屏幕之上并带半透明背景。Marketing 目标下模拟屏幕放入设备边框内，文字出现在设备边框上方/下方/旁边。截图尺寸必须使用精确值，否则商店会拒绝上传。iOS App Store：iPhone 6.9 英寸 1320x2868（必需主尺寸）、6.7 英寸 1290x2796（可选）、6.5 英寸 1242x2688（可选）、iPad 13 英寸 2064x2752（若支持 iPad 则必需）。Google Play：手机 1080x1920（推荐标准）、7 英寸平板 1200x1920、10 英寸平板 1600x2560。差一个像素都会导致 App Store 拒绝。Remotion 组合用 npx remotion still 渲染；HTML/Tailwind 用 Puppeteer 或 Playwright 渲染，例如 iOS 用 npx playwright screenshot screenshot-1.html screenshot-1.png --viewport-size 1320,2868，Google Play 用 --viewport-size 1080,1920。规格文档为 Figma、Canva 或设计师提供结构化简报。截图是参考材料而非内容，绝不把用户提供的截图作为 img 标签嵌入输出。
阶段 5：审查与迭代。检查第 1 张截图能否独立推销应用、标题连读是否成故事、每张是否展示真实功能、整套布局是否一致。
快速模式 若 $ARGUMENTS 包含“quick”，则把阶段 2-3 压缩为推断，自主做出所有创意决定，展示完整规格请求批准后生成，阶段 4 仍询问平台/格式。
布局原则 App Store Preview 目标：全出血屏幕，应用 UI 填满整个画布；文字叠加在应用屏幕之上，使用半透明胶囊或横幅背景保证可读性，位置在屏幕顶部或底部三分之一，避开导航栏区域；应用自身背景即截图背景；整套保持相同文字叠加样式、位置和大小，每屏都有导航栏，变化的是应用屏幕内容而非叠加结构。Marketing 目标：设备边框居中或偏移，始终展示真实应用 UI，尺寸足够在商店列表大小下清晰可读，整套位置一致；标题在设备边框上方或下方，绝不叠加在设备屏幕上；背景为纯品牌色或细微渐变，不用复杂图案；整套保持相同布局结构、字号、字重和设备位置，变化的是背景色和内容。
支持资源 原语、尺寸、商店要求见 appshot-core SKILL.md；文案原则见 copy-principles.md。
提示 第 1 张截图承担 80% 的工作，应投入 80% 的精力；展示应用真实、有内容的状态，空屏幕不卖货；使用真实或逼真的数据；在商店列表大小下测试可读性；深色模式截图可在白色背景中脱颖而出，可考虑同时提供；iOS 和 Android 套图可共享同一创意策略，但必须使用不同的设备尺寸。