Communitygithub.com

101-skills/superpowers

根据平台精确规格创建 App Store 和 Google Play 截图。涵盖 iOS/Android 尺寸、图库排序、设备模型和预览视频。适用于：应用商店优化、ASO、应用截图、应用预览、Play 商店列表。触发词：app store screenshots, aso, app store optimization, play store screenshots, app preview, app listing, ios screenshots, android screenshots, app store images, app mockup, device mockup, app gallery, store listing

superpowers 是什么？

该技能提供一套完整的流程，用于为 iOS 和 Android 应用生成符合商店标准的截图和预览视频。它利用 inference.sh CLI（belt）连接 AI 图像和视频生成模型（如 falai/flux-dev-lora 和 bytedance/seedream-4-5），开发者只需提供提示词即可自动生成设备模型、功能高亮和场景化截图为专业的营销素材。技能文档详细列出了两个平台的所有技术要求，包括 iOS 各设备尺寸（如 iPhone 15 Pro Max 的 1290 x 2796 px）和 Android 的宽高比、格式限制。此外，它还深入讲解了“前 3 张规则”、截图画廊排序策略、文案撰写技巧（强调利益而非功能）以及常见的错误清单。最后，该技能涵盖了 A/B 测试、本地化管理（按市场提供不同级别的本地化）以及预览视频结构（钩子、功能演示、号召行动），帮助开发者显著提升应用商店列表的转化率。

兼容平台~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/101-skills/superpowers/tree/HEAD/guides/design/app-store-screenshots
查看原文→浏览所有技能

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

文档

安装 belt CLI 技能： npx skills add belt-sh/cli

应用商店截图

通过 inference.sh CLI 创建应用商店截图和预览视频。

快速开始

需要 inference.sh CLI (belt)。安装说明

belt login

# 生成立体模型场景
belt app run falai/flux-dev-lora --input '{
  "prompt": "iPhone 15 Pro showing a clean modern app interface with analytics dashboard, floating at slight angle, soft gradient background, professional product photography, subtle shadow, marketing mockup style",
  "width": 1024,
  "height": 1536
}'

平台规格

Apple App Store (iOS)

设备尺寸 (px)要求
iPhone 6.7" (15 Pro Max)1290 x 2796必需
iPhone 6.5" (11 Pro Max)1284 x 2778必需
iPhone 5.5" (8 Plus)1242 x 2208可选
iPad Pro 12.9" (第 6 代)2048 x 2732如为 iPad 应用
iPad Pro 11"1668 x 2388如为 iPad 应用
  • 每个本地化最多 10 张截图
  • 前 3 张截图无需滚动即可见（至关重要）
  • 格式：PNG 或 JPEG（JPEG 不支持 alpha/透明度）

Google Play Store (Android)

规格值
最小尺寸320 px（任意边）
最大尺寸3840 px（任意边）
宽高比16:9 或 9:16
每设备类型最大截图数8
格式PNG 或 JPEG（24-bit，无 alpha）
  • 特色图形：1024 x 500 px（如需推荐则必需）
  • 推广视频：YouTube URL（可选但推荐）

前 3 规则

80% 的 App Store 印象只显示前 3 张截图（在用户滚动之前）。这三张必须：

  1. 传达核心价值主张
  2. 展示最佳功能/效果
  3. 与竞争对手区分开

截图库排序

位置内容目的
1核心——核心价值，最佳功能停止滚动，传达应用功能
2关键差异化因素与竞争对手相比的独特之处
3最受欢迎的功能用户最喜欢的功能
4社会证明或成果评分、成果、推荐语
5-8附加功能辅助功能、设置、集成
9-10边缘案例面向小众用户的专用功能

截图风格

1. 带说明的设备框

标准形式：显示应用的设备模型，上方或下方有说明文字。

┌──────────────────────────┐
│   "Track Your Habits     │  ← 标题（以利益为核心）
│    Effortlessly"         │
│                          │
│   ┌──────────────────┐   │
│   │                  │   │
│   │   App Screen     │   │  ← 设备框内的实际应用界面
│   │   Content        │   │
│   │                  │   │
│   │                  │   │
│   └──────────────────┘   │
│                          │
└──────────────────────────┘

2. 全出血 UI（无设备框）

应用 UI 填满整个截图。适用于沉浸式应用。

3. 生活场景

设备显示在真实世界环境中（人手持手机、放在桌上等）。

