app-store-screenshots

App Store 截图生成器

概述

构建一个 Next.js 页面，将 iOS App Store 截图渲染为广告（而非 UI 展示），并通过 html-to-image 按照 Apple 要求的分辨率导出。截图是 App Store 上最重要的转化素材。

核心原则

截图是广告，不是说明文档。 每张截图只推销一个理念。如果你在展示 UI，那就做错了——你应该推销一种感受、一种结果，或解决一个痛点。

第 1 步：向用户询问以下问题

编写任何代码之前，先向用户询问以下所有问题。未获得答案前，不要继续：

必填

1. App 截图 — “你的 App 截图在哪里？（实际设备截屏的 PNG 文件）”
2. App 图标 — “你的 App 图标 PNG 在哪里？”
3. 品牌颜色 — “你的品牌颜色是什么？（强调色、文字颜色、背景偏好）”
4. 字体 — “你的 App 使用什么字体？（或者你希望截图使用什么字体？）”
5. 功能列表 — “按优先级列出 App 的功能。你的 App 最重要的功能是什么？”
6. 幻灯片数量 — “你想要多少张截图？（Apple 最多允许 10 张）”
7. 风格方向 — “你想要什么风格？例如：温暖/自然、暗色/忧郁、简洁/极简、大胆/多彩、渐变丰富、扁平化。如果有 App Store 截图参考，也请分享。”

选填

8. iPad 截图 — “你也有 iPad 截图吗？如果有，我们也会生成 iPad App Store 截图（通用 App 建议提供）。”
9. 组件素材 — “你有想用作悬浮装饰的 UI 元素 PNG 吗（卡片、小组件等）？没有也没关系，我们会跳过。”
10. 本地化截图 — “你想要多种语言的截图吗？即使你的 App 只有英文版，这也有助于你的商品页在各地区的 App Store 提升排名。如果需要：你想要哪些语言？（例如 en、de、es、pt、ja、ar、he）”
11. 主题预设系统 — “你想要一种艺术指导风格，还是可复用的视觉主题（例如 clean-light、dark-bold、warm-editorial），以便快速切换截图外观？”
12. 其他说明 — “你有任何具体要求、限制或偏好吗？”

根据答案决定（不要询问）

根据用户的风格方向、品牌颜色和 App 美学，自行决定：

• 背景样式：渐变方向、颜色，以及采用浅色还是深色底色
• 装饰元素：色块、光晕、几何形状，或不添加装饰——与风格相匹配
• 深色与浅色幻灯片：各自的数量，以及适合深色处理的功能
• 排版处理：字重、字距、行高——与品牌个性相匹配
• 调色板：从品牌颜色衍生文字颜色、辅助颜色和阴影色调
• 主题预设名称：将模糊的风格需求转化为可复用的主题 ID，供用户切换
• RTL 行为：如果有任何语言区域使用 RTL（ar、he、fa、ur），应有意镜像布局，而不只是翻译文字

重要： 如果用户在流程中的任何时候提出其他说明，都要遵循。用户说明始终优先于技能默认设置。

第 2 步：设置项目

检测包管理器

检查可用的包管理器，并按以下优先级使用：bun > pnpm > yarn > npm

# Check in order
which bun && echo "use bun" || which pnpm && echo "use pnpm" || which yarn && echo "use yarn" || echo "use npm"

脚手架搭建（如果没有现成的 Next.js 项目）

# With bun:
bunx create-next-app@latest . --typescript --tailwind --app --src-dir --no-eslint --import-alias "@/*"
bun add html-to-image

# With pnpm:
pnpx create-next-app@latest . --typescript --tailwind --app --src-dir --no-eslint --import-alias "@/*"
pnpm add html-to-image

# With yarn:
yarn create next-app . --typescript --tailwind --app --src-dir --no-eslint --import-alias "@/*"
yarn add html-to-image

# With npm:
npx create-next-app@latest . --typescript --tailwind --app --src-dir --no-eslint --import-alias "@/*"
npm install html-to-image

复制手机模型图

