一项适用于人工智能驱动的编码代理（例如 Claude Code、Cursor、Windsurf 等）的技能，用于生成符合 App Store 标准的 iOS 应用截图。它会搭建一个 Next.js 项目框架，设计广告风格的截图，并以所有苹果要求的分辨率导出。
它的作用
-
询问您有关应用品牌、功能和风格偏好方面的信息。
-
搭建一个最小的 Next.js 项目（或在现有项目中运行）
-
将每张屏幕截图都设计成广告，而不是用户界面展示。
-
运用成熟的 App Store 文案写作模式，撰写引人入胜的文案
-
使用内置的 iPhone 模型以全分辨率渲染屏幕截图
-
导出所有 4 种苹果公司要求的 PNG 尺寸（6.9、6.5、6.3、6.1 英寸）。
包含资产
mockup.png— 预先测量好的 iPhone 边框，屏幕区域透明
安装
使用 npx 技能（推荐）
npx skills add ParthJadhav/app-store-screenshots
它可与 Claude Code、Cursor、Windsurf、OpenCode、Codex 和40 多个其他代理配合使用。
全局安装（适用于所有项目）：
npx skills add ParthJadhav/app-store-screenshots -g
针对特定代理进行安装：
npx skills add ParthJadhav/app-store-screenshots -a claude-code
手动（git clone）
git clone https://github.com/ParthJadhav/app-store-screenshots ~/.claude/skills/app-store-screenshots
用法
安装完成后，当你要求克劳德·科德执行以下操作时，该技能会自动触发：
-
构建应用商店屏幕截图
-
为 iOS 应用生成营销截图
-
创建可导出的屏幕截图素材
或者直接告诉克劳德·科德你的需求：
> Build App Store screenshots for my app
在开始构建任何内容之前，Claude 会询问您应用程序的屏幕截图、品牌颜色、字体、功能、风格方向和幻灯片数量。
示例提示
这些都是很好的入门提示，因为它们提供了产品背景，同时又为技能指导设计过程留下了空间。
习惯追踪器
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.
金融应用程序
Generate App Store screenshots for my personal finance app.
The app's main strengths are fast expense capture, clear monthly trends, and shared budgets.
I want a sharp, modern style with high contrast and 7 slides.
人工智能生产力工具
Create exportable App Store screenshots for my AI note-taking app.
The core value is turning messy voice notes into clean summaries and action items.
I want bold copy, dark backgrounds, and a polished tech-forward look.
健康应用程序
Build marketing screenshots for my meditation app.
The app focuses on sleep, stress relief, and short guided sessions.
Use a soft, warm, organic style and prioritize emotional outcomes over feature lists.
更好的提示技巧
-
用一句话概括这个应用的功能。
-
请按优先级列出最重要的 3-5 项功能。
-
请描述您想要的视觉风格。
-
请说明你需要多少张幻灯片。
-
如果您希望输出结果符合特定的 App Store 样式，请提供参考资料。
哪些部分会被搭建起来？
如果从一个空文件夹开始，该技能会创建：
project/
├── public/
│ ├── mockup.png # iPhone frame (copied from skill)
│ ├── app-icon.png # Your app icon
│ └── screenshots/ # Your app screenshots
├── src/app/
│ ├── layout.tsx # Font setup
│ └── page.tsx # Screenshot generator (single file)
├── package.json
└── ...
整个生成器就是一个单独的page.tsx文件。运行开发服务器，打开浏览器，点击任意屏幕截图即可将其导出为PNG格式。
出口尺寸
| 展示 | 解决 |
|---|---|
| 6.9英寸 | 1320 x 2868 |
| 6.5英寸 | 1284 x 2778 |
| 6.3英寸 | 1206 x 2622 |
| 6.1英寸 | 1125 x 2436 |
屏幕截图的设计分辨率为 1320x2868（最大），缩小后可显示更小的尺寸。
技术栈
| 依赖性 | 目的 |
|---|---|
| Next.js | 开发服务器 + 静态图像服务 |
| TypeScript | 型式安全 |
| Tailwind CSS | 造型 |
| html转图像 | 以精确分辨率导出PNG文件 |
| React | 成分组成 |
关键设计原则
-
屏幕截图是广告，不是文档——每张幻灯片只推销一个想法
-
文案遵循“一秒规则” ——在 App Store 中以缩略图大小即可阅读。
-
布局各不相同——相邻两张幻灯片上的手机摆放位置都不相同。
-
样式由用户驱动——没有硬编码的颜色、渐变或字体。
质量检查清单
导出前，每张幻灯片都应该经过以下快速审核：
-
标题在一秒钟内传达了一个信息。
-
第一张幻灯片重点展示了用户的最大利益。
-
相邻幻灯片不会重复使用相同的布局。
-
装饰元素起到辅助信息传达的作用，而不是阻碍用户界面。
-
导出调整大小后，文本、屏幕截图和画面构图仍然正确。
要求
-
Node.js 18+
-
以下任选其一：bun、pnpm、yarn 或 npm（自动检测，首选 bun）
这个技能可以直接让Claude代码学习后，快速制作App Store宣传图如果你走过上架App Store的流程，就知道多麻烦它会帮你看过整套App后，判断需要截取哪些页面，并自己加上行销文字与排版几乎不需要什么修改就可以直接用，省掉 30 分钟 - 1 小时做图的时间
成果展示：
