Communitygithub.com

101-skills/superpowers

使用精確的平台規格製作 App Store 和 Google Play 截圖。涵蓋 iOS/Android 尺寸、圖庫排序、裝置模型和預覽影片。適用於：App Store 優化、ASO、應用程式截圖、應用程式預覽、Play Store 列表。

superpowers 是什麼？

此技能為開發者與行銷人員提供了一套全面解決方案，用於建立符合規格且高轉換率的 App Store 與 Google Play 截圖及預覽影片。它深度整合了 inference.sh CLI (`belt`)，可透過命令列直接產生裝置模型場景、特定功能亮點與生活情境風格截圖，甚至包括前後對比圖與預覽影片。技能中詳列了 Apple 與 Google 雙平台的精確尺寸、格式與數量限制，並強調「前三張法則」以最大化曝光效果，同時提供圖庫順序建議、標題撰寫規則（最多兩行、以效益為導向）以及常見錯誤檢查清單。支援多語言在地化、Google Play A/B 測試，並可透過相關技能擴充 AI 圖片生成、影片生成、影像放大與提示工程等能力。

相容平台~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

App Store 截圖

透過 inference.sh CLI 建立 App Store 截圖與預覽影片。

快速開始

需要 inference.sh CLI（belt）。安裝說明

belt login

# 產生裝置模型場景
belt app run falai/flux-dev-lora --input '{
  "prompt": "iPhone 15 Pro 顯示乾淨的現代應用程式介面，包含分析儀表板，略微傾斜，柔和漸層背景，專業產品攝影，微妙陰影，行銷模型風格",
  "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（選用但建議）

前三張法則

80% 的 App Store 曝光只顯示前三張截圖（在使用者滾動之前）。這三張必須：

  1. 傳達核心價值主張
  2. 展示最佳功能/成果
  3. 與競爭對手區分開來

截圖圖庫順序

位置內容目的
1主視覺 — 核心價值、最佳功能吸引目光，傳達應用程式的用途
2關鍵差異化元素你與競爭對手的獨特之處
3最受歡迎的功能使用者最喜愛的部分
4社交證明或成果評分、成果、推薦
5-8其他功能輔助功能、設定、整合
9-10邊緣案例為特定使用者設計的特殊功能

截圖風格

1. 裝置框架搭配標題

標準型：顯示應用程式的裝置模型，標題文字在上下方。

┌──────────────────────────┐
│   "輕鬆追蹤你的習慣"   │  ← 標題（以效益為導向）
│                          │
│   ┌──────────────────┐   │
│   │                  │   │
│   │   應用程式畫面    │   │  ← 裝置框架中的實際應用程式 UI
│   │   內容           │   │
│   │                  │   │
│   │                  │   │
│   └──────────────────┘   │
│                          │
└──────────────────────────┘

2. 滿版 UI（無裝置框架）

應用程式 UI 填滿整個截圖。適用於沉浸式應用。

3. 生活情境

在真實世界情境中展示裝置（人手持手機、放在桌上等）。

4. 附有說明的功能亮點

使用箭頭/圓圈指向特定功能的 UI 截圖。

標題撰寫

規則

  • 最多 2 行 文字
  • 以 效益為導向，而非功能為導向
  • 30pt 以上 字體大小（必須在商店中清晰可讀）

範例

❌ 以功能為導向：
"推播通知系統"
"包含篩選功能的日曆檢視"
"資料匯出功能"

✅ 以效益為導向：
"再也不錯過任何截止日期"
"一覽你的一週"
"一鍵分享報告"

產生截圖

主視覺截圖 (位置 1)

# 附帶主要功能的乾淨裝置模型
belt app run falai/flux-dev-lora --input '{
  "prompt": "現代 iPhone 顯示一款漂亮的健身追蹤應用程式，包含活動環與運動摘要，裝置略微傾斜，位於柔和紫色漸層背景前，專業產品照，簡潔極簡構圖，微妙倒影",
  "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
長度建議 30 秒至 2 分鐘
方向建議橫向

預覽影片結構

段落長度內容
鉤子0-3 秒展示核心成果/驚豔時刻
功能 13-10 秒實際展示最佳功能
功能 210-18 秒第二個關鍵功能
功能 318-25 秒第三個功能或社交證明
行動呼籲25-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 管理中心支援商店刊登資訊實驗：

  • 測試不同的截圖順序
  • 測試有/無裝置框架
  • 測試不同的標題
  • 測試不同的配色方案
  • 執行 7 天以上，流量 50% 以上以獲得顯著結果

常見錯誤

錯誤問題修正
使用設定畫面作為截圖沒人關心設定展示核心價值，而非基礎架構
使用引導流程截圖顯示阻力，而非價值展示應用程式的使用狀態
文字過多在商店中無法閱讀最多 2 行，30pt 以上字體
尺寸錯誤被商店拒絕使用確切的平台規格
所有截圖看起來一樣沒有理由滾動觀看變換構圖和內容
以功能為導向的標題無法傳達效益"再也不錯過截止日期" > "推播通知"
過時的 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