lijianfei.com

对于每一位独立开发者（Indie Hacker）和移动端出海团队而言，应用开发生命周期中最让人头疼且极度消耗心力的环节，往往不是写代码，而是上架前的应用商店截图（App Store & Google Play Screenshots）制作。

几乎所有开发者都在这个阶段踩过以下“深坑”：

1. 商业 SaaS 订阅刺客：像 AppMockUp、Previewed、Hotpot 等在线工具，动辄按月收费 $19 ~ $29 美元；免费版要么强制加水印、要么锁定 4K 高清导出和批量下载；
2. Figma 模板太重太折腾：非专业设计师打开动辄几个 G 的社区 Figma 模板，光是对齐图层、换机模、调坐标就折腾半天，导出的尺寸还经常被 App Store Connect 报错驳回；
3. 致命的“说明书式截图”认知陷阱：把截图当成了功能说明书，直接往框里塞满密密麻麻的原型界面，在手机搜索列表页里文字比蚂蚁还小，用户 1 秒划走，导致转化率（CVR）奇低；
4. 全套尺寸地狱：iPhone 6.9"（1320×2868）、6.7"（1290×2796）、6.5"（1242×2688）、iPad 12.9"、Android 手机、7寸/10寸平板，外加 Google Play 1024×500 宣传横幅，每次改个字都要重复机械劳动几十次。

知名开源作者 Parth Jadhav（曾打造爆款工具 Tkinter-Designer）开源的 ParthJadhav/app-store-screenshots 彻底终结了这一痛点：它是一个专为现代 AI Coding Agent（Claude Code、Cursor、Windsurf、Antigravity、Codex）打造的自包含能力库（Agent Skill）！

只需一句话，Agent 就会自动在你的本地仓库中脚手架出一套高颜值的 Next.js + Tailwind + ShadCN 专属截图设计工作台。它首创了 Connected Canvas（跨屏连贯画布），让手机机模与装饰元素能像广告大片一样在相邻多张截图中穿梭联动，并严格遵循一套工业级的《高转化设计质量圣经》，生成的所有规格尺寸直出可过审，目前已被多款 App Store 官方上架应用（如 Bloom Coffee Shelf Recipe）实盘验证！

💡 核心认知革新：截图是广告，不是说明书！

在翻阅该项目的核心规范时，第一行就赫然印着这样一句触动灵魂的设计原则：

“Screenshots are advertisements, not documentation. Every screenshot sells one idea. If you're showing UI, you're doing it wrong — you're selling a feeling, an outcome, or killing a pain point.”
(截图是广告，不是说明书。每张截图只兜售一个核心诉求。如果你只是在罗列界面，那你就做错了——你应该卖的是一种情绪、一种最终成果，或是消灭一个用户痛点！)

常见低转化截图（说明书模式）：
[iPhone 界面] ── 顶部小字：“我们的主页面支持搜索、分类和过滤”
观众心理：信息过载、字小看不清、关我什么事？划走！

高转化广告大片截图（ParthJadhav 模式）：
[跨屏倾斜机模 + 巨大加粗重音标题 + 视觉锚点] ── “3 秒锁定心仪房源，省下 50% 预算”
观众心理：直击痛点、一眼抓住利益点、产生点击冲动！

该工具的所有架构与自动化逻辑，全部紧密围绕这一核心理念构建。

🏗️ 系统架构：为 AI Agent 量身定制的本地设计工作台

传统的截图生成器要么是封闭的网页，要么是死板的代码模板。而 app-store-screenshots 的定位是一个 可与代码智能体深度协同的交互式本地编辑器（Local-First Editor）：

flowchart TD
    subgraph AgentLayer["1. AI Agent 智能感知层"]
        Prompt["开发者发出指令：制作一套 App Store 营销截图"]
        Agent["AI Coding Agent: Claude Code / Cursor / AGY"]
        ContextScan["代码库上下文洞察：分析图标 / 核心卖点 / 关键流程"]
        Prompt --> Agent
        Agent --> ContextScan
    end

    subgraph ScaffoldLayer["2. Next.js + ShadCN 本地脚手架"]
        Skill["npx skills add ParthJadhav/app-store-screenshots"]
        Template["注入自包含模板：ShadCN + Tailwind + HTML-to-Image"]
        JsonState["状态持久化：app-store-screenshots.json"]
        Skill --> Template
        Template --> JsonState
    end

    subgraph EditorEngine["3. Connected Canvas 连贯跨屏画布引擎"]
        Canvas["全景贯通工作区 (DeckCanvas)"]
        CrossSeam["跨屏联动计算 (Cross-screen Transforms)"]
        DeviceFrames["真实物理机模 (iPhone / iPad / Android)"]
        Inspector["实时属性检查器 (文案 / 旋转 / 阴影 / 堆叠)"]
        Canvas --> CrossSeam
        Canvas --> DeviceFrames
        Canvas --> Inspector
    end

    subgraph ExportEngine["4. 一键商店规范打包导出"]
        ZipExport["一键批量打包 (Bulk Zip Export)"]
        IosSizes["iOS 规格：6.9寸 / 6.7寸 / 6.5寸 / iPad 12.9寸"]
        AndroidSizes["Android 规格：手机 / 7寸平板 / 10寸平板 / 1024x500 横幅"]
        ZipExport --> IosSizes
        ZipExport --> AndroidSizes
    end

    ContextScan --> Skill
    JsonState --> Canvas
    Canvas --> ZipExport