此技能附带一个经过尺寸测量的 iPhone 模型图 mockup.png（与此 SKILL.md 位于同一目录）。将其复制到项目的 public/ 目录。模型图文件与此技能文件位于同一目录。无需 iPad 模型图——iPad 边框仅使用 CSS 实现。

文件结构

project/
├── public/
│   ├── mockup.png              # iPhone frame (included with skill)
│   ├── app-icon.png            # User's app icon
│   ├── screenshots/            # iPhone app screenshots
│   │   ├── home.png
│   │   ├── feature-1.png
│   │   └── ...
│   └── screenshots-ipad/       # iPad app screenshots (optional)
│       ├── home.png
│       ├── feature-1.png
│       └── ...
├── src/app/
│   ├── layout.tsx              # Font setup
│   └── page.tsx                # The screenshot generator (single file)
└── package.json

**注意：**不需要 iPad 模拟图 PNG——iPad 边框由 CSS 渲染（见下文的 iPad 模拟图组件）。

**多语言：**将截图按语言放入对应的区域设置文件夹中。生成器会切换 base 路径；所有幻灯片图片的 src 保持不变。

└── screenshots/
    ├── en/
    │   ├── home.png
    │   ├── feature-1.png
    │   └── ...
    ├── de/
    │   └── ...
    └── {locale}/

如果 iPad 截图也进行了本地化，则镜像相同的区域设置结构：

└── screenshots-ipad/
    ├── en/
    ├── de/
    └── {locale}/

**整个生成器是一个单独的 page.tsx 文件。**不需要路由、额外布局或 API 路由。

多语言：区域设置标签页

添加 LOCALES 数组和工具栏区域设置标签页。每张幻灯片的 src 都使用 base——不要硬编码路径：

const LOCALES = ["en", "de", "es"] as const; // use whatever langs were defined
type Locale = typeof LOCALES[number];

// In ScreenshotsPage:
const [locale, setLocale] = useState<Locale>("en");
const base = `/screenshots/${locale}`;

// Toolbar tabs:
{LOCALES.map(l => (
  <button key={l} onClick={() => setLocale(l)}
    style={{ fontWeight: locale === l ? 700 : 400 }}>
    {l.toUpperCase()}
  </button>
))}

// In every slide — unchanged between single and multi-language:
<Phone src={`${base}/home.png`} alt="Home" />

主题预设 + 区域设置元数据

添加一个小型配置层，让用户无需重写幻灯片组件即可切换主题和区域设置：

const LOCALES = ["en", "de", "ar"] as const;
type Locale = typeof LOCALES[number];

const RTL_LOCALES = new Set<Locale>(["ar"]);

const THEMES = {
  "clean-light": {
    bg: "#F6F1EA",
    fg: "#171717",
    accent: "#5B7CFA",
    muted: "#6B7280",
  },
  "dark-bold": {
    bg: "#0B1020",
    fg: "#F8FAFC",
    accent: "#8B5CF6",
    muted: "#94A3B8",
  },
  "warm-editorial": {
    bg: "#F7E8DA",
    fg: "#2B1D17",
    accent: "#D97706",
    muted: "#7C5A47",
  },
} as const;

type ThemeId = keyof typeof THEMES;

const COPY_BY_LOCALE = {
  en: { hero: "Build better habits" },
  de: { hero: "Baue bessere Gewohnheiten auf" },
  ar: { hero: "ابنِ عادات أفضل" },
} satisfies Record<Locale, { hero: string }>;

const [themeId, setThemeId] = useState<ThemeId>("clean-light");
const [locale, setLocale] = useState<Locale>("en");

const theme = THEMES[themeId];
const copy = COPY_BY_LOCALE[locale];
const isRtl = RTL_LOCALES.has(locale);

在所有地方使用主题令牌，而不是硬编码颜色。对于从右向左书写的区域设置，在截图画布上设置 dir={isRtl ? "rtl" : "ltr"}，并有意镜像非对称布局。

支持查询参数以便自动化：

// ?locale=de&theme=dark-bold&device=ipad

字体设置

// src/app/layout.tsx
import { YourFont } from "next/font/google"; // Use whatever font the user specified
const font = YourFont({ subsets: ["latin"] });

