app-store-screenshots-generator

用途

该技能用于为 iOS 应用生成可用于 App Store 上架的截图。它面向 AI 编码智能体（Claude Code、Cursor、Windsurf、Codex 等），会先询问应用的品牌、功能和风格偏好，再开始构建。

主要能力

搭建最小化的 Next.js + TypeScript + Tailwind 项目。
将每张截图设计成广告（而非单纯展示 UI）。
使用经过验证的 App Store 文案模式撰写有吸引力的标题与副标题。
使用内置的 iPhone 外框渲染截图。
导出 Apple 要求的全部 4 种尺寸 PNG：6.9″、6.5″、6.3″、6.1″。
支持多语言截图集、RTL 感知布局以及可复用的主题预设。

安装

使用 npx skills（推荐）：

安装到当前项目

npx skills add ParthJadhav/app-store-screenshots

全局安装（在所有项目中可用）

npx skills add ParthJadhav/app-store-screenshots -g

为特定智能体安装

npx skills add ParthJadhav/app-store-screenshots -a claude-code

手动安装：

git clone https://github.com/ParthJadhav/app-store-screenshots ~/.claude/skills/app-store-screenshots

使用方式

安装后，直接描述需求即可，例如：

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.

智能体在生成前会询问品牌颜色、字体、功能、风格方向、幻灯片数量和语言等澄清问题。

项目结构

该技能会搭建如下布局：

project/ ├── public/ │ ├── mockup.png # 带透明屏幕区域的 iPhone 外框 │ ├── app-icon.png # 你的应用图标 │ ├── screenshots/ # 应用截图（可按 locale 嵌套） │ │ ├── en/ │ │ ├── de/ │ │ └── ar/ │ └── screenshots-ipad/ # 可选 iPad 截图 ├── src/app/ │ ├── layout.tsx # 字体设置 │ └── page.tsx # 整个截图生成器（单文件） ├── package.json └── next.config.ts

整个生成器都在单个 page.tsx 文件中。运行开发服务器，打开浏览器，点击任意截图即可导出为 PNG。

核心 page.tsx 模式

资料给出了完整的代码示例，包括：

设计令牌 / 主题预设（THEMES），含 clean-light、dark-bold、warm-editorial。
导出尺寸（EXPORT_SIZES），含 6.9″、6.5″、6.3″、6.1″ 的宽高。
幻灯片数据（SLIDES）。
ScreenshotSlide 组件。
exportSlide 导出辅助函数。
主页面 ScreenshotGenerator。

（代码内容详见资料，此处不重复，翻译时保留原样。）

多语言设置

按 locale 文件夹组织截图并切换基础路径：

public/screenshots/ ├── en/home.png ├── de/home.png └── ar/home.png ← RTL locale

资料提供了多语言文案字典 COPY 和 RTL 感知的画布包裹组件 LocaleCanvas 的代码。

依赖（package.json）

{ "dependencies": { "next": "^14.0.0", "react": "^18.0.0", "react-dom": "^18.0.0", "html-to-image": "^1.11.11" }, "devDependencies": { "typescript": "^5.0.0", "@types/react": "^18.0.0", "@types/node": "^20.0.0", "tailwindcss": "^3.4.0", "autoprefixer": "^10.4.0", "postcss": "^8.4.0" } }

启动开发服务器

该技能会自动检测包管理器（优先 bun）：

bun（优先）

bun install && bun dev

pnpm

pnpm install && pnpm dev

yarn

yarn && yarn dev

npm

npm install && npm run dev

然后打开 http://localhost:3000 查看截图生成器。

导出尺寸参考

Display | Width | Height | Notes

6.9" | 1320px | 2868px | 设计基准尺寸 6.5" | 1284px | 2778px | Scale: 0.973 6.3" | 1206px | 2622px | Scale: 0.914 6.1" | 1125px | 2436px | Scale: 0.852

注意：使用 6.1″ 模拟器捕获初始应用截图——这样可避免后续调整分辨率。

智能体遵循的设计原则

截图是广告，不是文档——每张幻灯片只推销一个想法。
一秒规则——标题必须在 App Store 缩略图尺寸下可读。
布局多变——相邻幻灯片不使用相同的手机位置（phone-left / phone-right / phone-center）。
风格由用户驱动——无硬编码颜色；一切都来自主题令牌。
第一张幻灯片 = 最强卖点——而不是最复杂的功能。

质量检查清单

导出前，逐张核对：

标题在约 1 秒内准确传达一个想法
第一张幻灯片以最强的用户利益开头（而非功能）
相邻幻灯片使用不同的手机位置布局
装饰元素支持信息，而不是遮挡 UI
缩放到最小的导出尺寸（6.1"）后，文字和边框看起来正确
RTL 语言设置了 dir="rtl"，布局感觉原生（而非机械镜像）

示例提示词

习惯追踪器

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. Main strengths: fast expense capture, clear monthly trends, shared budgets. Sharp modern style, high contrast, 7 slides.

多语言 + 主题

Build App Store screenshots for my language learning app. I need English, German, and Arabic screenshot sets. Use two themes: clean-light and dark-bold. Make Arabic slides feel RTL-native, not just translated.

故障排查

html-to-image 导出空白或白色图片：确保所有图片来自 /public（同源），跨源图片会阻止画布导出；如从 CDN 加载，给 <img> 标签加 crossOrigin="anonymous"；检查浏览器控制台的 CORS 错误。
外框与截图不对齐：内置 mockup.png 已预先测量透明屏幕区域；使用 position: absolute 让应用截图位于外框后面，而不是里面；对于 660px 宽的外框，使用 top: 28px, left: 24px 作为起始偏移。
导出缩放看起来模糊：始终以 1320×2868（6.9″ 基准）设计并缩小——切勿从小尺寸设计再放大；向 toPng() 传入明确的 width 和 height 以及正确的缩放变换。
导出中字体未加载：通过 next/font 或画布 div 内的 <style> 标签加载字体，而不仅仅在 layout.tsx 中；在触发 toPng() 前调用 document.fonts.ready。

代码示例：

// 导出前等待字体 await document.fonts.ready; const dataUrl = await toPng(ref.current, { width: w, height: h });

模拟器截图分辨率错误：始终从 6.1″ 模拟器捕获作为起点，以尽量减少后续调整。

要求

Node.js 18+
以下之一：bun、pnpm、yarn 或 npm
Claude Code、Cursor、Windsurf、Codex，或任何能读取技能文件的智能体

适用场景