上周有个做独立开发的朋友跟我吐槽，说他花了整整两天做App Store截图。调排版、换文案、导不同尺寸，最后上传到App Store Connect还被拒了——因为有一张图的分辨率差了几个像素。
我听了之后给他甩了一个GitHub链接。两天后他回我：”这东西应该早点告诉我。”
今天要聊的就是这个让他省了两天的项目——app-store-screenshots。
先说说这是个啥
app-store-screenshots是一个Claude Code技能，也可以说是一个面向AI编程助手的工具。你对Claude说”帮我做一套App Store截图”，它会问你几个简单问题——应用名称、核心功能、品牌色、风格偏好——然后自动搭建一个Next.js项目，生成广告级别的截图，并按Apple和Google要求的尺寸导出PNG。
不用打开Photoshop，不用调Figma，不用记App Store的分辨率规范。输入信息，等几分钟，直接拿到成品。
作者是ParthJadhav，项目开源在GitHub上，MIT协议。
数据表现怎么样
4.2k Star，275 Fork，13个Watchers，7位贡献者。对于一个垂直领域的AI技能来说，这个关注度不低。
| 指标 | 数值 |
|---|---|
| Stars | 4.2k |
| Forks | 275 |
| Watchers | 13 |
| 贡献者 | 7位 |
| 协议 | MIT |
项目支持40多种AI编程助手，不局限Claude Code，Cursor、Windsurf、OpenCode、Codex都能用。兼容性做得挺广。
用了什么技术
技术栈很干净，前端三件套加一个叫html-to-image的库：
| 技术 | 用途 |
|---|---|
| Next.js | 开发服务器 + 静态图片服务 |
| TypeScript | 类型安全 |
| Tailwind CSS | 样式处理 |
| html-to-image | DOM转PNG，按精确分辨率导出 |
| React | 组件组合 |
核心逻辑简单粗暴：React组件渲染页面 → html-to-image把DOM节点转成高分辨率PNG。不需要复杂的图形引擎，浏览器就是设计工具。
几个让我意外的点
截图是广告，不是文档。 这是项目反复强调的设计理念。传统的App Store截图就是把UI界面截个图拼一拼，用户看了不知道这App是干嘛的。app-store-screenshots会把每张图设计成广告——大标题、核心卖点、行动号召，让人一眼就想下载。
多平台一次搞定。 iPhone的6.9″/6.5″/6.1″、iPad横竖屏、Android手机、7寸和10寸平板、Google Play的Feature Graphic（1024×500），全部支持。之前我做一套截图要导出七八种尺寸，现在一次命令全出。
多语言和RTL。 支持多语言截图集，阿拉伯语和希伯来语的RTL布局是原生支持，不是简单镜像翻转。做小语种市场的开发者应该能懂这个点的价值。
主题预设切换。 通过Design Token可以快速切换多套视觉风格——clean-light、dark-bold、warm-editorial等。同一套应用信息，换套皮肤就是另一种感觉。
批量导出矩阵。 可以按语言 × 设备 × 主题的矩阵批量导出。如果你有5种语言、3种设备、2套主题，一次性出30组截图。
适合谁用
- 独立开发者：没有设计师，自己也不会用PS/Figma的
- 小团队：设计资源有限，想快速上线的产品团队
- 多语言应用：需要出多语言截图集的
- 频繁迭代的产品：每次功能更新都要重新做截图的
怎么用
安装：
npx skills add ParthJadhav/app-store-screenshots
全局安装（跨项目可用）：
npx skills add ParthJadhav/app-store-screenshots -g
使用时的对话大概长这样：
你：Build App Store screenshots for my app
Claude：What's your app name?
你：SpeechNote
Claude：What are the core features?
你：Voice-to-text, auto-punctuation, multi-language support
Claude：What's your brand color?
你：#FF6B35
...
然后Claude会自动：
- 搭建Next.js项目
- 设计5张广告风格的截图
- 按你指定的设备尺寸渲染
- 导出PNG到对应目录
你也可以手动操作：
git clone https://github.com/ParthJadhav/app-store-screenshots.git
cd app-store-screenshots
npm install
npm run dev
然后编辑配置文件，浏览器预览，确认后导出。
和同类对比
| 维度 | app-store-screenshots | 传统方式 |
|---|---|---|
| 操作方式 | 自然语言对话，AI自动生成 | 手动设计，逐个尺寸导出 |
| 设计质量 | 广告级营销风格 | 依赖设计师水平 |
| 多尺寸支持 | 一键导出全部平台尺寸 | 手动裁剪，容易出错 |
| 多语言 | 内置支持，RTL原生 | 需要重复制作 |
| 成本 | 免费开源 | 设计工具订阅费+时间成本 |
| 门槛 | 需要Node.js环境 | 需要设计软件技能 |
传统方式的问题是：要么你自己会设计，要么你花钱请设计师，两种都要时间。app-store-screenshots把这件事变成了”说清楚需求，等几分钟拿成品”。
有啥需要注意的
需要Node.js环境。 项目基于Next.js，本地得有Node.js 18+。虽然支持bun/pnpm/yarn/npm自动检测，但对纯移动端开发者来说，搭环境还是有一定门槛。
素材要自己准备。 Logo、原始应用截图、品牌色值、字体文件这些素材得提前准备好。AI能帮你排版和设计，但不能凭空生成你的App界面。
中文排版要检查字体。 实战中有开发者反馈，中文字体需要额外确认是否齐全，否则可能出现缺字或fallback字体不一致的情况。
定制化有天花板。 截图布局和风格受限于内置的React组件模板。如果你需要极度个性化的插画、非标准版式或者特别复杂的视觉动效，还是得找设计师。
Android支持相对薄弱。 项目主要针对iOS App Store优化，虽然提到支持Google Play尺寸，但社区反馈中Android相关的案例和文档明显少于iOS。
相关链接
- GitHub：https://github.com/ParthJadhav/app-store-screenshots
- 安装：npx skills add ParthJadhav/app-store-screenshots
app-store-screenshots做了一件很多独立开发者需要但没人愿意做的事——把App Store截图这个繁琐流程自动化了。4.2k Star说明不止我一个人觉得这事该有人做。
它的价值不是替代设计师，是让”不会设计”的开发者也能拿出像样的截图。广告级设计、全尺寸导出、多语言支持，这三个点基本覆盖了独立开发者的截图需求。
但也不是万能药。需要Node.js环境、素材要自备、定制天花板有限。偶尔上线一个App，手动做可能更快；经常迭代、做多语言版本的话，这个技能能省不少时间。
还在手动拖Figma的，可以试下。