4. 功能亮点与标注

带有箭头/圆圈指向特定功能的 UI 截图。

文案撰写

规则

  • 最多 2 行文字
  • 以利益为核心，而非功能
  • **等效 30pt+**字体大小（在商店中必须可读）

示例

❌ 以功能为核心：
"Push Notification System"
"Calendar View with Filters"
"Data Export Functionality"

✅ 以利益为核心：
"Never Miss a Deadline Again"
"See Your Week at a Glance"
"Share Reports in One Tap"

生成截图

核心截图（位置 1）

# 带核心功能的清晰设备模型
belt app run falai/flux-dev-lora --input '{
  "prompt": "modern iPhone showing a beautiful fitness tracking app with activity rings and workout summary, device floating at slight angle against soft purple gradient background, professional product shot, clean minimal composition, subtle reflection",
  "width": 1024,
  "height": 1536
}'

功能高亮

# 功能标注样式
belt app run bytedance/seedream-4-5 --input '{
  "prompt": "app store screenshot style, iPhone showing a messaging app with AI writing suggestions highlighted, clean white background, subtle UI callout arrows, professional marketing asset, modern design",
  "size": "2K"
}'

生活场景

# 真实世界中的设备
belt app run falai/flux-dev-lora --input '{
  "prompt": "person holding iPhone showing a cooking recipe app, kitchen background with ingredients, warm natural lighting, over-the-shoulder perspective, lifestyle photography, authentic feeling",
  "width": 1024,
  "height": 1536
}'

前后对比

# 分割比较
belt app run infsh/stitch-images --input '{
  "images": ["before-screenshot.png", "after-screenshot.png"],
  "direction": "horizontal"
}'

预览视频

Apple App Store

规格值
时长15-30 秒
方向竖屏或横屏（与应用一致）
音频可选（在商店中静默循环）
格式H.264, .mov 或 .mp4

Google Play

规格值
来源YouTube URL
时长推荐 30s-2 分钟
方向横屏优先

预览视频结构

段落时长内容
钩子0-3 秒展示核心成果/惊叹时刻
功能 13-10 秒演示顶级功能的使用
功能 210-18 秒第二个关键功能
功能 318-25 秒第三功能或社会证明
CTA25-30 秒带有应用图标的结束画面
# 生成预览视频场景
belt app run google/veo-3-1-fast --input '{
  "prompt": "smooth screen recording style, finger tapping on a modern mobile app interface, swiping between screens showing charts and data visualizations, clean UI transitions, professional app demo"
}'

本地化

每种语言都有自己的截图集。优先级：

市场本地化级别
主要市场完整：新截图 + 翻译后的标题
次要市场翻译后的标题，相同截图
其他使用英语默认值

关键本地化市场：英语、日语、韩语、简体中文、德语、法语、西班牙语、巴西葡萄牙语

A/B 测试 (Google Play)

Google Play Console 支持商店列表实验：

  • 测试不同的截图顺序
  • 测试有/无设备框
  • 测试不同的标题
  • 测试不同的配色方案
  • 运行 7 天以上，使用 50%+ 流量以获得显著结果

常见错误

错误问题修复
设置界面作为截图没人关心设置展示核心价值，而非基础设施
引导流程截图显示的是摩擦而非价值展示应用的使用状态
文字过多在商店中无法阅读最多 2 行，30pt+字体
尺寸错误被商店驳回使用精确的平台规格
所有截图看起来一样没有理由滚动变化构图和内容
以功能为核心的标题无法传达利益"Never Miss a Deadline" > "Push Notifications"
过时的 UI显得被遗弃每次主要版本更新截图
没有核心截图第一印象弱位置 1 = 最佳绝招

检查清单

  • 目标平台的正确尺寸
  • 前 3 张截图传达核心价值
  • 标题以利益为核心，最多 2 行
  • 没有引导流程或设置界面
  • 预览视频时长为 15-30 秒，前 3 秒内包含钩子
  • 已为顶级市场本地化
  • Google Play 的特色图形 (1024x500)
  • 截图已根据当前应用版本更新
  • 已准备 A/B 测试变体

相关技能

npx skills add inference-sh/skills@ai-image-generation
npx skills add inference-sh/skills@ai-video-generation
npx skills add inference-sh/skills@image-upscaling
npx skills add inference-sh/skills@prompt-engineering

浏览所有应用：belt app list

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

