【免费下载链接】app-store-screenshotsend to end app store screenshot creation using AI项目地址https://gitcode.com/gh_mirrors/ap/app-store-screenshots点击查看免费下载app-store-screenshots是一个面向 AI 编码 Agent 的 Skill它不生成一次性静态页面而是为你脚手架化一个生产就绪的 Next.js 编辑器用于制作 App Store 与 Google Play 的市场营销截图。本文基于仓库根目录的 README.md 及配套文档、模板源码与测试设施展开读完你能掌握如何用npx skills安装该 Skill 并驱动 Agent 搭建项目、连接画布Connected Canvas与隔离导出Isolated Mode两种模式的差异、全部 Apple/Google 所需导出尺寸的配置来源以及导出流水线如何通过“等待截图真正绘制完成”的指纹对比算法解决 WebKit 下空白设备屏的渲染缺陷。一、它是什么把截图当广告而不是 UI 文档该仓库的定位在 README.md 开篇一句话说明“A skill for AI coding agents that scaffolds a production-ready Next.js editor for App Store and Google Play marketing screenshots”——它交付的不是图片本身而是一个带连接画布、真实设备外框、检查器Inspector控制、持久化项目状态与一键导出打包的完整编辑器。其核心设计原则写得很直白skills/app-store-screenshots/SKILL.md 的 Core Principle 一节截图是广告不是文档。每一张截图只卖一个观点——一种感受、一个结果或消灭一个痛点如果你只是展示 UI就做错了。这个原则贯穿了仓库里的文案库与设计规范每张幻灯片只讲一个清晰的用户收益标题必须通过“一秒缩略图测试”相邻幻灯片要变换布局与设备摆放跨屏元素绝不能切分必要文字或关键 UI导出的每张裁剪图单独看也必须成立。README 同时给出了一个真实案例作为事实支撑用它生成的截图被 Bloom Coffee Shelf Recipe 采用的例子提交进了 App Store原文为外部商店链接此处仅陈述事实不附外部地址。二、安装与首次使用2.1 通过 npx skills 安装# 本地安装 npx skills add ParthJadhav/app-store-screenshots # 全局安装 npx skills add ParthJadhav/app-store-screenshots -g # 为特定 Agent 安装 npx skills add ParthJadhav/app-store-screenshots -a claude-code该方式兼容 Claude Code、Cursor、Windsurf、OpenCode、Codex 等所有 skills 协议支持的 Agent。2.2 手动安装git clone https://github.com/ParthJadhav/app-store-screenshots ~/.claude/skills/app-store-screenshots2.3 使用方式安装后直接向编码 Agent 提出需求即可Build App Store and Google Play screenshots for my app.Skill 会引导 Agent 先询问应用背景、源截图、目标平台、语言、视觉方向与幻灯片数量再生成编辑器项目。README 给出了四个可复用的提示词范例习惯追踪 App、个人财务 App、Mac 菜单栏工具、多语言学习 App其要点是一句话说清 App 做什么、按优先级列出 3–5 个功能、指明平台与设备、描述视觉风格、给出幻灯片数量、说明需要的语言或 RTL 语言、提供源截图路径/App 图标/风格参考。提示截取源 iPhone 截图时6.1 英寸模拟器通常是最省事的起点因为它在设备框内需要的手动图片调整最少。三、脚手架会生成什么从空目录开始时Skill 会把内置模板位于 skills/app-store-screenshots/template/整份复制进你的工作目录得到如下结构继承自 README 的 What Gets Scaffoldedproject/ ├── public/ │ ├── mockup.png │ ├── app-icon.png │ └── screenshots/ │ ├── apple/ │ │ ├── iphone/{locale}/01.png │ │ ├── ipad/{locale}/01.png │ │ ├── tvos/{locale}/01.png │ │ ├── watchos/{locale}/01.png │ │ ├── carplay/{locale}/01.png │ │ └── mac/{locale}/01.png │ └── android/ │ ├── phone/{locale}/01.png │ ├── tablet-7/portrait/{locale}/01.png │ ├── tablet-10/landscape/{locale}/01.png │ └── feature-graphic/{locale}/01.png ├── app-store-screenshots.json ├── src/app/ │ ├── layout.tsx │ └── page.tsx ├── src/components/editor/ │ ├── screenshot-editor.tsx │ ├── toolbar.tsx │ ├── sidebar.tsx │ ├── inspector.tsx │ ├── preview-stage.tsx │ ├── slide-canvas.tsx │ ├── screenshot-picker.tsx │ └── device-frames.tsx └── src/lib/ ├── constants.ts ├── defaults.ts ├── storage.ts ├── image-cache.ts ├── export-render.ts └── types.ts模板的 template/README.md 对编辑器内部结构有更细的说明slide-canvas.tsx是数据驱动的屏/deck 渲染器承载所有布局device-frames.tsx产出 iPhone、iPad、Apple TV、Apple Watch、CarPlay 中控屏、Mac 窗口、Android 手机/平板与 Feature Graphic 等全部设备框constants.ts存放画布尺寸、导出尺寸、主题、字体与设备框比例等全部“魔法数字”storage.ts提供useProject()钩子负责自动保存与撤销重做历史。模板的 package.json 明确了运行前提Node.js 20.9engines: node 20.9.0包管理器任选 bun/pnpm/yarn/npm脚本为标准的dev/build/start/typecheck/test:e2e。脚手架流程本身也写进了 SKILL.md检测包管理器优先级bun pnpm yarn npm、cp -R SKILL_DIR/template/. $PWD/复制模板尾部/.确保复制.gitignore等点文件、bun install安装依赖、把用户截图放进上述目录布局、可选地预填app-store-screenshots.json的初始文案最后bun dev启动开发服务器默认http://localhost:3000。四、编辑器 UI连接画布是核心能力README 的 Current Editor UI 一节逐项列出了编辑器的能力下面按重要度归纳并给出源码佐证位置路径均相对于模板目录 skills/app-store-screenshots/template/连接画布Connected canvas整条截图带平铺在一块水平画布上手机、标题文案与装饰元素可以拖动跨越相邻屏幕边界然后每一屏导出为精确裁剪。对应组件是src/components/editor/preview-stage.tsxResizeObserver 缩放的连接画布。隔离模式Isolated mode保证旧项目中画布外的元素不会泄漏进相邻屏的导出专为保护存量项目设计。屏幕侧栏添加、选中、拖拽排序屏幕带实时缩略图dnd-kit实现。Inspector从右侧面板编辑布局、标签、标题、截图、元素堆叠与变换标题旁的Copy ideas菜单可直接插入经过验证的文案公式数据来自src/lib/copy-ideas.ts。主题选择器工具栏切换调色板预设18 个命名风格各有一个对应预设。Style Lab并排预览同一卡组 4 套完整外观调色板、字体、布局节奏与场景可用 Colors/Type/Layout/Scene 四把“锁”保留满意的部分其余部分 Shuffle/Remix结果以单个可撤销步骤写入。Scene Playground一次性重调所有屏幕的背景渐变、纯色、极光、聚光、网格、圆点、横线可跨整条截图带流动、装饰、设备阴影/辉光/3D 倾斜−30°~30°与标题字重、大小写、对齐。Magnifier放大镜在任意屏幕上加一个 loupe放大截图中某个细节可瞄准位置、调缩放1.5–5×与形状圆形/圆角方形随元素一样可拖拽。平台/设备切换iOS、Mac、Android 三个 Tab 的卡组并存共享同一套编辑器工作流iOS 下可选 iPhone、iPad、Apple TV、Apple Watch、CarPlayAndroid 下可选手机、平板与 Feature GraphicMac Tab 是单一 16:10 卡组。自动保存通过/api/project写盘并镜像到localStorage写盘前检测磁盘上的更新修订版本避免覆盖另一个 Tab 或 Agent 的改动保存失败可重试未保存离开会触发浏览器警告。导出打包下载按 平台/设备/分辨率/语言 组织的 zip。模板 README 还补充了两条关键持久化细节编辑器先读localStorage快速首绘再与项目文件对账若文件端点不可用自动保存会被阻塞防止陈旧缓存覆盖磁盘文件。每个编辑器请求都携带加载时的 revisionETagPOST /api/project以If-Match提交过期写入返回 HTTP 412 冲突而非静默覆盖。五、导出尺寸全表与 constants.ts 逐项对应README 的 Export Sizes 给出了三个商店的完整尺寸表。这些数字并非文档杜撰而是逐项定义在 constants.ts 的CANVAS与EXPORT_SIZES中见上文文件且注释明确 Apple TV / Watch 的尺寸是“通过asc screenshots sizes --all从 App Store Connect 自身元数据读取并验证”的。Apple App Store设备分辨率iPhone 6.91320 x 2868iPhone 6.51284 x 2778iPhone 6.31206 x 2622iPhone 6.11125 x 2436iPad 132064 x 2752iPad Pro 12.92048 x 2732Apple TV3840 x 2160, 1920 x 1080Apple Watch Ultra422 x 514, 410 x 502Apple Watch Series 10416 x 496Apple Watch Series 7396 x 484Apple Watch Series 4368 x 448Apple Watch Series 3312 x 390CarPlayiPhone 槽位横屏2868 x 1320, 2778 x 1284, 2622 x 1206, 2436 x 1125CarPlay 没有独立的 App Store 截图槽位——CarPlay 应用随 iPhone 应用一起分发所以 CarPlay 截图上传进 iPhone 槽位iPhone 槽位接受两种方向CarPlay 卡组因此以横屏 iPhone 尺寸导出并配一块车载中控外框。constants.ts中的CARPLAY_RATIO 800 / 480取自 Apple CarPlay Simulator 的 Standard 预设5:3若要针对 Minimum 748×456、Widescreen 1920×720 等其他预设修改该常量即可。Mac App Store设备分辨率Mac (16:10)2880 x 1800, 2560 x 1600, 1440 x 900, 1280 x 800Mac 拥有独立的MacTab因为 App Store Connect 把 macOS 列为与 iOS 应用分开的平台。其卡组导出到macos/mac/WxH/locale/与ios/...、android/...并列。Mac 窗口外框的内容区恰好是 16:10MAC_TITLE_BAR 0.045的标题栏之下因此全屏 16:10 截屏可以直接填满而无需裁剪其余比例从底部做 cover 裁剪。Google Play Store设备分辨率手机竖屏1080 x 19207 平板竖屏1200 x 19207 平板横屏1920 x 120010 平板竖屏1600 x 256010 平板横屏2560 x 1600Feature Graphic1024 x 500设计策略是按每个设备的最大尺寸设计更小尺寸全部下采样。CANVAS中每个设备的画布就是该策略的落地——iPhone 画布 1320×2868、Apple TV 4K1920×1080 是其精确 2× 下采样、Apple Watch 按最大槽位 Ultra 422×514 设计使更小的表尺寸只会降采样而不会升采样。六、导出流水线为什么要“等到截图真正画出来”这是本仓库最有源码价值的一环。README 提到“所有导出都会等待每张截图真正绘制完成Safari/WebKit 异步解码图片否则宁可警告也不会静默写出空白设备”而完整实现在 export-render.ts 中文件头部注释把问题讲得很清楚html-to-image把 DOM 节点序列化成 SVGforeignObject再把 SVG 当图片画到 canvas 上只画一次。但 WebKit 是异步解码嵌套在 SVG 图片里的imgdata URL 的——那一次绘制可能只捕获到标题、背景与 CSS 设备框而设备屏幕里的截图还是空白且不报错。Chrome 首绘即画所以该 bug 看起来“时好时坏”。源码给出的修复方案export-render.ts#L4-L26只嵌入被捕获幻灯片内的图片。连接画布会把所有屏幕并排渲染若全嵌入会让每个 SVG 膨胀 N 倍先渲染一版“全部图片置空”的基线把 SVG 里每个img的src换成 1×1 透明 GIF见blankImages()以此确定“图片缺失时各区域长什么样”反复绘制真实 SVG直到两个条件同时满足才导出每个可见图片区域的降采样指纹12×12 像素与基线不同说明图片出现了且连续两次绘制指纹一致说明渲染稳定。轮询间隔 50ms超时 8 秒超时仍未出现的图片计入missingImages编辑器据此弹出点名到具体屏幕的警告 toast。细节上还有两处工程判断对中心区域透明的图片如空屏的 iPhone mockup 框、环形 logo改用整框而非中心 60% 做指纹比较alphaCoverage()的 edges-only 分支最终toPng对目标尺寸采用cover 而非 stretch——Apple Watch 422×514 → 312×390 这类相差几个百分点的槽位拉伸会压扁设备框cover 只会从边缘裁掉几个像素。此外导出产物是不透明 24-bit RGB PNGGoogle Play 拒绝带 alpha 通道的 PNG而 canvas 只能产出 RGBA因此png-rgb.ts配合小 worker 池负责压掉 alpha 通道。遇到导出空白/黑屏时的排查步骤继承自 README 与 SKILL.md读导出 toast 里“screenshots may be missing”的点名、确认源截图是 RGB 而非 RGBA、核对public/下的引用路径确实存在导出前会对之前缺失的路径重试。七、项目状态app-store-screenshots.json 是事实来源app-store-screenshots.json是应用名、当前平台、当前设备、语言列表、主题、连接画布模式、场景scene、已保存的 Style Lab 外观、幻灯片、截图路径、放大镜与变换的唯一事实来源git 可追踪、可恢复。模板自带的示例见 app-store-screenshots.json其中schemaVersion: 2、connectedCanvas: true、locales、按设备分组的slidesByDevice等字段一览无余运行期上传写入public/screenshots/uploaded/hash.png经/api/upload哈希落盘解码后才存原始字节编辑器先读localStorage快速首绘再与项目文件对账旧版项目文件在加载时迁移到 schema v2且保持 legacy 卡组隔离除非它已显式开启连接模式自定义主题放在src/lib/constants.ts的THEMES中未知主题 id 回退到clean-light并在界面告警。storage.ts 中的加载逻辑印证了迁移语义connectedCanvas只接受显式布尔值其余情况由代码兜底为隔离模式解析结果统一写回schemaVersion: PROJECT_SCHEMA_VERSION即 2。模板 README 的 Migration model 进一步说明两种迁移路径——被动运行时迁移旧项目直接在新编辑器中打开保持connectedCanvas: false使旧导出视觉不变与显式 Skill 迁移SKILL.md 的 Step 0 探测到旧实现并经用户确认后原地升级 UI、保留用户资产、合并package.json与自定义主题、写schemaVersion: 2且全程先做仓库外备份。SKILL.md 为此提供了完整的备份/保留/覆盖/还原 shell 序列与一段 Node 强制转换脚本包括对屏幕 id 去重、layout 白名单校验、locale 代码正则校验/^[a-zA-Z0-9](?:[-_][a-zA-Z0-9])*$/等细节。八、编辑器工作流七步继承 README 的 Editor Workflow从模拟器、仿真器或真机截取真实应用截图让 Agent 脚手架化或迁移截图项目运行开发服务器并打开编辑器用侧栏组织屏幕用 Inspector 编辑文案、布局、截图与元素根据元素是否需要跨屏选择 Connected 或 Isolated 模式打开Style Lab对比完整外观或用Scene手动调背景、景深与标题风格点击Export bundle下载商店就绪的 PNG。上传文件保存在public/screenshots/uploaded/卡组状态保存在app-store-screenshots.json——两者都提交新机器git clone后才能完整复现卡组。九、风格与文案18 个命名风格 标题文案库Skill 附带 18 个命名视觉风格每个都有深度规范调色板、字体、标题强调、布局节奏、装饰密度、跨屏时刻、文案语气位于 style-prompts/ 目录共 18 个规范文件加一份 质量基线 _QUALITY_BAR.md。README 的风格适用表风格适合Hand-Drawn Editorial Tasks有设计品味的生产力、任务、笔记Retro Rubberhose Mascot带吉祥物的温馨习惯与健康 AppMoody Curated Dating会员制社交、晚餐俱乐部、高端生活方式Paper Sticker Skeuomorphic学生规划、笔记、兴趣类 AppDreamy Pastel Couples情侣、异地、宠物陪伴Glossy 3D K-Beauty Creator创作者经济、粉丝社区、美妆Liquid Glass Aurora高端 iOS 原生工具、AI 助手Swiss Grid Bold金融、开发者工具、分析、B2BNeon Athletic Night健身、跑步、力量、恢复Magazine Cover Editorial美食、菜谱、阅读、旅行、咖啡Candy Pop Social社交、好友、活动、Z 世代消费Soft Clay Wellness冥想、睡眠、日记、健康Midnight Glow ProAI、开发工具、专业生产力Risograph Zine音乐、活动、播客、独立创意Bento Keynote Grid功能密集型生产力、健康、金融、工具Toybox Primary儿童学习、家庭、新手、休闲游戏Quiet Japandi笔记、日历、阅读、茶、极简工具Vintage Travel Poster旅行、地图、户外、天气、公路旅行在提示词里点名某个风格例如 “use Swiss Grid Bold”Agent 会应用整份规范每个命名风格在工具栏主题选择器中都有一个同名调色板预设——这从constants.ts的THEMES记录可以直接验证从clean-light、dark-bold等 5 个基础预设到swiss-grid-bold、liquid-glass-aurora等 18 个命名风格每个主题都定义了bg/bgAlt/fg/fgAlt/accent/muted六项色板。标题文案方面copy-ideas.md 提供按“deck 槽位”hero / differentiator / feature / proof / closer组织的公式、13 个 App 品类的现成句子、eyebrow 标签、弱→强改写表、四段式叙事弧与本地化注意同一套公式的精简版也内置在编辑器 Inspector 的Copy ideas菜单src/lib/copy-ideas.ts。其“铁律”每条标题一个想法不用 “and” 连接两个、用 1–2 音节常见词、每行 3–5 个词、换行是刻意的三种写法是“描绘一个时刻 / 陈述一个结果 / 消灭一个痛点”每屏给三个选项让用户挑。十、设计标准与常见错误设计标准README Design Standards截图是广告不是文档每张幻灯片只卖一个清晰的用户收益标题要通过一秒缩略图测试相邻幻灯片要变换布局与设备摆放跨屏元素绝不能切分必要文字或关键 UI导出的裁剪图作为独立截图必须仍然成立。SKILL.md 还给出了十条更细的视觉原则如“背景是设计过的表面绝不纯白”“标题占据画布上方 30–40%”“标题内至少一个词用不同强调”“证明性徽章只放第一屏”“手机框至少混用两种摆法”“每 2–3 屏打破一次手机方阵”“末屏用功能墙或手机马赛克”“导出前必做约 160px 宽的缩略图测试”。常见错误对照表继承自 SKILL.md全部可在源码中定位错误修正直接改page.tsx而不用编辑器回滚让改动在浏览器编辑器里发生从零重写设备外框设备框在src/components/editor/device-frames.tsx改那里截图没提交public/screenshots/...可以提交拖放上传也写入public/screenshots/uploaded/hash.png该目录与app-store-screenshots.json一起提交平板截图目录放错按android/tablet-7/portrait/{locale}/...的布局来Reset 清空了卡组Reset 会清空内存状态并把默认值重存进app-store-screenshots.json已提交就git checkout否则先导出导出空白看导出 toast 的 missing 警告后重导否则源 PNG 可能带 alpha压平为 RGB在 App Store Connect 找 CarPlay 槽位没有——CarPlay 截图传进 iPhone 槽位Mac 窗口出现两个标题栏源是单窗口截图自带标题栏——裁掉它或用全屏 16:10 截屏bun dev端口冲突模板默认next dev让 Next 自选下一个可用端口十一、技术栈、环境与自动化验证依赖用途Next.js开发服务器与应用壳React编辑器 UITypeScript项目与幻灯片状态的类型安全Tailwind CSS样式shadcn/ui Radix控件、对话框、下拉、提示html-to-image精确 PNG 渲染JSZip打包下载dnd-kit屏幕拖拽排序react-rnd画布元素拖拽与缩放运行要求Node.js 20.9 与 bun/pnpm/yarn/npm 之一模板 package.json 用engines字段硬性约束了前者。模板还内置了确定性的 E2E 验证体系docs/testing/e2e.md 描述覆盖矩阵bun install --frozen-lockfile bun run typecheck bun run build bun run test:e2e测试需要 Node.js 22.12 与已安装的 Google Chrome不需要任何模型账号或 API key。测试运行器在 4312 端口创建一份一次性模板副本项目保存、上传与字体都写入该副本绝不复用你正在使用的编辑器服务器SCREENSHOTS_E2E_PRODUCTION1则基于已有.next构建做生产验证。仓库根目录另有一组 bug-bash 脚本api-bug-bash.cjs、ui-bug-bash.cjs等用于回归验证配合 BUG_BASH.md 使用。十二、本地 API 契约编辑器后端一览模板自带四个本地 API供单服务器进程的本地编辑器使用无远程鉴权浏览器写请求需同源 JSONGET /api/project返回{ ok, state }与ETag修订号项目文件缺失时也返回实现见 route.tsPOST /api/project接收项目 JSON64 MiB 请求上限带If-Match拒绝过期写入HTTP 412未知 schema 版本、未知设备卡组、重复 id 或畸形元素数据会以 HTTP 400 拒绝POST /api/upload接收{ dataUrl }PNG/JPEG解码后 8 MiB、请求 12 MiB、6400 万像素存盘前先解码图片实现见 route.tsPOST /api/upload-font接收 base64 字体字节解码后 16 MiB服务端校验字体容器签名、长度与表边界编辑器浏览器端还额外做字体解码验证实现见 route.ts。上传均为原子写入项目与上传请求在编辑器侧 15 秒超时图片预加载 10 秒超时字体加载超过 15 秒则导出以可重试错误停止。/screenshots/uploaded/[filename]与/fonts/imported/[filename]两条路由保证服务器重启后含next start上传资产仍可访问只接受生成的哈希文件名与受支持扩展名。小结app-store-screenshots的价值链可以概括为AI Agent 负责搭建与迭代Next.js 编辑器负责可视化调整constants.ts定义全部商店尺寸契约export-render.ts保证像素级可靠的 PNG 产出app-store-screenshots.json让整套工作流可版本化、可迁移、可恢复。对开发者而言值得直接精读的三个入口是 constants.ts尺寸与主题的唯一事实来源、export-render.ts渲染稳定性的完整解法与 SKILL.mdAgent 侧的完整作业流程与设计规范它们分别对应“导出什么”“怎么导出得对”“如何组织整条生产流程”三个问题。赞分享【免费下载链接】app-store-screenshotsend to end app store screenshot creation using AI项目地址https://gitcode.com/gh_mirrors/ap/app-store-screenshots点击查看免费下载相关推荐AutoGPT Platform 商店数据块实战指南用 Get Store Agent Details 与 Search Store Agents 读写 Agent 商店AutoGPT Platform 商店数据块实战指南用 Get Store Agent Details 与 Search Store Agents 读写 Ag人工智能AI Agent自主智能体Agent 工作流工作流自动化后端前端RPCS3 入门PS3 模拟器从判断到流畅运行的完整路径RPCS3 入门PS3 模拟器从判断到流畅运行的完整路径 RPCS3 是一款免费开源的 PS3 模拟器同时内置调试器在 Windows / Linux虚拟化图形学调试器Gatsby Swag Store 开源电商项目完整指南如何快速搭建专属周边商店Gatsby Swag Store 开源电商项目完整指南如何快速搭建专属周边商店 Gatsby Swag Store 是一个基于 Gatsby 框架构建的开源上一篇Balena Etcher免费快速的跨平台镜像烧录终极解决方案下一篇从零掌握DriverStore ExplorerWindows驱动管理的终极解决方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
【免费下载链接】app-store-screenshotsend to end app store screenshot creation using AI项目地址https://gitcode.com/gh_mirrors/ap/app-store-screenshots点击查看免费下载app-store-screenshots是一个面向 AI 编码 Agent 的 Skill它不生成一次性静态页面而是为你脚手架化一个生产就绪的 Next.js 编辑器用于制作 App Store 与 Google Play 的市场营销截图。本文基于仓库根目录的 README.md 及配套文档、模板源码与测试设施展开读完你能掌握如何用npx skills安装该 Skill 并驱动 Agent 搭建项目、连接画布Connected Canvas与隔离导出Isolated Mode两种模式的差异、全部 Apple/Google 所需导出尺寸的配置来源以及导出流水线如何通过“等待截图真正绘制完成”的指纹对比算法解决 WebKit 下空白设备屏的渲染缺陷。一、它是什么把截图当广告而不是 UI 文档该仓库的定位在 README.md 开篇一句话说明“A skill for AI coding agents that scaffolds a production-ready Next.js editor for App Store and Google Play marketing screenshots”——它交付的不是图片本身而是一个带连接画布、真实设备外框、检查器Inspector控制、持久化项目状态与一键导出打包的完整编辑器。其核心设计原则写得很直白skills/app-store-screenshots/SKILL.md 的 Core Principle 一节截图是广告不是文档。每一张截图只卖一个观点——一种感受、一个结果或消灭一个痛点如果你只是展示 UI就做错了。这个原则贯穿了仓库里的文案库与设计规范每张幻灯片只讲一个清晰的用户收益标题必须通过“一秒缩略图测试”相邻幻灯片要变换布局与设备摆放跨屏元素绝不能切分必要文字或关键 UI导出的每张裁剪图单独看也必须成立。README 同时给出了一个真实案例作为事实支撑用它生成的截图被 Bloom Coffee Shelf Recipe 采用的例子提交进了 App Store原文为外部商店链接此处仅陈述事实不附外部地址。二、安装与首次使用2.1 通过 npx skills 安装# 本地安装 npx skills add ParthJadhav/app-store-screenshots # 全局安装 npx skills add ParthJadhav/app-store-screenshots -g # 为特定 Agent 安装 npx skills add ParthJadhav/app-store-screenshots -a claude-code该方式兼容 Claude Code、Cursor、Windsurf、OpenCode、Codex 等所有 skills 协议支持的 Agent。2.2 手动安装git clone https://github.com/ParthJadhav/app-store-screenshots ~/.claude/skills/app-store-screenshots2.3 使用方式安装后直接向编码 Agent 提出需求即可Build App Store and Google Play screenshots for my app.Skill 会引导 Agent 先询问应用背景、源截图、目标平台、语言、视觉方向与幻灯片数量再生成编辑器项目。README 给出了四个可复用的提示词范例习惯追踪 App、个人财务 App、Mac 菜单栏工具、多语言学习 App其要点是一句话说清 App 做什么、按优先级列出 3–5 个功能、指明平台与设备、描述视觉风格、给出幻灯片数量、说明需要的语言或 RTL 语言、提供源截图路径/App 图标/风格参考。提示截取源 iPhone 截图时6.1 英寸模拟器通常是最省事的起点因为它在设备框内需要的手动图片调整最少。三、脚手架会生成什么从空目录开始时Skill 会把内置模板位于 skills/app-store-screenshots/template/整份复制进你的工作目录得到如下结构继承自 README 的 What Gets Scaffoldedproject/ ├── public/ │ ├── mockup.png │ ├── app-icon.png │ └── screenshots/ │ ├── apple/ │ │ ├── iphone/{locale}/01.png │ │ ├── ipad/{locale}/01.png │ │ ├── tvos/{locale}/01.png │ │ ├── watchos/{locale}/01.png │ │ ├── carplay/{locale}/01.png │ │ └── mac/{locale}/01.png │ └── android/ │ ├── phone/{locale}/01.png │ ├── tablet-7/portrait/{locale}/01.png │ ├── tablet-10/landscape/{locale}/01.png │ └── feature-graphic/{locale}/01.png ├── app-store-screenshots.json ├── src/app/ │ ├── layout.tsx │ └── page.tsx ├── src/components/editor/ │ ├── screenshot-editor.tsx │ ├── toolbar.tsx │ ├── sidebar.tsx │ ├── inspector.tsx │ ├── preview-stage.tsx │ ├── slide-canvas.tsx │ ├── screenshot-picker.tsx │ └── device-frames.tsx └── src/lib/ ├── constants.ts ├── defaults.ts ├── storage.ts ├── image-cache.ts ├── export-render.ts └── types.ts模板的 template/README.md 对编辑器内部结构有更细的说明slide-canvas.tsx是数据驱动的屏/deck 渲染器承载所有布局device-frames.tsx产出 iPhone、iPad、Apple TV、Apple Watch、CarPlay 中控屏、Mac 窗口、Android 手机/平板与 Feature Graphic 等全部设备框constants.ts存放画布尺寸、导出尺寸、主题、字体与设备框比例等全部“魔法数字”storage.ts提供useProject()钩子负责自动保存与撤销重做历史。模板的 package.json 明确了运行前提Node.js 20.9engines: node 20.9.0包管理器任选 bun/pnpm/yarn/npm脚本为标准的dev/build/start/typecheck/test:e2e。脚手架流程本身也写进了 SKILL.md检测包管理器优先级bun pnpm yarn npm、cp -R SKILL_DIR/template/. $PWD/复制模板尾部/.确保复制.gitignore等点文件、bun install安装依赖、把用户截图放进上述目录布局、可选地预填app-store-screenshots.json的初始文案最后bun dev启动开发服务器默认http://localhost:3000。四、编辑器 UI连接画布是核心能力README 的 Current Editor UI 一节逐项列出了编辑器的能力下面按重要度归纳并给出源码佐证位置路径均相对于模板目录 skills/app-store-screenshots/template/连接画布Connected canvas整条截图带平铺在一块水平画布上手机、标题文案与装饰元素可以拖动跨越相邻屏幕边界然后每一屏导出为精确裁剪。对应组件是src/components/editor/preview-stage.tsxResizeObserver 缩放的连接画布。隔离模式Isolated mode保证旧项目中画布外的元素不会泄漏进相邻屏的导出专为保护存量项目设计。屏幕侧栏添加、选中、拖拽排序屏幕带实时缩略图dnd-kit实现。Inspector从右侧面板编辑布局、标签、标题、截图、元素堆叠与变换标题旁的Copy ideas菜单可直接插入经过验证的文案公式数据来自src/lib/copy-ideas.ts。主题选择器工具栏切换调色板预设18 个命名风格各有一个对应预设。Style Lab并排预览同一卡组 4 套完整外观调色板、字体、布局节奏与场景可用 Colors/Type/Layout/Scene 四把“锁”保留满意的部分其余部分 Shuffle/Remix结果以单个可撤销步骤写入。Scene Playground一次性重调所有屏幕的背景渐变、纯色、极光、聚光、网格、圆点、横线可跨整条截图带流动、装饰、设备阴影/辉光/3D 倾斜−30°~30°与标题字重、大小写、对齐。Magnifier放大镜在任意屏幕上加一个 loupe放大截图中某个细节可瞄准位置、调缩放1.5–5×与形状圆形/圆角方形随元素一样可拖拽。平台/设备切换iOS、Mac、Android 三个 Tab 的卡组并存共享同一套编辑器工作流iOS 下可选 iPhone、iPad、Apple TV、Apple Watch、CarPlayAndroid 下可选手机、平板与 Feature GraphicMac Tab 是单一 16:10 卡组。自动保存通过/api/project写盘并镜像到localStorage写盘前检测磁盘上的更新修订版本避免覆盖另一个 Tab 或 Agent 的改动保存失败可重试未保存离开会触发浏览器警告。导出打包下载按 平台/设备/分辨率/语言 组织的 zip。模板 README 还补充了两条关键持久化细节编辑器先读localStorage快速首绘再与项目文件对账若文件端点不可用自动保存会被阻塞防止陈旧缓存覆盖磁盘文件。每个编辑器请求都携带加载时的 revisionETagPOST /api/project以If-Match提交过期写入返回 HTTP 412 冲突而非静默覆盖。五、导出尺寸全表与 constants.ts 逐项对应README 的 Export Sizes 给出了三个商店的完整尺寸表。这些数字并非文档杜撰而是逐项定义在 constants.ts 的CANVAS与EXPORT_SIZES中见上文文件且注释明确 Apple TV / Watch 的尺寸是“通过asc screenshots sizes --all从 App Store Connect 自身元数据读取并验证”的。Apple App Store设备分辨率iPhone 6.91320 x 2868iPhone 6.51284 x 2778iPhone 6.31206 x 2622iPhone 6.11125 x 2436iPad 132064 x 2752iPad Pro 12.92048 x 2732Apple TV3840 x 2160, 1920 x 1080Apple Watch Ultra422 x 514, 410 x 502Apple Watch Series 10416 x 496Apple Watch Series 7396 x 484Apple Watch Series 4368 x 448Apple Watch Series 3312 x 390CarPlayiPhone 槽位横屏2868 x 1320, 2778 x 1284, 2622 x 1206, 2436 x 1125CarPlay 没有独立的 App Store 截图槽位——CarPlay 应用随 iPhone 应用一起分发所以 CarPlay 截图上传进 iPhone 槽位iPhone 槽位接受两种方向CarPlay 卡组因此以横屏 iPhone 尺寸导出并配一块车载中控外框。constants.ts中的CARPLAY_RATIO 800 / 480取自 Apple CarPlay Simulator 的 Standard 预设5:3若要针对 Minimum 748×456、Widescreen 1920×720 等其他预设修改该常量即可。Mac App Store设备分辨率Mac (16:10)2880 x 1800, 2560 x 1600, 1440 x 900, 1280 x 800Mac 拥有独立的MacTab因为 App Store Connect 把 macOS 列为与 iOS 应用分开的平台。其卡组导出到macos/mac/WxH/locale/与ios/...、android/...并列。Mac 窗口外框的内容区恰好是 16:10MAC_TITLE_BAR 0.045的标题栏之下因此全屏 16:10 截屏可以直接填满而无需裁剪其余比例从底部做 cover 裁剪。Google Play Store设备分辨率手机竖屏1080 x 19207 平板竖屏1200 x 19207 平板横屏1920 x 120010 平板竖屏1600 x 256010 平板横屏2560 x 1600Feature Graphic1024 x 500设计策略是按每个设备的最大尺寸设计更小尺寸全部下采样。CANVAS中每个设备的画布就是该策略的落地——iPhone 画布 1320×2868、Apple TV 4K1920×1080 是其精确 2× 下采样、Apple Watch 按最大槽位 Ultra 422×514 设计使更小的表尺寸只会降采样而不会升采样。六、导出流水线为什么要“等到截图真正画出来”这是本仓库最有源码价值的一环。README 提到“所有导出都会等待每张截图真正绘制完成Safari/WebKit 异步解码图片否则宁可警告也不会静默写出空白设备”而完整实现在 export-render.ts 中文件头部注释把问题讲得很清楚html-to-image把 DOM 节点序列化成 SVGforeignObject再把 SVG 当图片画到 canvas 上只画一次。但 WebKit 是异步解码嵌套在 SVG 图片里的imgdata URL 的——那一次绘制可能只捕获到标题、背景与 CSS 设备框而设备屏幕里的截图还是空白且不报错。Chrome 首绘即画所以该 bug 看起来“时好时坏”。源码给出的修复方案export-render.ts#L4-L26只嵌入被捕获幻灯片内的图片。连接画布会把所有屏幕并排渲染若全嵌入会让每个 SVG 膨胀 N 倍先渲染一版“全部图片置空”的基线把 SVG 里每个img的src换成 1×1 透明 GIF见blankImages()以此确定“图片缺失时各区域长什么样”反复绘制真实 SVG直到两个条件同时满足才导出每个可见图片区域的降采样指纹12×12 像素与基线不同说明图片出现了且连续两次绘制指纹一致说明渲染稳定。轮询间隔 50ms超时 8 秒超时仍未出现的图片计入missingImages编辑器据此弹出点名到具体屏幕的警告 toast。细节上还有两处工程判断对中心区域透明的图片如空屏的 iPhone mockup 框、环形 logo改用整框而非中心 60% 做指纹比较alphaCoverage()的 edges-only 分支最终toPng对目标尺寸采用cover 而非 stretch——Apple Watch 422×514 → 312×390 这类相差几个百分点的槽位拉伸会压扁设备框cover 只会从边缘裁掉几个像素。此外导出产物是不透明 24-bit RGB PNGGoogle Play 拒绝带 alpha 通道的 PNG而 canvas 只能产出 RGBA因此png-rgb.ts配合小 worker 池负责压掉 alpha 通道。遇到导出空白/黑屏时的排查步骤继承自 README 与 SKILL.md读导出 toast 里“screenshots may be missing”的点名、确认源截图是 RGB 而非 RGBA、核对public/下的引用路径确实存在导出前会对之前缺失的路径重试。七、项目状态app-store-screenshots.json 是事实来源app-store-screenshots.json是应用名、当前平台、当前设备、语言列表、主题、连接画布模式、场景scene、已保存的 Style Lab 外观、幻灯片、截图路径、放大镜与变换的唯一事实来源git 可追踪、可恢复。模板自带的示例见 app-store-screenshots.json其中schemaVersion: 2、connectedCanvas: true、locales、按设备分组的slidesByDevice等字段一览无余运行期上传写入public/screenshots/uploaded/hash.png经/api/upload哈希落盘解码后才存原始字节编辑器先读localStorage快速首绘再与项目文件对账旧版项目文件在加载时迁移到 schema v2且保持 legacy 卡组隔离除非它已显式开启连接模式自定义主题放在src/lib/constants.ts的THEMES中未知主题 id 回退到clean-light并在界面告警。storage.ts 中的加载逻辑印证了迁移语义connectedCanvas只接受显式布尔值其余情况由代码兜底为隔离模式解析结果统一写回schemaVersion: PROJECT_SCHEMA_VERSION即 2。模板 README 的 Migration model 进一步说明两种迁移路径——被动运行时迁移旧项目直接在新编辑器中打开保持connectedCanvas: false使旧导出视觉不变与显式 Skill 迁移SKILL.md 的 Step 0 探测到旧实现并经用户确认后原地升级 UI、保留用户资产、合并package.json与自定义主题、写schemaVersion: 2且全程先做仓库外备份。SKILL.md 为此提供了完整的备份/保留/覆盖/还原 shell 序列与一段 Node 强制转换脚本包括对屏幕 id 去重、layout 白名单校验、locale 代码正则校验/^[a-zA-Z0-9](?:[-_][a-zA-Z0-9])*$/等细节。八、编辑器工作流七步继承 README 的 Editor Workflow从模拟器、仿真器或真机截取真实应用截图让 Agent 脚手架化或迁移截图项目运行开发服务器并打开编辑器用侧栏组织屏幕用 Inspector 编辑文案、布局、截图与元素根据元素是否需要跨屏选择 Connected 或 Isolated 模式打开Style Lab对比完整外观或用Scene手动调背景、景深与标题风格点击Export bundle下载商店就绪的 PNG。上传文件保存在public/screenshots/uploaded/卡组状态保存在app-store-screenshots.json——两者都提交新机器git clone后才能完整复现卡组。九、风格与文案18 个命名风格 标题文案库Skill 附带 18 个命名视觉风格每个都有深度规范调色板、字体、标题强调、布局节奏、装饰密度、跨屏时刻、文案语气位于 style-prompts/ 目录共 18 个规范文件加一份 质量基线 _QUALITY_BAR.md。README 的风格适用表风格适合Hand-Drawn Editorial Tasks有设计品味的生产力、任务、笔记Retro Rubberhose Mascot带吉祥物的温馨习惯与健康 AppMoody Curated Dating会员制社交、晚餐俱乐部、高端生活方式Paper Sticker Skeuomorphic学生规划、笔记、兴趣类 AppDreamy Pastel Couples情侣、异地、宠物陪伴Glossy 3D K-Beauty Creator创作者经济、粉丝社区、美妆Liquid Glass Aurora高端 iOS 原生工具、AI 助手Swiss Grid Bold金融、开发者工具、分析、B2BNeon Athletic Night健身、跑步、力量、恢复Magazine Cover Editorial美食、菜谱、阅读、旅行、咖啡Candy Pop Social社交、好友、活动、Z 世代消费Soft Clay Wellness冥想、睡眠、日记、健康Midnight Glow ProAI、开发工具、专业生产力Risograph Zine音乐、活动、播客、独立创意Bento Keynote Grid功能密集型生产力、健康、金融、工具Toybox Primary儿童学习、家庭、新手、休闲游戏Quiet Japandi笔记、日历、阅读、茶、极简工具Vintage Travel Poster旅行、地图、户外、天气、公路旅行在提示词里点名某个风格例如 “use Swiss Grid Bold”Agent 会应用整份规范每个命名风格在工具栏主题选择器中都有一个同名调色板预设——这从constants.ts的THEMES记录可以直接验证从clean-light、dark-bold等 5 个基础预设到swiss-grid-bold、liquid-glass-aurora等 18 个命名风格每个主题都定义了bg/bgAlt/fg/fgAlt/accent/muted六项色板。标题文案方面copy-ideas.md 提供按“deck 槽位”hero / differentiator / feature / proof / closer组织的公式、13 个 App 品类的现成句子、eyebrow 标签、弱→强改写表、四段式叙事弧与本地化注意同一套公式的精简版也内置在编辑器 Inspector 的Copy ideas菜单src/lib/copy-ideas.ts。其“铁律”每条标题一个想法不用 “and” 连接两个、用 1–2 音节常见词、每行 3–5 个词、换行是刻意的三种写法是“描绘一个时刻 / 陈述一个结果 / 消灭一个痛点”每屏给三个选项让用户挑。十、设计标准与常见错误设计标准README Design Standards截图是广告不是文档每张幻灯片只卖一个清晰的用户收益标题要通过一秒缩略图测试相邻幻灯片要变换布局与设备摆放跨屏元素绝不能切分必要文字或关键 UI导出的裁剪图作为独立截图必须仍然成立。SKILL.md 还给出了十条更细的视觉原则如“背景是设计过的表面绝不纯白”“标题占据画布上方 30–40%”“标题内至少一个词用不同强调”“证明性徽章只放第一屏”“手机框至少混用两种摆法”“每 2–3 屏打破一次手机方阵”“末屏用功能墙或手机马赛克”“导出前必做约 160px 宽的缩略图测试”。常见错误对照表继承自 SKILL.md全部可在源码中定位错误修正直接改page.tsx而不用编辑器回滚让改动在浏览器编辑器里发生从零重写设备外框设备框在src/components/editor/device-frames.tsx改那里截图没提交public/screenshots/...可以提交拖放上传也写入public/screenshots/uploaded/hash.png该目录与app-store-screenshots.json一起提交平板截图目录放错按android/tablet-7/portrait/{locale}/...的布局来Reset 清空了卡组Reset 会清空内存状态并把默认值重存进app-store-screenshots.json已提交就git checkout否则先导出导出空白看导出 toast 的 missing 警告后重导否则源 PNG 可能带 alpha压平为 RGB在 App Store Connect 找 CarPlay 槽位没有——CarPlay 截图传进 iPhone 槽位Mac 窗口出现两个标题栏源是单窗口截图自带标题栏——裁掉它或用全屏 16:10 截屏bun dev端口冲突模板默认next dev让 Next 自选下一个可用端口十一、技术栈、环境与自动化验证依赖用途Next.js开发服务器与应用壳React编辑器 UITypeScript项目与幻灯片状态的类型安全Tailwind CSS样式shadcn/ui Radix控件、对话框、下拉、提示html-to-image精确 PNG 渲染JSZip打包下载dnd-kit屏幕拖拽排序react-rnd画布元素拖拽与缩放运行要求Node.js 20.9 与 bun/pnpm/yarn/npm 之一模板 package.json 用engines字段硬性约束了前者。模板还内置了确定性的 E2E 验证体系docs/testing/e2e.md 描述覆盖矩阵bun install --frozen-lockfile bun run typecheck bun run build bun run test:e2e测试需要 Node.js 22.12 与已安装的 Google Chrome不需要任何模型账号或 API key。测试运行器在 4312 端口创建一份一次性模板副本项目保存、上传与字体都写入该副本绝不复用你正在使用的编辑器服务器SCREENSHOTS_E2E_PRODUCTION1则基于已有.next构建做生产验证。仓库根目录另有一组 bug-bash 脚本api-bug-bash.cjs、ui-bug-bash.cjs等用于回归验证配合 BUG_BASH.md 使用。十二、本地 API 契约编辑器后端一览模板自带四个本地 API供单服务器进程的本地编辑器使用无远程鉴权浏览器写请求需同源 JSONGET /api/project返回{ ok, state }与ETag修订号项目文件缺失时也返回实现见 route.tsPOST /api/project接收项目 JSON64 MiB 请求上限带If-Match拒绝过期写入HTTP 412未知 schema 版本、未知设备卡组、重复 id 或畸形元素数据会以 HTTP 400 拒绝POST /api/upload接收{ dataUrl }PNG/JPEG解码后 8 MiB、请求 12 MiB、6400 万像素存盘前先解码图片实现见 route.tsPOST /api/upload-font接收 base64 字体字节解码后 16 MiB服务端校验字体容器签名、长度与表边界编辑器浏览器端还额外做字体解码验证实现见 route.ts。上传均为原子写入项目与上传请求在编辑器侧 15 秒超时图片预加载 10 秒超时字体加载超过 15 秒则导出以可重试错误停止。/screenshots/uploaded/[filename]与/fonts/imported/[filename]两条路由保证服务器重启后含next start上传资产仍可访问只接受生成的哈希文件名与受支持扩展名。小结app-store-screenshots的价值链可以概括为AI Agent 负责搭建与迭代Next.js 编辑器负责可视化调整constants.ts定义全部商店尺寸契约export-render.ts保证像素级可靠的 PNG 产出app-store-screenshots.json让整套工作流可版本化、可迁移、可恢复。对开发者而言值得直接精读的三个入口是 constants.ts尺寸与主题的唯一事实来源、export-render.ts渲染稳定性的完整解法与 SKILL.mdAgent 侧的完整作业流程与设计规范它们分别对应“导出什么”“怎么导出得对”“如何组织整条生产流程”三个问题。赞分享【免费下载链接】app-store-screenshotsend to end app store screenshot creation using AI项目地址https://gitcode.com/gh_mirrors/ap/app-store-screenshots点击查看免费下载相关推荐AutoGPT Platform 商店数据块实战指南用 Get Store Agent Details 与 Search Store Agents 读写 Agent 商店AutoGPT Platform 商店数据块实战指南用 Get Store Agent Details 与 Search Store Agents 读写 Ag人工智能AI Agent自主智能体Agent 工作流工作流自动化后端前端RPCS3 入门PS3 模拟器从判断到流畅运行的完整路径RPCS3 入门PS3 模拟器从判断到流畅运行的完整路径 RPCS3 是一款免费开源的 PS3 模拟器同时内置调试器在 Windows / Linux虚拟化图形学调试器Gatsby Swag Store 开源电商项目完整指南如何快速搭建专属周边商店Gatsby Swag Store 开源电商项目完整指南如何快速搭建专属周边商店 Gatsby Swag Store 是一个基于 Gatsby 框架构建的开源上一篇Balena Etcher免费快速的跨平台镜像烧录终极解决方案下一篇从零掌握DriverStore ExplorerWindows驱动管理的终极解决方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
