快速生成专业 iOS App Store 截图：深入解析 app-store-screenshots

多年以前，我没有走独立开发 iOS 的路线，是因为当时搞不定设计，也搞不定后端 api 接口，心心念念要上线 App Store 酷酷的 app 好多年，一直没有去实践。

经过多年的 Java 开发实战，现在突然 AI 又横空出世，以前阻碍我的技术点现在都不是问题了。这两个月又有足够多的自由时间，于是决定重拾旧梦了。今年这一年，打算先上线几款 app 到苹果商店。

开发 iOS 应用，制作 App Store 的宣传截图很是让人头疼，尤其是对设计不好的独立开发人员来说，既要符合苹果的尺寸要求，又要设计得吸引人。

最近发现了 app-store-screenshots 这个开源工具，尝试了一下，效果很不错，可以说我被惊艳到了。

在 iOS 应用上线过程中，App Store 截图是用户第一眼看到的内容，也是提升下载转化率的关键因素。手动设计多分辨率截图既费时又容易出错，而这个开源项目只要通过简单对话了解我们的应用品牌、功能特性和风格偏好后，就能自动搭建 Next.js 项目，设计广告级别的截图，让你快速制作高质量截图。

在浏览器中预览排版效果后，点击即可一键导出苹果审核所需的四类标准分辨率图片。

支持 Claude Code、Cursor 等 40 多个 AI 编程助手，通过 npx skills 命令一键安装即可使用。

本文将从实现原理、安装、使用到实战示例，带你完整了解这个工具。

app-store-screenshots 项目介绍

一、项目简介

app-store-screenshots 是一个基于 Next.js + TypeScript + Tailwind CSS 的自动化截图生成工具，它结合 React 和 HTML-to-Image 技术，可以：

• • 自动生成多分辨率 App Store 截图（6.9"、6.5"、6.1" 等）
• • 根据应用信息自动设计营销文案和视觉风格
• • 输出 PNG 格式高质量截图，直接用于 App Store 上架

该工具的核心目标是 节省设计时间，提高截图专业性，尤其适合独立开发者和小团队。

二、实现原理

从技术角度来看，app-store-screenshots 的实现原理主要包括三层：

1. 数据层：应用信息与配置

用户提供应用的关键属性：

• • App 名称、Logo
• • 核心功能描述
• • 品牌色、字体风格
• • 目标设备尺寸

这些信息被存储为 JSON 配置，作为截图渲染的输入。

2. 渲染层：React + Tailwind CSS

通过 React 组件动态生成截图页面：

• • 使用 Tailwind CSS 快速构建响应式布局
• • 利用 组件化设计（标题、功能点、按钮等）
• • 可配置不同主题（Light / Dark）

这样可以在同一套代码下生成多套视觉风格。

3. 输出层：html-to-image 转 PNG

使用 html-to-image 或类似库，将 React 渲染的 DOM 转换为 PNG 图片：

• • 支持多种屏幕尺寸输出
• • 可直接保存到本地或上传到远程存储
• • 保证图片分辨率符合 Apple App Store 要求

总结：这个项目核心就是“React 渲染 DOM → 转为高分辨率 PNG”，配合配置化输入，实现自动化。

三、安装指南

你可以通过 npm 或 npx 方式快速安装：

# 直接使用 npx 安装并运行npx skills add ParthJadhav/app-store-screenshots

这里 skills 是指和 AI 编程助手（如 Claude Code、Cursor）集成的技能。也可以克隆仓库自己运行。

或者本地手动安装：

git clone https://github.com/ParthJadhav/app-store-screenshots.gitcd app-store-screenshotsnpm installnpm run dev

• • npm run dev：启动开发服务器
• • npm run build + npm run start：生产环境构建与启动

四、使用方法

1. 基本流程

• 1. 运行工具后，输入应用信息：

• • App 名称、Logo

• • 功能点描述

• • 品牌配色、字体、按钮样式

• 2. 选择目标设备尺寸：