export default function Layout({ children }: { children: React.ReactNode }) {
  return <html><body className={font.className}>{children}</body></html>;
}

第 3 步：规划幻灯片

截图框架（叙事弧线）

根据用户要求的幻灯片数量调整此框架。并非所有位置都必需——选择适合的内容：

位置	用途	备注
#1	主视觉 / 核心优势	App 图标 + 标语 + 主屏幕。这是大多数人唯一会看到的一张。
#2	差异化优势	这款 App 与竞争对手相比有何独特之处
#3	生态系统	小组件、扩展、手表——主 App 之外的内容。不适用时跳过。
#4+	核心功能	每张幻灯片介绍一项功能，最重要的优先
倒数第 2 张	信任信号	身份 / 匠心——“为 [X] 用户打造”
最后一张	更多功能	用胶囊标签列出其他功能和即将推出的功能。功能较少时跳过。

规则：

• 每张幻灯片只推介一个想法。绝不要在一张幻灯片上介绍两个功能。
• 在不同幻灯片间变换布局——绝不要重复相同的模板结构。
• 加入 1-2 张对比幻灯片（反转背景），营造视觉节奏。

第 4 步：先撰写文案

在构建布局前，先让所有标题获得认可。糟糕的文案会毁掉优秀的设计。

铁律

1. **每个标题只表达一个想法。**绝不要用“和”连接两件事。
2. **用简短、常见的词。**1-2 个音节。除非属于特定领域，否则不要用行话。
3. **每行 3-5 个词。**在 App Store 的缩略图大小下也必须清晰易读。
4. **换行要有意为之。**用 <br /> 控制换行位置。

三种写法（每张幻灯片选择一种）

类型	效果	示例
描绘一个时刻	让人想象自己正在使用	“不用打开 App，也能查看你的咖啡。”
说明结果	展示使用后的生活状态	“为你买的每一款咖啡安个家。”
消除痛点	点出问题并解决它	“再也不会浪费一袋好咖啡。”

永远行不通的写法

• 把功能列表当标题：“用标签、类别和备注记录每件物品”
• 用“和”连接两个想法：“追踪 X，永不错过 Y”
• 使用复合从句：“为你拥有的每个 Y 保存并自定义 X”
• 空泛的愿景表达：“追踪每件物品”
• 营销流行语：“AI 驱动的建议”（除非真的用了 AI）

不佳标题与改进示例

在构建任何布局前，使用这些模式重写薄弱的文案：

不佳	更好	优势
追踪习惯并保持动力	保持连续记录	只表达一个想法，更容易快速理解
用 AI 摘要和智能排序整理任务	把笔记变成下一步行动	以结果为先，减少行话
用标签、筛选器和收藏保存食谱	快速找到晚餐灵感	推介用户收益，而不是界面
管理预算，永不错过付款	看清钱都花在哪了	承诺更清晰，不含双重主张
AI 驱动的健康支持	今晚更平静	明确的情绪结果

复制流程

1. 使用这三种方法，为每张幻灯片编写 3 个方案
2. 将每个方案放在手臂长度之外阅读——如果不能在 1 秒内看懂，就说明太复杂了
3. 检查：每行是否有 3-5 个词？如果没有，请调整换行
4. 向用户展示方案，并说明每个方案的理由

提示词示例格式

如果用户的请求不明确或信息不足，请在内部将其调整为类似以下格式：

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.

格式如下：

1. 应用类别 + 核心成果
2. 按优先级排列的主要功能
3. 期望的幻灯片数量
4. 风格方向

本地化规则

• 如果直译后的标题变得冗长或生硬，请勿逐字翻译。
• 面向目标市场重新撰写文案，同时保留相同的卖点。
• 按不同语言重新检查换行；德语、法语和葡萄牙语的文案通常需要更短。
• 对于从右向左书写的语言，如果版面构图依赖左右平衡，还要反转徽标对齐方式、辅助装饰和手机偏移方向。

文案风格参考应用

• Raycast — 具体、描述性强，每张幻灯片传达一个明确价值
• Turf — 极简的动作动词，口语化
• Mela / Notion — 温暖、简约、优雅

第 5 步：构建页面

