技术 | 用 Skill 搞定 AppStore 推广图

今天介绍一款 skill ，专门来做 app store 的推广图：app-store-screenshots^[1]。

做 app 开发，上架应用时的截图都要耗费一些心思。有了这个 Skill 可以根据你项目的基本信息和真实的截图，生成漂亮的推广图。

原理

这个项目需要你先提供真实的 App 截图，然后 AI 结合产品卖点做包装处理。

skill 运行完成后，在本地跑起一个 Next.js 编辑器，把你的截图套上设备外壳、加上营销标题和横幅背景。

• • 真实截图 + 营销包装：用真实的界面，既能过审，又比原图好看。
• • 连贯画布：支持把背景和设备跨屏摆放，做成连贯的推广图，导出时自动切开。
• • 随项目版本管理：配置存在 app-store-screenshots.json 里，跟代码一起提交，下次更新随时改。
• • 一键导出标准尺寸：支持 iOS 和 Android 各种所需尺寸，一键打包下载。

安装

# 当前项目添加npx skills add ParthJadhav/app-store-screenshots# 或全局安装npx skills add ParthJadhav/app-store-screenshots -g

使用

在 AI 编程助手（Claude Code / Cursor 等）里直接说需求，把截图目录和卖点给它：

帮我的记账 App 生成一套 App Store 推广图。核心卖点：快速记账、月度趋势、家庭共享。风格：极简、暖色调，一共 6 张。源截图在 ./screenshots 目录下。

具体步骤：

1. 1. 先在模拟器或真机上截好真实的 App 画面，放到项目里。
2. 2. AI 会自动生成并启动本地编辑器（npm run dev）。
3. 3. 在浏览器里拖拽微调文案、设备框和排版。
4. 4. 点击 Export bundle，直接下载全套尺寸的图片包。

手头有 App 要上架的朋友可以试试，非常好用。

引用链接

[1] app-store-screenshots: https://github.com/ParthJadhav/app-store-screenshots