asc-app-shots-prompt

App 截图提示词生成器

分析应用截图，并生成详细、经过优化的提示词，用于运行 asc app-shots generate --prompt "..."，制作专业的 App Store 宣传截图。

asc app-shots generate 中的通用默认提示词效果还不错，但自定义提示词如果明确指定具体 UI 面板、确切的标题文本和颜色，效果会好得多，因为 Gemini 能得到具体指示，不必自行猜测。

工作原理

1. 读取用户的截图
2. 分析屏幕上的内容
3. 生成包含 6 个具体组成部分的提示词
4. 输出可直接运行的命令

第 1 步 — 读取截图

询问用户截图路径；如果用户已经提供了路径，则立即使用 Read 工具读取。仔细查看图片。

第 2 步 — 分析图片

从截图中提取以下细节：

应用身份：

• 这是什么类型的应用？（天气、健身、金融、社交等）
• 如果能看到应用名称，名称是什么？
• 目标受众是谁？

视觉元素：

• 主色调是什么？（深色／浅色模式、强调色）
• 能看到哪些 UI 组件？（列表、图表、卡片、地图、按钮）
• 显示了哪些数据或内容？（具体文本、数字、标签）

突出展示候选项：

• 哪个单独的 UI 面板或卡片最具视觉吸引力？
• 必须是完整的区域（不能是单个按钮或图标）
• 应该与应用的核心价值主张相关

宣传角度：

• 用户使用此应用能获得的首要好处是什么？
• 哪个动作动词最能体现这一点？（TRACK、FIND、CREATE、MANAGE、BOOST 等）
• 这张截图在缩略图尺寸下有什么吸引力？

第 3 步 — 生成提示词

按照以下确切结构编写提示词。每个字段都必须针对这张截图，不要使用通用占位内容。

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

组成部分指南

标题（动作动词 + 好处）：

• 2–4 个词，全部大写
• 以有力的动作动词开头：TRACK、FIND、CREATE、MANAGE、BOOST、DISCOVER、BUILD、PLAN、MONITOR、ORGANIZE
• 好处应具体明确："TRACK CARD PRICES"，而非 "MANAGE STUFF"
• 应能让人停下滚动

副标题：

• 6–10 个词，句首字母大写，使用斜体
• 补充标题，阐述相关好处
• 示例："专业级预测触手可及"、"每张卡牌的价值实时更新"

突出展示元素：

• 指出屏幕上可见的确切 UI 面板（例如："Forecast Model Runs 开关面板"、"Portfolio Summary 卡片"、"Recent Transactions 列表"）
• 必须是完整的卡片／区域，不能是单个按钮或图标
• 如果没有能明显强化标题的面板，请写上 "无突出展示元素 — 应用屏幕本身就足以说明一切"

背景：

• 深色应用 → 深色渐变（深海军蓝 #0A1628 到黑色 #000000，或深紫色 #1A0A2E 到黑色）
• 浅色应用 → 浅色渐变（柔和蓝色 #E8F4FD 到白色，或暖奶油色 #FFF8F0 到白色）
• 渐变应与应用的配色相得益彰，而不是产生冲突

辅助元素：

• 能强化价值的小型情境徽章
• 示例："4.9★" 评分、"69°F" 温度、"$1,234" 投资组合价值、"12 条新通知"通知计数
• 必须与屏幕上实际显示的内容相关

第 4 步 — 输出命令

向用户展示提示词，然后输出可直接运行的命令：

asc app-shots generate \
  --file <screenshot-path> \
  --prompt '<the generated prompt>' \
  --device-type APP_IPHONE_67 \
  --output-dir .asc/app-shots/output

如果用户提供了参考截图，也请建议一个风格参考变体：

asc app-shots generate \
  --file <screenshot-path> \
  --style-reference <reference-path> \
  --device-type APP_IPHONE_67 \
  --output-dir .asc/app-shots/output

使用 --device-type 将输出调整为精确的 App Store 尺寸。常见类型：

• APP_IPHONE_69（1320×2868）— iPhone 6.9 英寸
• APP_IPHONE_67（1290×2796）— iPhone 6.7 英寸
• APP_IPAD_PRO_129（2048×2732）— iPad 13 英寸

示例

天气应用输入

截图显示：旧金山天气，包含温度图表、风速、降水数据和“Forecast Model Runs”开关。

生成的提示词：

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

金融应用输入

截图显示：股票投资组合，包含持仓列表、饼图资产配置，总价值为 $45,230。

生成的提示词：

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