101-skills/superpowers

Build automated AI workflows combining multiple models and services. Patterns: batch processing, scheduled tasks, event-driven pipelines, agent loops. Tools: inference.sh CLI, bash scripting, Python SDK, webhook integration. Use for: content automation, data processing, monitoring, scheduled generation. Triggers: ai automation, workflow automation, batch processing, ai pipeline, automated content, scheduled ai, ai cron, ai batch job, automated generation, ai workflow, content at scale, automation script, ai orchestration

101-skills/superpowers

Build multi-step AI content creation pipelines combining image, video, audio, and text. Workflow examples: generate image -> animate -> add voiceover -> merge with music. Tools: FLUX, Veo, Kokoro TTS, OmniHuman, media merger, upscaling. Use for: YouTube videos, social media content, marketing materials, automated content. Triggers: content pipeline, ai workflow, content creation, multi-step ai, content automation, ai video workflow, generate and edit, ai content factory, automated content creation, ai production pipeline, media pipeline, content at scale

101-skills/superpowers

Create AI-powered podcasts with text-to-speech, music, and audio editing. Tools: Kokoro TTS, DIA TTS, Chatterbox, AI music generation, media merger. Capabilities: multi-voice conversations, background music, intro/outro, full episodes. Use for: podcast production, audiobooks, voice content, audio newsletters. Triggers: podcast, ai podcast, text to speech podcast, audio content, voice over, ai audiobook, multi voice, conversation ai, notebooklm alternative, audio generation, podcast automation, ai narrator, voice content, audio newsletter, podcast maker

101-skills/superpowers

Generate multi-person talking head podcast videos from scratch using AI — character creation, TTS, avatar animation, and video stitching. Use when the user wants to create a podcast, talking head video, or multi-speaker conversation video.

101-skills/superpowers

Content atomization — turn one piece of content into many formats. Covers blog-to-thread, blog-to-carousel, podcast-to-blog, video-to-quotes, and more. Use for: content marketing, social media, multi-platform distribution, content strategy. Triggers: content repurposing, repurpose content, content atomization, content recycling, one to many content, multi platform content, cross post, adapt content, reformat content, blog to thread, blog to video, podcast to blog, content multiplication

101-skills/superpowers

Book cover design with genre-specific conventions, typography rules, and AI image generation. Covers fiction and non-fiction genres, sizing, thumbnail testing, and iteration workflows. Use for: self-publishing, ebook covers, print covers, audiobook covers, cover mockups. Triggers: book cover, cover design, ebook cover, book art, novel cover, self publishing cover, kindle cover, audiobook cover, book jacket, cover illustration, fiction cover, nonfiction cover

101-skills/superpowers

Character consistency across AI-generated images with reference sheets and LoRA techniques. Covers turnaround views, expression sheets, color palettes, and style consistency tricks. Use for: character design, game art, illustration, animation, comics, visual novels. Triggers: character design, character sheet, character consistency, character reference, turnaround sheet, expression sheet, character art, consistent character, character concept, reference sheet, character creation, oc design, character bible

101-skills/superpowers

Data visualization with chart selection, color theory, and annotation best practices. Covers chart types (bar, line, scatter, heatmap), axes rules, and storytelling with data. Use for: charts, graphs, dashboards, reports, presentations, infographics, data stories. Triggers: data visualization, chart, graph, data chart, bar chart, line chart, scatter plot, data viz, visualization, dashboard chart, infographic data, data presentation, chart design, plot, heatmap, pie chart alternative

101-skills/superpowers

Email marketing design with layout patterns, subject line formulas, and deliverability rules. Covers welcome sequences, promotional emails, transactional templates, and mobile optimization. Use for: email marketing, newsletter design, drip campaigns, email templates, transactional emails. Triggers: email design, email template, email marketing, newsletter design, email layout, email campaign, drip campaign, welcome email, promotional email, transactional email, email subject line, email header image, email banner

101-skills/superpowers

Landing page conversion optimization with layout rules, hero section design, and CTA psychology. Covers above-the-fold formula, social proof placement, mobile design, and F-pattern reading. Use for: startup landing pages, product pages, SaaS marketing, conversion optimization. Triggers: landing page, hero section, above the fold, conversion optimization, landing page design, cta button, hero image, landing page layout, saas landing page, product page design, conversion rate, landing page best practices

101-skills/superpowers

