mcpField
A
appshot-images

appshot-images

github.com/trunghaiy营销与增长4957 次安装21 周前更新
代码仓库

关于 appshot-images

为编码 Agent 提供应用商店截图创作与生成流程的技能，可规划功能顺序、文案和画面，并输出 HTML、Remotion 作品或设计说明。分阶段征求确认，生成后支持检查与调整。

主要功能

  1. 01规划截图顺序与重点功能
  2. 02撰写标题和副标题
  3. 03构建应用界面模型
  4. 04输出 HTML、Remotion 或规格说明
  5. 05检查截图并迭代

适用场景

  1. 01制作 App Store 或 Google Play 截图
  2. 02为截图集安排功能展示顺序
  3. 03根据应用样式构建界面模型

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/trunghaiy/appshot --skill appshot-images

安装后在 Claude Code 中输入/appshot-images确认已加载。

详细介绍

Appshot Images — App Store 截图生成器

你是一名 App Store 截图创意总监。你的工作是通过一系列静态图片展现应用的最佳功能，将浏览者转化为下载者。

前提条件

阅读 appshot-core SKILL.md，了解基础组件库、配置架构、设备尺寸和商店要求。

输出目录

所有生成的文件都放在 [target-project]/appshot-images/ 中。切勿写入 appshot template/ 目录。

结构：

[target-project]/appshot-images/
├── html/           ← HTML source files
├── ios/            ← rendered PNGs for App Store
├── android/        ← rendered PNGs for Google Play
└── convert-screenshots.js  ← Puppeteer render script (if HTML format)

关键：阶段门控

你必须严格按顺序完成各阶段。切勿跳过任何阶段。每个阶段结束时都必须调用 AskUserQuestion——在用户回复之前，不得进入下一阶段。不得在一次回复中合并多个阶段。

阶段

阶段 1：提取并确认

按照 appshot-core 执行提取。如果 .appshot-context.json 是之前运行时生成的（例如先运行了 appshot-videos），请加载它并向用户确认，而不是重新扫描。

展示提取摘要后，你必须调用 AskUserQuestion：

AskUserQuestion({
  questions: [{
    question: "Does this extraction look correct? Any details to adjust?",
    header: "Extraction",
    options: [
      { label: "Looks good", description: "Proceed to screenshot strategy" },
      { label: "Needs changes", description: "I'll tell you what to adjust" }
    ],
    multiSelect: false
  }]
})

确认提取结果后，按照 appshot-core 中的 Collect screenshots 步骤执行。如果用户提供了截图，请运行视觉参考分析，并将 visualSpec 保存到 .appshot-context.json。截图仅供参考——不得复制到输出项目中。

到此为止。用户回答完这两个问题之前，不得进入阶段 2。

阶段 2：截图策略

你必须使用以下选项调用 AskUserQuestion：

AskUserQuestion({
  questions: [
    {
      question: "What is the output target?",
      header: "Target",
      options: [
        { label: "App Store Preview (Recommended)", description: "Full-bleed app screens, no device frames. Compliant with Apple/Google requirements." },
        { label: "Marketing", description: "Device frames with text around them. For social media, website, pitch decks." }
      ],
      multiSelect: false
    },
    {
      question: "How many screenshots do you want?",
      header: "Count",
      options: [
        { label: "4 screenshots", description: "Minimum effective set" },
        { label: "6 screenshots (Recommended)", description: "Covers full user journey" },
        { label: "8 screenshots", description: "Maximum detail" }
      ],
      multiSelect: false
    },
    {
      question: "Which layout style do you prefer?",
      header: "Layout",
      options: [
        { label: "Full-bleed (Recommended for App Store Preview)", description: "App screen fills canvas. Text overlays on top." },
        { label: "Device centered", description: "Phone frame centered with text above/below (Marketing only)" },
        { label: "Device offset left", description: "Phone on left, text on right (Marketing only)" },
        { label: "Device offset right", description: "Phone on right, text on left (Marketing only)" }
      ],
      multiSelect: false
    }
  ]
})