架构

page.tsx
├── Constants (IPHONE_W/H, IPAD_W/H, SIZES, design tokens)
├── LOCALES / RTL_LOCALES / THEMES / COPY_BY_LOCALE
├── Phone component (mockup PNG with screen overlay)
├── IPad component (CSS-only frame with screen overlay)
├── Caption component (label + headline, accepts canvasW for scaling)
├── Decorative components (blobs, glows, shapes — based on style direction)
├── iPhoneSlide1..N components (one per slide)
├── iPadSlide1..N components (same designs, adjusted for iPad proportions)
├── IPHONE_SCREENSHOTS / IPAD_SCREENSHOTS arrays (registries)
├── ScreenshotPreview (ResizeObserver scaling + hover export)
└── ScreenshotsPage (grid + locale tabs + theme tabs + device toggle + export logic)

导出尺寸（Apple 要求，纵向）

iPhone

const IPHONE_SIZES = [
  { label: '6.9"', w: 1320, h: 2868 },
  { label: '6.5"', w: 1284, h: 2778 },
  { label: '6.3"', w: 1206, h: 2622 },
  { label: '6.1"', w: 1125, h: 2436 },
] as const;

以最大尺寸（1320x2868）进行设计，再缩小导出。

iPad（可选）

如果用户提供 iPad 截图，也要生成 iPad App Store 截图：

const IPAD_SIZES = [
  { label: '13" iPad', w: 2064, h: 2752 },
  { label: '12.9" iPad Pro', w: 2048, h: 2732 },
] as const;

以 2064x2752 的尺寸设计 iPad 幻灯片，再缩小导出。iPad 截图是可选的，但建议提供——仅适用于 iPad 的应用必须提供；对于通用应用，提供截图也能提升列表质量。

设备切换

同时支持两种设备时，在工具栏中尺寸下拉菜单旁添加切换选项（iPhone / iPad）。尺寸下拉菜单应根据所选设备切换为相应的 iPhone 或 iPad 尺寸。支持 ?device=ipad URL 参数，以用于无头／自动化截图工作流。

主题 + 语言区域切换

将语言区域和主题选择器放在设备和尺寸选择器所在的工具栏中。这样，生成器就会成为一个小型控制面板，而不是一次性页面。

• locale 切换截图文件夹和文案字典
• theme 仅切换设计令牌
• device 切换 iPhone/iPad 幻灯片注册表
• size 仅切换导出分辨率

渲染策略

每张截图都以完整分辨率（1320x2868px）进行设计。每张截图有两个副本：

1. 预览：通过 ResizeObserver 使用 CSS transform: scale()，以适应网格卡片
2. 导出：在屏幕外以实际分辨率渲染，使用 position: absolute; left: -9999px

手机模型组件

随附的 mockup.png 包含以下预先测量的数值：

const MK_W = 1022;  // mockup image width
const MK_H = 2082;  // mockup image height
const SC_L = (52 / MK_W) * 100;   // screen left offset %
const SC_T = (46 / MK_H) * 100;   // screen top offset %
const SC_W = (918 / MK_W) * 100;  // screen width %
const SC_H = (1990 / MK_H) * 100; // screen height %
const SC_RX = (126 / 918) * 100;  // border-radius x %
const SC_RY = (126 / 1990) * 100; // border-radius y %

function Phone({ src, alt, style, className = "" }: {
  src: string; alt: string; style?: React.CSSProperties; className?: string;
}) {
  return (
    <div className={`relative ${className}`}
      style={{ aspectRatio: `${MK_W}/${MK_H}`, ...style }}>
      <img src="/mockup.png" alt=""
        className="block w-full h-full" draggable={false} />
      <div className="absolute z-10 overflow-hidden"
        style={{
          left: `${SC_L}%`, top: `${SC_T}%`,
          width: `${SC_W}%`, height: `${SC_H}%`,
          borderRadius: `${SC_RX}% / ${SC_RY}%`,
        }}>
        <img src={src} alt={alt}
          className="block w-full h-full object-cover object-top"
          draggable={false} />
      </div>
    </div>
  );
}

iPad 模型组件（仅 CSS）