核心亮点拆解：

1. Connected Canvas（跨屏连贯画布）：
   过去的工具都是一张图一张图单独画，想要做“一部手机斜跨两张截图”的效果，非得在 Figma 里手工切图对齐不可。该编辑器直接在同一个连通视口中展开整条长卷轴，你可以将手机、文字贴纸、动态流光随意拖拽放置在两张图的分界线上，导出时系统会自动做亚像素级的精准矩形裁切！
2. Git 友好与本地优先（Local-First）：
   不依赖任何云端数据库，全量项目配置序列化保存在根目录下的 app-store-screenshots.json。你可以像提交代码一样用 Git 记录每一版营销文案的迭代，团队协作极其清爽。
3. 真实物理机模与多端一键对齐：
   内置精准的 iPhone 16 Pro 钛金属窄边框、iPad Pro 极窄边、Android 现代旗舰机模。无论是竖屏（Portrait）、横屏（Landscape），还是 Google Play 要求的 1024×500 Feature Graphic，只需切换设备选项卡，同一套设计语言即可自动重排适配！

📐 设计圣经：高转化画面的四大“工业质检门禁”

该项目最值钱的部分，不仅是代码，而是藏在 style-prompts/_QUALITY_BAR.md 里的工业级设计硬规则。无论你让 AI 生成何种风格的截图，都必须严格接受这套门禁考核：

flowchart TD
    subgraph QualityBar["Universal Quality Bar 工业质检门禁"]
        M1["1. 构图黄金比例：机模高度占 68%~82%，文案+机模占 80% 以上，禁止大片空白"]
        M2["2. 文字防爆框：单词宽度超 88% 自动折行或等比缩放，严禁字母切断"]
        M3["3. 跨屏穿透克制：5+ 张图最多 1~2 处，穿透 10%~30%，单张独立可读"]
        M4["4. 反贴图塑料感：双色阶光影 + 地面真实投影 + 微噪点质感 + 4.5比1 对比度"]
    end

    subgraph Styles["六大经过商业验证的实战设计风格"]
        S1["01 复古胶管吉祥物风：习惯打卡 / 番茄钟 / 记账"]
        S2["02 情绪暗调质感风：约会交友 / 轻奢品鉴 / 冥想"]
        S3["03 纸质微拟物贴纸风：手账日记 / 便签备忘 / 清单"]
        S4["04 柔和马卡龙伴侣风：情侣空间 / 宠物养成 / 情感"]
        S5["05 极简社论手绘风：生产力工具 / 学术阅读 / 导图"]
        S6["06 高光 3D 潮酷风：视频剪辑 / 滤镜相机 / 潮流"]
    end

    QualityBar --> Styles

门禁一：构图比例严禁大面积“死灰空白”

• 手机占比硬指标：只要画面中有手机，机模必须占据画布总垂直高度的 68% ~ 82%！低于 65% 会让手机看起来很小、画面极度空旷廉价；
• 视觉总充盈度：主标题 + 手机机模 必须占据全画布 80% 以上的高度的空间，上下边距各留 10% 左右。绝不允许出现大于 22% 页面高度的无意义空白死带；
• 严禁居中浮空：手机绝不能上下两头都空着悬在正中间。要么机模底部直接贴合底边（Flush Bottom），要么底部自然冲出画框（Bottom Bleed）。

门禁二：字号自动回退与防爆框

• 商店搜索缩略图非常小，文字必须足够大；
• 但长单词在不同语言下极易冲破边界。规则要求：单个单词的实测宽度若超过画布的 88%，必须触发降级保护 —— 自动换行、等比缩小字号或连字符折叠，严禁任何字母被画框硬生生切断。

门禁三：跨屏穿透的“克制艺术”

跨屏连贯画布很酷，但滥用会变成灾难：

