多年以前，我没有走独立开发 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-screenshots 的实现原理主要包括三层：

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

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

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

2. 渲染层：React + Tailwind CSS

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

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

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

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

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

三、安装指南

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

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

或者本地手动安装：

四、使用方法1. 基本流程1. 运行工具后，输入应用信息：• App 名称、Logo• 功能点描述• 品牌配色、字体、按钮样式2. 选择目标设备尺寸：• iPhone 14 Pro Max (6.7")• iPhone 14 (6.1")• iPad（可选）3. 工具生成截图并输出 PNG 文件

截图输出示例路径：

2. 命令行示例

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

五、实战示例

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

1. 准备素材2. 配置截图生成

3. 生成效果

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

六、总结

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

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

扩展思路：

Claude Skill app-store-screenshots

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

一、准备1. 本地或云端安装 app-store-screenshots

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

3. 收集素材：二、在 Claude 中调用方法

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

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

你可以在 Claude 会话里写：

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

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

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

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

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

3. 配置 输入参数模板：4. 使用技能：

你直接对 Claude 说：

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

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

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

SpeechNote 实战

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

app-store-screenshots Skill 会问几个项目相关问题:

我喂给 Claude Code 的提示词是这样的：

最终生成效果：

总结：

参考：

1. app-store-screenshots2. GitHub_Daily app-store-screenshots

2026.03.13 22:52

沪 · 赵巷

声明：本文由 AI 辅助完成