iPad 使用纯 CSS 边框，与使用预先测量 PNG 边框的 iPhone 模型不同。这样无需单独的模型素材，并且在任何分辨率下都能保持简洁。

**关键尺寸：**边框的宽高比必须为 770/1000，这样内部屏幕区域（宽度的 92% × 高度的 94.4%）才能匹配 iPad 截图的 3:4 宽高比。比例不正确会导致出现黑边或截图拉伸。

function IPad({ src, alt, style, className = "" }: {
  src: string; alt: string; style?: React.CSSProperties; className?: string;
}) {
  return (
    <div className={`relative ${className}`}
      style={{ aspectRatio: "770/1000", ...style }}>
      <div style={{
        width: "100%", height: "100%", borderRadius: "5% / 3.6%",
        background: "linear-gradient(180deg, #2C2C2E 0%, #1C1C1E 100%)",
        position: "relative", overflow: "hidden",
        boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.1), 0 8px 40px rgba(0,0,0,0.6)",
      }}>
        {/* Front camera dot */}
        <div style={{
          position: "absolute", top: "1.2%", left: "50%",
          transform: "translateX(-50%)", width: "0.9%", height: "0.65%",
          borderRadius: "50%", background: "#111113",
          border: "1px solid rgba(255,255,255,0.08)", zIndex: 20,
        }} />
        {/* Bezel edge highlight */}
        <div style={{
          position: "absolute", inset: 0, borderRadius: "5% / 3.6%",
          border: "1px solid rgba(255,255,255,0.06)",
          pointerEvents: "none", zIndex: 15,
        }} />
        {/* Screen area */}
        <div style={{
          position: "absolute", left: "4%", top: "2.8%",
          width: "92%", height: "94.4%",
          borderRadius: "2.2% / 1.6%", overflow: "hidden", background: "#000",
        }}>
          <img src={src} alt={alt}
            style={{ display: "block", width: "100%", height: "100%",
              objectFit: "cover", objectPosition: "top" }}
            draggable={false} />
        </div>
      </div>
    </div>
  );
}

与 iPhone 相比，iPad 布局的调整：

• iPad 模型使用 width: "65-70%"（iPhone 为 82-86%）——相对于高度而言，iPad 更宽
• 双 iPad 布局与双手机布局的方式相同，但宽度需要调整
• 标题字体大小应根据 canvasW 缩放（iPad 为 2064，iPhone 为 1320）
• 可以重复使用相同的幻灯片设计和文案——只需将 Phone 组件替换为 IPad，并调整位置

字体排版（与分辨率无关）

所有尺寸均相对于画布宽度 W：

元素	大小	字重	行高
类别标签	W * 0.028	600（半粗体）	默认
标题	W * 0.09 到 W * 0.1	700（粗体）	1.0
主标题	W * 0.1	700（粗体）	0.92

手机摆放模式

在不同幻灯片之间变换布局——绝不要连续两次使用相同布局：

居中手机（主视觉、单项功能）：

bottom: 0, width: "82-86%", translateX(-50%) translateY(12-14%)

两部手机叠放（对比）：

Back: left: "-8%", width: "65%", rotate(-4deg), opacity: 0.55
Front: right: "-4%", width: "82%", translateY(10%)

手机 + 悬浮元素（仅当用户提供了组件 PNG 时使用）：

Cards should NOT block the phone's main content.
Position at edges, slight rotation (2-5deg), drop shadows.
If distracting, push partially off-screen or make smaller.

“更多功能”幻灯片（可选）

使用深色／高对比度背景，搭配应用图标、标题（“还有更多精彩功能。”）和功能标签。可以加入“即将推出”部分，并使用颜色更暗的标签。

第 6 步：导出

为什么使用 html-to-image，而不是 html2canvas

html2canvas 在 CSS 滤镜、渐变、投影、背景滤镜和复杂裁剪方面表现不佳。html-to-image 使用浏览器原生 SVG 序列化，可忠实处理所有 CSS。

导出实现

import { toPng } from "html-to-image";

// Before capture: move element on-screen
el.style.left = "0px";
el.style.opacity = "1";
el.style.zIndex = "-1";