• 出现频次：一套 5+ 张的截图套图中，最多只能出现 1~2 处相邻跨屏穿透；
• 单张独立可读性（Standalone Rule）：导出的每一张 PNG 即使单独看，也必须是一张表意完整的广告。绝不能发生“用户单独看第 2 张图完全不知道在讲什么”的荒谬情况；
• 穿透比例：跨屏元素穿入邻屏的比例严格控制在 10% ~ 30% 之间（超过 40% 会让画面看起来像切图事故）；
• 绝对禁区：主标题文字、应用名字、价格标签、评分、人物核心五官绝对禁止被分割线切断！允许穿透的只能是机模斜角、背景渐变、微光流束、路线图轨迹或漂浮小贴纸。

门禁四：反“剪贴画感”（Anti-Clipart 抛光门禁）

很多 AI 生成的插画或贴纸看起来充满“廉价塑料感”。该项目设立了强制性 5 选 3 抛光标尺：

1. 必须包含双色阶光影（基础色 + 5~15% 阴影面 + 5~10% 高光边缘，拒绝纯平单色）；
2. 地面真实投影（角色/物体下方必须带有 10~25% 不透明度的微模糊椭圆投地阴影）；
3. 表面微质感（半色调网点、纸张纤维、胶片噪点，至少 4% 不透明度）；
4. 体积感轮廓（内阴影或加粗受光暗线）；
5. 严苛的对比度（所有大字与背景之间必须通过 WCAG AA 4.5:1 局部像素对比度检测）。

🎨 六大经过商业检验的实战视觉风格

项目中自带了 6 套开箱即用的高阶风格提示词模板（Style Prompts），覆盖了当前 App Store 最吸量的主流赛道：

🚀 极速上手：5 分钟构建你的 App Store 截图套图

第一步：在项目中安装 Skill

如果你使用的是 Claude Code、Codex、Cursor、Windsurf 或 Antigravity：

# 通过 npx skills 全局添加
npx skills add ParthJadhav/app-store-screenshots -g

# 或针对特定 Agent 添加（如 claude-code）
npx skills add ParthJadhav/app-store-screenshots -a claude-code

也可以直接手动克隆到技能目录：

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

第二步：向你的 Coding Agent 发起需求

将你在 iOS 模拟器（建议使用 6.1" 或 6.9" 模拟器无黑边截取）捕获的原始应用截图放入项目，然后直接对 Agent 说：

帮我为我的习惯养成 App 制作一套 App Store 营销截图：
1. 目标平台：iPhone 6.9" 与 iPad 12.9"；
2. 数量：共 6 张幻灯片；
3. 风格选择：采用 01 复古胶管吉祥物风格（温暖米色底、粗圆字、复古小闹钟吉祥物）；
4. 核心诉求：第一张突出“告别拖延，像玩游戏一样坚持”；
5. 在第 2~3 张之间做一个连贯跨屏的大机模穿透效果。

Agent 会自动提取上下文，注入模板脚手架，并将文案预先填入 app-store-screenshots.json。

第三步：启动本地工作台与一键导出

# 启动本地设计工作台
bun dev    # 或 npm run dev / pnpm dev

在浏览器中打开 http://localhost:3000：

• 实时直观画布：直接在网页上缩放、拖拽调整手机角度和文字坐标；
• 实时切图预览：随时开启/关闭连贯画布视口；
• 一键导出全套规格：点击右上角 Export Bundle，系统通过 html-to-image 自动在后台将 6.9"、6.7"、6.5"、iPad、Android 等所有规格无损切片，打包成标准的 .zip 压缩包，直接解压就能上传至 App Store Connect 与 Google Play Console！

📊 横向全景对比表

💡 总结与建议

在独立开发领域，“酒香也怕巷子深”。多少优秀的 App 因为一套平庸干瘪的商店截图而在列表页无人问津，错失了巨大的自然流量。

ParthJadhav/app-store-screenshots 的伟大之处在于：

• 它把顶尖营销公司价值几千美元的高转化广告构图逻辑抽象成了标准化的设计门禁；
• 它用现代的前端技术栈（Next.js + ShadCN + Canvas）打造了一个原本只有专业工具才有的连贯跨屏设计台；
• 它完美顺应了 2026 年 AI Agent Native 的工作流趋势，让不懂设计的程序员只需一句话，就能拥有媲美一线大厂的商业级应用宣发物料。

如果你正在准备自己的下一款出海应用或 iOS 新品，强烈建议将该 Skill 纳入你的开发武器库！

🔗 开源项目与生态资源

• GitHub 官方仓库：ParthJadhav/app-store-screenshots
• 官方真实落地范例：Bloom Coffee Shelf Recipe on the App Store
• 协议授权：MIT 开源协议（永久免费、商业友好）