• • iPhone 14 Pro Max (6.7")

• • iPhone 14 (6.1")

• • iPad（可选）

• 3. 工具生成截图并输出 PNG 文件

截图输出示例路径：

/output/ios/6.7inch/app_screenshot_01.png

2. 命令行示例

# 通过 CLI 生成截图npx app-store-screenshots generate \  --app-name "MyApp" \  --logo "./assets/logo.png" \  --features "Fast, Secure, Easy to Use" \  --theme "dark"

生成后，你会在 output/ 目录下看到不同尺寸的 App Store 截图。

五、实战示例

假设你有一个独立开发的任务管理 App TaskMaster：

• 1. 准备素材

• • Logo: taskmaster-logo.png

• • 核心功能: Smart reminders, Easy project tracking, Offline support

• • 品牌色: 蓝色 ([#1E90FF](javascript:;))

• 2. 配置截图生成

npx app-store-screenshots generate \  --app-name "TaskMaster" \  --logo "./assets/taskmaster-logo.png" \  --features "Smart reminders, Easy project tracking, Offline support" \  --theme "light"

• 3. 生成效果

• • 6.7" 截图示例：主功能大图 + 三个亮点功能点

• • 6.1" 截图示例：简洁版功能介绍

• • 输出文件可直接上传到 App Store Connect

这样，你不需要 Photoshop、Figma 等工具就能完成多分辨率截图生成，大大节省上线准备时间。

六、总结

app-store-screenshots 是一款专为 iOS 独立开发者设计的自动化截图工具：

• • 核心优势：自动化、多分辨率、营销风格
• • 技术亮点：React + Tailwind + html-to-image + JSON 配置
• • 适用场景：独立开发者、初创团队、CI/CD 自动化截图

如果你想在 App Store 提高下载量并节省设计成本，这款工具绝对值得尝试。

📌 扩展思路：

• • 可结合 GitHub Actions 自动生成每个版本截图
• • 配合 AI 文案生成器，自动生成功能亮点文案
• • 支持多主题、多语言截图，覆盖全球市场

Claude Skill app-store-screenshots

在 Claude 中使用 app-store-screenshots，核心思路是把它当作 “技能（Skill）”或外部工具” 调用，让 Claude 自动生成截图。这里我整理了详细步骤和示例。

一、准备

• 1. 本地或云端安装 app-store-screenshots

git clone https://github.com/ParthJadhav/app-store-screenshots.gitcd app-store-screenshotsnpm install

• 2. 确保可以通过命令行调用：

npx app-store-screenshots generate --app-name "MyApp" --logo "./logo.png" --features "Fast, Secure" --theme "light"

• 3. 收集素材：

• • App Logo（PNG）

• • 功能亮点文案

• • 品牌色 / 主题 / 字体

二、在 Claude 中调用方法

Claude 通过 外部技能（External Skills）或命令执行能力 调用 CLI 工具：

方法 1：直接让 Claude 输出 CLI 命令

你可以在 Claude 会话里写：

I want to generate App Store screenshots for my app "TaskMaster".The app has these features:1. Smart reminders2. Easy project tracking3. Offline supportPlease generate the full npx app-store-screenshots command I should run locally to create these screenshots for iPhone 14 Pro Max, 14, and 13, with light theme, and output to ./output.

Claude 会给你类似这样的命令：

npx app-store-screenshots generate \  --app-name "TaskMaster" \  --logo "./assets/taskmaster-logo.png" \  --features "Smart reminders, Easy project tracking, Offline support" \  --theme "light" \  --output "./output"

然后你复制命令在本地执行，就能生成截图。

方法 2：集成为 Claude “技能”

如果你的 Claude 支持 External Skills（Claude 2.0+ 企业版支持）：

• 1. 新建一个技能，名称如 Generate App Store Screenshots
• 2. 配置 CLI 执行路径：

npx app-store-screenshots generate

• 3. 配置 输入参数模板：

• • app_name → Claude 会话里获取 App 名称

• • logo_path → Claude 会话里获取 Logo 文件路径

• • features → Claude 会话里获取功能点

• • theme → Light / Dark

• • output → 输出目录

• 4. 使用技能：

你直接对 Claude 说：

Generate App Store screenshots for my app "TaskMaster" with logo logo.png, features: Smart reminders, Easy project tracking, Offline support, light theme, output to ./output

Claude 就会触发技能，生成截图命令，并执行，返回结果路径或链接。

方法 3：结合 GitHub Actions + Claude 自动化

• • Claude 生成 最新功能文案 或 新版本描述
• • 自动写入 JSON 配置
• • GitHub Actions 触发 npx app-store-screenshots generate
• • 完成截图生成与上传

这样 Claude 可以辅助 自动生成文案+截图自动化，实现真正的零人工流程。

SpeechNote 实战

安装好 Skill，cd 到项目所在路径，让 AI 开始干活。

app-store-screenshots Skill 会问几个项目相关问题: 我喂给 Claude Code 的提示词是这样的：

AppIcon目录为/Users/Work/iOS_Projects/screenshots；/Users/Work/iOS_Projects/SpeechNote/SpeechNote/Asse ts.xcassets/AppIcon.appiconset；翠绿 #3EC891；Noto Sans CJK SC and Noto Serif CJK SC available, as well as some bold variants；""""- **App 名**: 鲸海语记- **主色**: 翠绿 `#3EC891`- **可用截图**: 8 张，选用 recording、home、pompt、pro、启动页 制作 5 张 App Store 图开始写生成脚本。中文字体齐全。开始写截图生成器：生成成功。检查一下文件大小：5 张截图已生成，规格 1290×2796 px，符合 iPhone 6.7" App Store 要求。**每张内容：**| 编号 | 文案 | 配色 | 截图 ||------|------|------|------|| 01 | 说出来 · 秒变文字 | 翠绿渐变 | 录音界面 || 02 | 粗糙录音 · 一键变精稿 | 深绿渐变 | 提示词管理 || 03 | 所有语记 · 触手可及 | 薄荷浅色 | 主界面 || 04 | 解锁无限 · 随心创作 | 极深暗绿 | Pro 订阅 || 05 | 语音记录 · 轻松无界 | 海蓝渐变 | 启动插画 |""""5 screenshots；gradient-heavy + clean 文字排版 

最终生成效果： 💡 总结：

• • 最简单：让 Claude 输出命令，你在本地运行
• • 中级：在 Claude 创建技能，让它直接执行生成
• • 高级：结合 CI/CD，让 Claude 生成内容，自动触发截图生成和上传

参考：

• 1. app-store-screenshots
• 2. GitHub_Daily app-store-screenshots

2026.03.13 22:52 沪 · 赵巷

📌 声明：本文由 AI 辅助完成