const opts = { width: W, height: H, pixelRatio: 1, cacheBust: true };

// CRITICAL: Double-call trick — first warms up fonts/images, second produces clean output
await toPng(el, opts);
const dataUrl = await toPng(el, opts);

// After capture: move back off-screen
el.style.left = "-9999px";
el.style.opacity = "";
el.style.zIndex = "";

导出矩阵

如果项目支持多种语言和主题，请添加批量导出辅助工具，让用户可以一次性导出所有内容：

const jobs = LOCALES.flatMap(locale =>
  ACTIVE_THEME_IDS.flatMap(themeId =>
    ACTIVE_DEVICES.flatMap(device =>
      getSlidesFor(device).map((slide, index) => ({
        locale,
        themeId,
        device,
        index,
        slide,
      })),
    ),
  ),
);

文件命名应便于排序并保留元数据：

01-hero-en-clean-light-iphone-1320x2868.png
01-hero-ar-dark-bold-ipad-2064x2752.png

至少支持：

1. 导出当前幻灯片
2. 导出当前语言／设备／主题的所有幻灯片
3. 导出当前主题的所有语言版本
4. 仅当用户明确提出要求时，导出完整矩阵

关键规则

• 双重调用技巧：第一次调用 toPng() 会延迟加载字体／图片；第二次才能生成干净的输出。否则，导出结果会是空白。
• 在屏幕上进行捕获：调用 toPng 前，临时将元素移至 left: 0。
• 屏幕外容器：使用 position: absolute; left: -9999px（不要使用 fixed）。
• 调整尺寸：将数据 URL 加载到 Image 中，再绘制到目标尺寸的 canvas 上。
• 顺序导出之间延迟 300ms。
• 在屏幕外容器上设置 fontFamily。
• 编号文件名：为导出文件添加零填充索引前缀，以确保排序正确：01-hero-1320x2868.png、02-freshness-1320x2868.png 等。使用 String(index + 1).padStart(2, "0")。

第 7 步：最终 QA 检查

将页面交付给用户之前，请根据以下清单检查每张幻灯片：

信息质量

• 每张幻灯片只讲一个观点：如果标题传达了两个观点，就将其拆分或简化
• 第一张幻灯片最有力：主视觉幻灯片应立即传达主要优势
• 一秒内读懂：如果无法在一臂距离之外瞬间看懂，就重写

视觉质量

• 布局不要连续重复：相邻幻灯片不应显得像套用模板
• 装饰元素应服务于内容：应增添活力，但不要遮挡应用 UI
• 保持视觉节奏：当幻灯片数量足够多时，至少加入一张对比幻灯片

导出质量

• 缩放至选定的导出尺寸后，文字或素材没有被裁切
• 截图在手机或 iPad 边框内对齐正确
• 文件名通过零填充数字前缀正确排序
• 同一预设中的所有幻灯片均一致地应用主题令牌
• 本地化文案翻译后仍能完整显示，尤其是包含长单词的语言
• RTL 幻灯片经过专门设计，而非仅仅翻转布局

交付说明

展示完成的作品时：

1. 简要说明幻灯片之间的叙事脉络
2. 提及有意采用对比或不同布局处理的幻灯片
3. 说明对品牌语调、文案或缺失素材所做的假设

常见错误

错误	修正方法
所有幻灯片看起来都一样	变换手机的位置（居中、靠左、靠右、两部手机、不放手机）
装饰元素看不见	增大尺寸并提高不透明度——宁可太显眼，也不要看不见
文案太复杂	用「手臂伸直时一秒看懂」来检验
浮动元素挡住手机	将其移到屏幕边缘之外或手机上方
背景纯白或纯黑	使用渐变——哪怕很微妙，也能增加层次感
太杂乱	移除浮动元素，简化为手机加说明文字
太简单或空洞	添加更大的装饰元素，并在边缘放置浮动元素
标题中使用「和」	拆分成两张幻灯片，或只选一个想法
幻灯片之间缺乏视觉对比	混合使用浅色和深色背景
导出内容为空白	使用双重调用技巧；截图前将元素移到屏幕内