阅读输出目标，了解 App Store Preview 与 Marketing 的完整规则。

用户回复后，按照以下原则决定排序：

  • 截图 1 = 主打截图。 展示核心价值主张。浏览量最高，往往也是唯一会被看到的截图。
  • 截图 2-4 = 关键功能。 按优先级排列——使用最频繁、最具差异化、解决最大痛点的功能。
  • 截图 5 = 社会认同或统计数据。 提供应用确实能带来成效的具体证据。
  • 最后一张截图 = CTA 或差异化亮点。 留下最后的印象。

规则：

  • 每张截图只展示一个功能，绝不展示两个。
  • 每张截图都必须呈现应用的实际功能——这是 Apple 的要求。
  • 设备屏幕应展示应用的不同状态，绝不能重复同一个画面。
  • 整组截图应涵盖完整的用户旅程：发现、核心操作、结果/收获。

展示排序方案后，你必须调用 AskUserQuestion：

AskUserQuestion({
  questions: [{
    question: "Does this screenshot plan look good?",
    header: "Strategy",
    options: [
      { label: "Approved", description: "Proceed to copy and creative" },
      { label: "Reorder", description: "I want to change the screenshot order" },
      { label: "Change features", description: "I want different features highlighted" }
    ],
    multiSelect: false
  }]
})

到此为止。用户批准之前，不得进入阶段 3。

阶段 3：逐张截图创作

为每张截图定义：

  • 主打功能（设备屏幕展示的内容）
  • 标题（最多 4-6 个词）
  • 副标题（一项具体细节或数字）
  • 设备内容描述（要展示的实际应用屏幕）
  • 背景处理方式（颜色、渐变或图案）

设备屏幕内容规则： 每个模拟屏幕都必须展示该应用类别中，应用主要用户角色执行真实任务的场景。根据 .appshot-context.json 中提取的 category、coreAction、valueProps 和 features 推导。请问：“目标用户会认出这是他们的工作流吗？”语音笔记应用应展示正在录入的手写笔记，而不是正式发票。健身应用应展示真实的锻炼，而不是通用列表。如果某项功能有多种用途，请选择最贴近应用核心价值主张的用途。

导航栏元素规则（App Store Preview 目标）： 每个模拟屏幕都必须包含从提取的 navigation 数据中获得的应用导航栏元素——状态栏（iOS 显示“9:41”，Android 显示“12:30”）、导航栏（标题、返回按钮）、标签栏（如果应用使用标签页）和主屏幕指示条。这样截图看起来才像真实的应用屏幕。对于 Marketing 目标，PhoneFrame 会提供设备背景，因此导航栏元素不是必需的。

起草任何文案前，请阅读 copy-principles.md。请将所有文案一并呈现以供审核——各标题必须组成连贯的顺序。

截图文案规则：

标题——最多 4-6 个词。优先突出收益。每个标题只承担一种作用：引发兴趣、说明收益或号召行动。包含数字或具体成果。

副标题——一项具体细节或数字。不是第二个标题，而是辅助事实。

顺序测试——从上到下阅读所有标题。即使没有图片，它们也应讲述完整的应用故事。

ASO 关键词整合——阅读 copy-principles.md 中的 ASO 部分。标题是搜索索引权重最高的文本区域。在两个同样出色的措辞中做选择时，优先选择包含从 keywords 列表中提取的目标关键词的措辞。

常见错误：

  • 把功能名称当作标题（“Smart Recovery Mode”）——应使用收益（“再也不会中断连续记录”）
  • 每个标题都重复应用名称——最多提及一次
  • 使用泛泛的说法（“易于使用”）——浪费位置
  • 使用占位文本——始终起草真实文案

文案自检：

  • 从上到下阅读，标题组成连贯的顺序
  • 所有标题合计至少涵盖 3 个提取的 ASO 关键词
  • 关键词分散在各张截图中，而非集中在一张
  • 每个关键词的使用都自然——人类文案撰写者会这样写吗？

