App Store截图生成器

App Store & Google Play Screenshots Generator

一句话介绍： 一个为 AI 编程 Agent 设计的 Skill，能搭建一个完整的 Next.js 截图编辑器，一键生成 App Store 和 Google Play 的营销截图。

📖 介绍

App Store Screenshots Generator 是一个面向 AI 编程 Agent（Claude Code、Cursor、Windsurf 等）的技能，由 ParthJadhav 创建。它不是生成一张静态截图，而是搭建一个完整的可视化编辑器，让你像设计师一样拖拽、排版、预览，最终导出符合商店规范的截图包。

GitHub 星标 6.8k，MIT 开源协议，已有 8 位贡献者参与。

✨ 亮点

1. 完整编辑器而非一次性页面：搭建的是一个带侧边栏、检查器、画布的完整 Next.js 应用
2. Connected Canvas（连接画布）：相邻截图可以共享元素，手机、标题、装饰物可以跨越屏幕边界
3. 实时编辑：拖拽调整位置、检查器修改文案/布局/设备/层级，所见即所得
4. 自动保存：通过 /api/project 写入磁盘 + localStorage 双重备份，项目可 git 追踪
5. 多平台多设备：支持 iOS（iPhone/iPad）、Android（手机/平板/Feature Graphic）
6. 多语言支持：支持多语言包、RTL 布局（如阿拉伯语）
7. 一键导出：导出 zip 包，按平台/设备/分辨率/语言自动组织。

🎯 核心功能

🌍 应用场景

• App 上架：生成 App Store 和 Google Play 要求的所有截图尺寸
• 营销素材：制作广告风格的产品展示图
• 多语言发布：同时准备英文、中文、阿拉伯语等多语言截图
• 快速迭代：修改文案或布局后重新导出，无需设计师反复修改

👥 实用人群

• 独立开发者：没有设计师资源，需要自己搞定上架截图
• 小型团队：快速生成和迭代商店截图
• 产品经理：直接在编辑器里调整截图效果
• AI 编程用户：使用 Claude Code、Cursor 等 Agent 的开发者

🔧 使用方法

# 通过 npx skills 安装
npx skills add ParthJadhav/app-store-screenshots

# 或手动安装
git clone https://github.com/ParthJadhav/app-store-screenshots 
  ~/.claude/skills/app-store-screenshots

使用流程：

1. 在模拟器/真机上截取 App 原始截图
2. 让 AI Agent 搭建截图项目
3. 运行开发服务器，打开编辑器
4. 用侧边栏组织截图，检查器编辑文案和布局
5. 选择 Connected 或 Isolated 模式
6. 点击 Export 导出商店级 PNG

示例 Prompt：

Build App Store screenshots for my habit tracker.
The app helps people stay consistent with simple daily routines.
I want 6 slides, clean minimal style, warm neutrals, and a calm premium feel.

📝 总结评价

这是一个非常实用的生产力工具。它把"设计师做截图"这件事变成了"开发者自己在编辑器里拖拽"，大幅降低了 App 上架的视觉门槛。Connected Canvas 是亮点，让截图之间有视觉连贯性，看起来更专业。对于独立开发者和小团队来说，这可能是目前最好的截图生成方案之一。

GitHub： https://github.com/ParthJadhav/app-store-screenshots