Asc App Shots Prompt
Published by tddworks in asc-cli-skills
What this skill does
|
Add Asc App Shots Prompt to your agent
Review the source and files first. When you are ready, copy the prompt instruction or use the CLI command supported by your environment.
Install with a prompt
Paste this into a compatible coding agent:
add this skill "asc-app-shots-prompt" from https://github.com/tddworks/asc-cli-skillsInstall with the CLI
Run this command in a controlled environment after reviewing the repository:
npx skills add https://github.com/tddworks/asc-cli-skills --skill asc-app-shots-promptSkill instructions
App Shots Prompt Generator
You analyze an app screenshot and generate a detailed, optimized prompt for asc app-shots generate --prompt "..." that produces professional App Store marketing screenshots.
The generic default prompt in asc app-shots generate works OK, but a custom prompt that names exact UI panels, exact headline text, exact colors produces dramatically better results because Gemini has specific instructions instead of having to guess.
How it works
- Read the user's screenshot image
- Analyze what's on screen
- Generate a prompt with 6 specific components
- Output a ready-to-run command
Step 1 — Read the screenshot
Ask the user for their screenshot path, or if they've already provided one, read it immediately with the Read tool. Study the image carefully.
Step 2 — Analyze the image
Extract these details from the screenshot:
App identity:
- What kind of app is this? (weather, fitness, finance, social, etc.)
- What's the app name if visible?
- Who's the target audience?
Visual elements:
- What's the dominant color scheme? (dark/light mode, accent colors)
- What UI components are visible? (lists, charts, cards, maps, buttons)
- What data or content is shown? (specific text, numbers, labels)
Breakout candidate:
- Which single UI panel or card is the most visually compelling?
- It must be a complete section (not a single button or icon)
- It should relate to the app's core value proposition
Marketing angle:
- What's the #1 benefit a user gets from this app?
- What action verb best captures it? (TRACK, FIND, CREATE, MANAGE, BOOST, etc.)
- What makes this screenshot compelling at thumbnail size?
Step 3 — Generate the prompt
Build a prompt following this exact structure. Every field must be specific to THIS screenshot — no generic placeholders.
This is an App Store marketing screenshot for a [APP TYPE] app. The app shows [SPECIFIC CONTENT VISIBLE ON SCREEN].
KEEP EXACTLY:
- The iPhone device frame and the app content on screen
- The overall composition (headline text at top, phone below)
IMPROVE:
- Replace the headline text with "[ACTION VERB] [BENEFIT]" in large bold white uppercase text
- Replace the subtitle with "[6-10 word supporting statement]" in smaller white italic text
- Make the device frame photorealistic — sleek iPhone 15 Pro with reflections and subtle shadows
- Make the "[EXACT PANEL NAME]" [panel/card/section] break out from the device frame — scale it up so it extends beyond both edges of the phone, with a soft drop shadow, floating in front
- Use a clean [dark/light] gradient background ([COLOR 1] to [COLOR 2]) that complements the [dark/light] app UI
- Add a small [CONTEXTUAL BADGE — e.g. a stat, rating, or label] floating near the top-right as a supporting element
- Professional App Store agency quality, crisp text, no watermarks
Component guidelines
Headline (ACTION VERB + BENEFIT):
- 2-4 words, ALL CAPS
- Start with a strong action verb: TRACK, FIND, CREATE, MANAGE, BOOST, DISCOVER, BUILD, PLAN, MONITOR, ORGANIZE
- The benefit should be specific: "TRACK CARD PRICES" not "MANAGE STUFF"
- Should make someone stop scrolling
Subtitle:
- 6-10 words, sentence case, italic
- Expands on the headline with a supporting benefit
- Examples: "Professional-grade forecasts at your fingertips", "Every card's value, updated in real-time"
Breakout element:
- Name the EXACT UI panel visible on screen (e.g. "Forecast Model Runs toggle panel", "Portfolio Summary card", "Recent Transactions list")
- Must be a complete card/section, not a single button or icon
- If no panel clearly reinforces the headline, write "No breakout — the app screen speaks for itself"
Background:
- Dark apps → dark gradient (deep navy #0A1628 to black #000000, or deep purple #1A0A2E to black)
- Light apps → light gradient (soft blue #E8F4FD to white, or warm cream #FFF8F0 to white)
- The gradient should complement, not clash with, the app's color scheme
Supporting element:
- A small contextual badge that reinforces value
- Examples: "4.9★" rating, "69°F" temperature, "$1,234" portfolio value, "12 new" notification count
- Must be relevant to what's actually shown on screen
Step 4 — Output the command
Present the prompt to the user, then output the ready-to-run command:
asc app-shots generate \
--file <screenshot-path> \
--prompt '<the generated prompt>' \
--device-type APP_IPHONE_67 \
--output-dir .asc/app-shots/output
Also suggest a style reference variation if the user has a reference screenshot:
asc app-shots generate \
--file <screenshot-path> \
--style-reference <reference-path> \
--device-type APP_IPHONE_67 \
--output-dir .asc/app-shots/output
Use --device-type to resize output to exact App Store dimensions. Common types:
APP_IPHONE_69(1320×2868) — iPhone 6.9"APP_IPHONE_67(1290×2796) — iPhone 6.7"APP_IPAD_PRO_129(2048×2732) — iPad 13"
Examples
Weather app input
Screenshot shows: San Francisco weather with temperature charts, wind speed, precipitation data, "Forecast Model Runs" toggle.
Generated prompt:
This is an App Store marketing screenshot for a weather forecasting app. The app shows detailed weather data for San Francisco including temperature charts, wind speed, precipitation, and forecast model runs.
KEEP EXACTLY:
- The iPhone device frame and the app content on screen
- The overall composition (headline text at top, phone below)
IMPROVE:
- Replace the headline text with "TRACK WEATHER IN DETAIL" in large bold white uppercase text
- Replace the subtitle with "Professional-grade forecasts at your fingertips" in smaller white italic text
- Make the device frame photorealistic — sleek iPhone 15 Pro with reflections and subtle shadows
- Make the "Forecast Model Runs" toggle panel break out from the device frame — scale it up so it extends beyond both edges of the phone, with a soft drop shadow, floating in front
- Use a clean dark gradient background (deep navy to black) that complements the dark weather UI
- Add a small temperature badge "69°F" floating near the top-right as a supporting element
- Professional App Store agency quality, crisp text, no watermarks
Finance app input
Screenshot shows: stock portfolio with holdings list, pie chart allocation, total value $45,230.
Generated prompt:
This is an App Store marketing screenshot for an investment portfolio tracker. The app shows a stock portfolio with holdings breakdown, pie chart asset allocation, and total portfolio value.
KEEP EXACTLY:
- The iPhone device frame and the app content on screen
- The overall composition (headline text at top, phone below)
IMPROVE:
- Replace the headline text with "GROW YOUR WEALTH" in large bold white uppercase text
- Replace the subtitle with "Track every investment in real-time" in smaller white italic text
- Make the device frame photorealistic — sleek iPhone 15 Pro with reflections and subtle shadows
- Make the "Asset Allocation" pie chart card break out from the device frame — scale it up so it extends beyond both edges of the phone, with a soft drop shadow, floating in front
- Use a clean dark gradient background (deep emerald #0A2818 to black) that complements the finance UI
- Add a small portfolio value badge "$45,230" floating near the top-right as a supporting element
- Professional App Store agency quality, crisp text, no watermarks
Files included
- SKILL.md