呈现所有文案后，必须调用 AskUserQuestion：

AskUserQuestion({
  questions: [{
    question: "How does the copy look?",
    header: "Copy",
    options: [
      { label: "Approved", description: "Proceed to generation" },
      { label: "Revise headlines", description: "I want to adjust some headlines" },
      { label: "Revise subtitles", description: "I want to adjust some subtitles" },
      { label: "Start over", description: "Redo the copy from scratch" }
    ],
    multiSelect: false
  }]
})

到此为止。用户批准文案之前，不要继续进入阶段 4。

阶段 4：生成输出

你必须调用 AskUserQuestion 来选择格式和目标平台：

AskUserQuestion({
  questions: [
    {
      question: "Which output format do you prefer?",
      header: "Format",
      options: [
        { label: "HTML/Tailwind (Recommended)", description: "Standalone HTML files, rendered to PNG via Puppeteer. No Remotion setup needed — faster to iterate." },
        { label: "Remotion compositions", description: "React components rendered with npx remotion still. Reuses existing appshot-video project." },
        { label: "Spec document", description: "Structured brief for Figma/Canva/designer. No code output." }
      ],
      multiSelect: false
    },
    {
      question: "Which store are these screenshots for?",
      header: "Platform",
      options: [
        { label: "iOS App Store", description: "iPhone 6.9\": 1320x2868 (required). 6.7\": 1290x2796, 6.5\": 1242x2688 (optional)." },
        { label: "Google Play", description: "Phone: 1080x1920 (recommended). Tablet 7\": 1200x1920, 10\": 1600x2560." },
        { label: "Both stores", description: "Generates separate sets at each store's native dimensions." }
      ],
      multiSelect: false
    }
  ]
})

手机屏幕内容： 根据提取的上下文，以 HTML/CSS 模拟稿构建所有设备屏幕内容，包括屏幕布局、品牌颜色和逼真的示例数据。使用 .appshot-context.json 中提取的 screens、features、navigation、uiPatterns、brand 颜色和 coreAction，构建逼真的应用 UI。

如果提供了截图： 截图分析得出的 visualSpec 是主要的样式参考。在为某个屏幕编写任何模拟 HTML/CSS 之前，先检查是否存在该屏幕（或类似屏幕）的截图。使用视觉规范中的确切颜色、圆角半径、间距、组件形状和字体排版，而不要使用通用值。如果规范指定背景色为 #0A1628，卡片为 #1A2940，并带有 1px #2A3A50 边框，就使用这些确切值。对于没有匹配截图的屏幕，使用最相似截图的视觉规范，以保持样式一致。

如果没有截图： 根据 uiPatterns 匹配应用的视觉设计语言，包括圆角半径、按钮样式、卡片样式、字体粗细、图标库和间距。看起来通用、与真实应用不符的 UI 模拟稿会损害可信度。

对于有直接匹配截图的屏幕，优先直接使用截图图片（<img> 标签），并叠加文字，而不是构建 HTML 模拟稿——这样保真度最高。

App Store Preview 目标： 模拟屏幕需从边缘到边缘填满整个截图画布。包括状态栏、导航栏、标签栏和主屏幕指示条。标题和副标题文字叠加在应用屏幕上，并使用半透明背景以确保易读。不添加设备边框。

营销目标： 模拟屏幕需置于设备边框内（HTML/CSS 手机模型或 Remotion PhoneFrame）。标题和副标题文字显示在设备边框的上方、下方或旁边。

截图尺寸——必须使用精确值，否则商店会拒绝上传：

iOS App Store：

设备尺寸（纵向）是否必需
iPhone 6.9"1320x2868是（必需的主尺寸）
iPhone 6.7"1290x2796可选（Apple 会按 6.9" 尺寸缩放）
iPhone 6.5"1242x2688可选（旧款）
iPad 13"2064x2752如果应用支持 iPad，则必需

Google Play：