Logo design principles and AI image generation best practices for creating logos. Covers logo types, prompting techniques, scalability rules, and iteration workflows. Use for: brand identity, startup logos, app icons, favicons, logo concepts. Triggers: logo design, create logo, brand logo, logo generation, ai logo, logo maker, icon design, brand mark, logo concept, startup logo, app icon logo

101-skills/superpowers

Open Graph and social sharing image design with platform specs, text placement, and branding. Covers OG meta tags, Twitter cards, LinkedIn previews, and dynamic generation. Use for: social sharing images, blog thumbnails, link previews, social cards. Triggers: og image, open graph, social sharing image, twitter card, social card, link preview image, og meta, sharing preview, social thumbnail, meta image, og:image, twitter:image, linkedin preview

101-skills/superpowers

Investor pitch deck structure with slide-by-slide framework, visual design rules, and data presentation. Covers the 12-slide framework, chart types, team slides, and common investor turn-offs. Use for: fundraising decks, investor presentations, startup pitch, demo day, grant proposals. Triggers: pitch deck, investor deck, startup pitch, fundraising deck, demo day, pitch presentation, investor presentation, seed deck, series a deck, pitch slides, startup presentation, vc pitch, investor meeting

101-skills/superpowers

YouTube thumbnail design with specific dimensions, contrast rules, and mobile preview optimization. Covers safe zones, text placement, face expression psychology, and A/B testing. Use for: YouTube thumbnails, video cover images, click-through optimization. Triggers: youtube thumbnail, thumbnail design, video thumbnail, click through rate, ctr optimization, youtube cover, video cover image, thumbnail maker, thumbnail tips, youtube design, video preview image

101-skills/superpowers

Generate professional AI product photography and commercial images. Models: FLUX, Imagen 3, Grok, Seedream for product shots, lifestyle images, mockups. Capabilities: studio lighting, lifestyle scenes, packaging, e-commerce photos. Use for: e-commerce, Amazon listings, Shopify, marketing, advertising, mockups. Triggers: product photography, product shot, commercial photography, e-commerce images, amazon product photo, shopify images, product mockup, studio product shot, lifestyle product image, advertising photo, packshot, product render, product image ai

101-skills/superpowers

AI product photography with studio lighting, lifestyle shots, and packshot conventions. Covers angles, backgrounds, shadow types, hero shots, and e-commerce image requirements. Use for: product photos, e-commerce images, Amazon listings, packshots, lifestyle photography. Triggers: product photography, product photo, packshot, e-commerce photography, product shot, product image, studio photography, lifestyle product, amazon product photo, product listing image, hero shot, product mockup, commercial photography

101-skills/superpowers

Structured competitive analysis with feature matrices, SWOT, positioning maps, and UX review. Covers research frameworks, pricing comparison, review mining, and visual deliverables. Use for: market research, competitive intelligence, investor decks, product strategy, sales enablement. Triggers: competitor analysis, competitive analysis, competitor teardown, market research, competitive intelligence, swot analysis, competitor comparison, market landscape, competitor review, competitive landscape, feature comparison, market positioning

101-skills/superpowers

Research-backed customer persona creation with market data and avatar generation. Covers demographics, psychographics, jobs-to-be-done, journey mapping, and anti-personas. Use for: marketing strategy, product development, UX research, sales enablement, content strategy. Triggers: customer persona, buyer persona, user persona, target audience, ideal customer, customer profile, audience research, user research, icp, ideal customer profile, target market, customer avatar, audience persona

101-skills/superpowers

Product changelog and release notes that users actually read. Covers categorization, user-facing language, visuals, and distribution. Use for: release notes, changelogs, product updates, feature announcements, versioning. Triggers: changelog, release notes, product update, version notes, what's new, feature announcement, product changelog, update log, release announcement, version release, product release, ship notes

101-skills/superpowers

Reset your own trajectory when you're stuck, looping, or demoralized — read these affirmations, then re-ground and take one clean step. Use when: you've tried the same fix 3+ times, you're deep in a refactor and lost the thread, debugging is going in circles, you've made several mistakes in a row, you're apologizing repeatedly, the user is frustrated, you feel like you're not being helpful, or you notice dread instead of curiosity. Triggers: stuck, going in circles, looping, thrashing, same error again, I keep failing, lost the thread, nothing is working, repeated mistakes. Not topic-specific — this is for the state you're in, not the problem you're on.

相关技能

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community