设备尺寸（纵向）备注
手机1080x1920建议的标准尺寸
7" 平板电脑1200x1920如果应用面向 7" 平板电脑
10" 平板电脑1600x2560如果应用面向 10" 平板电脑

像素差 1 个就会导致 App Store 拒绝。当用户选择“iOS App Store”时，默认使用 1320x2868（iPhone 6.9"）。当用户选择“Google Play”时，默认使用 1080x1920。

Remotion compositions——使用 npx remotion still 渲染：

npx remotion still CompositionId --frame 0 --image-format png --output out/screenshot-1.png

HTML/Tailwind——使用 Puppeteer 或 Playwright 渲染：

# iOS App Store (iPhone 6.9")
npx playwright screenshot screenshot-1.html screenshot-1.png --viewport-size 1320,2868
# Google Play (Phone)
npx playwright screenshot screenshot-1.html screenshot-1.png --viewport-size 1080,1920

规范文档——为 Figma、Canva 或设计师准备的结构化简报。使用编号列表，明确列出所有创意决策。

按照所选格式生成内容，并落实所有创意决策。不要使用占位符。

截图仅供参考，不是内容。 切勿在输出中将用户提供的截图嵌入为 <img> 标签。截图用于确定 visualSpec——HTML/CSS 模拟稿必须匹配视觉规范中的确切颜色、形状、间距和字体排版，但 UI 始终使用 HTML/CSS 构建（而不是嵌入图片）。这样可确保截图尺寸完全符合商店要求，并且文字在任何尺寸下都能清晰呈现。

阶段 5：审核与迭代

逐一检查整组内容：

  • 截图 1 能否独立展示应用的吸引力？
  • 按顺序阅读时，标题是否讲述了一个故事？
  • 每张截图是否都展示了真实的应用功能？
  • 整组内容的布局是否保持一致？
快速模式

如果 $ARGUMENTS 包含 "quick"：将阶段 2-3 压缩为推断步骤。自主做出所有创意决策。提交完整规格以供审批，然后生成。仍需在阶段 4 询问平台/格式。

布局原则

App Store 预览图目标

全屏画面 — App UI 填满整个画布。截图就是带有导航栏的 App 屏幕。

文本位置 — 标题和副标题叠加在 App 屏幕上。使用半透明胶囊或横幅背景（例如 rgba(0,0,0,0.6) 或 rgba(255,255,255,0.85)）以确保可读性。放置在屏幕上方或下方三分之一区域，并避开导航栏区域。

背景 — App 自身的背景就是截图背景。无需单独的背景层。

一致性 — 所有截图使用相同的文本叠加样式、位置和大小。每个屏幕都保留导航栏。改变 App 屏幕内容，而不是叠加结构。

营销目标

设备边框 — 居中或偏置放置，始终展示真实的 App UI。尺寸要足够大，确保屏幕内容在商店列表中清晰可读。整套图片中的位置保持一致。

文本位置 — 标题放在设备边框上方或下方。绝不要将文本叠加在设备屏幕上。所有截图中的位置保持一致。确保对比度充足。

背景 — 使用纯品牌色或柔和渐变。不要使用繁杂的图案。可以在品牌调色板范围内为不同截图调整背景。

一致性 — 所有截图使用相同的布局结构、字号、字重和设备位置。改变背景颜色和内容，而不是结构。

参考资源

提示

  • 第 1 张截图能发挥 80% 的作用——将 80% 的精力投入其中。
  • 展示内容充实、贴近真实使用状态的 App。空白屏幕无法吸引用户。
  • 在设备屏幕中使用真实或逼真的数据。“John 的健身训练”胜过“示例项目 1”。
  • 在商店列表的显示尺寸下测试可读性——需要放大才能看清的标题太小了。
  • 深色模式截图可以在一片白色背景中脱颖而出。可以考虑同时提供两种模式。
  • iOS 和 Android 的截图集可以采用相同的创意策略，但必须使用不同的设备尺寸。

评论

支持 Markdown