Back to Details

app-screenshots

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

App Screenshots

应用截图

Systematically capture every view/screen of an application for marketing, product sites, README assets, and documentation.
系统性捕获应用的所有视图/屏幕，用于营销、产品网站、README资源和文档。

Workflow

工作流程

1. Discover all views/screens in the app
2. Build + launch the app (if not already running)
3. Navigate to each view and screenshot it
4. Save named screenshots to output directory
5. Generate a manifest (summary.md)
1. 发现应用中的所有视图/屏幕
2. 构建并启动应用（如果尚未运行）
3. 导航到每个视图并截取截图
4. 将命名后的截图保存到输出目录
5. 生成清单（summary.md）

Step 1: Discover Views

步骤1：发现视图

Analyze the project to enumerate all distinct views/screens. Methods by project type:
Swift/SwiftUI macOS apps: Grep for 
View
structs, 
WindowGroup
, 
Window
, 
Settings
, sheets, popovers, menu bar panels. Check for multiple window types, onboarding flows, settings tabs.
Web apps: Check routes (React Router, Next.js pages, Express routes). Each route = one screenshot minimum. Also check for modals, drawers, settings panels.
Electron apps: Check 
BrowserWindow
creation, route handlers, IPC window openers.
Present the discovered view list to the user for confirmation before proceeding:
Found 8 views:
1. Main window (default state)
2. Settings > General
3. Settings > Appearance
4. Settings > Shortcuts
5. Popdown menu
6. Onboarding wizard
7. Empty state
8. Active session state

Proceed? Any views to add/skip?
分析项目以枚举所有不同的视图/屏幕。按项目类型分类的方法：
Swift/SwiftUI macOS应用：搜索
View
结构体、
WindowGroup
、
Window
、
Settings
、表单、弹出框、菜单栏面板。检查多种窗口类型、引导流程、设置标签页。
Web应用：检查路由（React Router、Next.js页面、Express路由）。每个路由至少对应一张截图。同时检查模态框、侧边栏、设置面板。
Electron应用：检查
BrowserWindow
创建、路由处理器、IPC窗口打开器。
在继续之前，将发现的视图列表呈现给用户确认：
发现8个视图：
1. 主窗口（默认状态）
2. 设置 > 通用
3. 设置 > 外观
4. 设置 > 快捷键
5. 下拉菜单
6. 引导向导
7. 空状态
8. 活动会话状态

是否继续？是否有视图需要添加/跳过？

Step 2: Build + Launch

步骤2：构建并启动

Build and launch the app if it's not already running. If it is, skip this step.
如果应用尚未运行，则构建并启动它。如果已运行，则跳过此步骤。

Step 3: Capture Each View

步骤3：捕获每个视图

Navigate to each view and capture it. Sequential only -- one view at a time.
导航到每个视图并捕获截图。仅按顺序执行——一次一个视图。

macOS Native Apps (Swift/SwiftUI)

macOS原生应用（Swift/SwiftUI）

bash
undefined
bash
undefined

Get window ID for the app

获取应用的窗口ID

WINDOW_ID=$(osascript -e 'tell application "System Events" to get id of first window of (first process whose name is "AppName")')
WINDOW_ID=$(osascript -e 'tell application "System Events" to get id of first window of (first process whose name is "AppName")')

Screenshot specific window (no shadow, no sound)

截取特定窗口（无阴影，无声音）

screencapture -l $WINDOW_ID -o -x "$OUTPUT_DIR/view-name.png"

For views that require navigation (settings tabs, popovers):
- Use AppleScript or accessibility APIs to click/navigate
- Or instruct the user: "Please open Settings > Appearance, then press Enter"
- Wait, then capture

For menu bar apps:
```bash
screencapture -l $WINDOW_ID -o -x "$OUTPUT_DIR/view-name.png"

对于需要导航的视图（设置标签页、弹出框）：
- 使用AppleScript或辅助功能API进行点击/导航
- 或指示用户：“请打开设置 > 外观，然后按回车键”
- 等待后再捕获

对于菜单栏应用：
```bash

Activate the menu bar item first

先激活菜单项

osascript -e 'tell application "AppName" to activate' sleep 1 screencapture -l $WINDOW_ID -o -x "$OUTPUT_DIR/popdown.png"
undefined
osascript -e 'tell application "AppName" to activate' sleep 1 screencapture -l $WINDOW_ID -o -x "$OUTPUT_DIR/popdown.png"
undefined

Web Apps

Web应用

Use Puppeteer or Playwright to navigate each route and screenshot:
javascript
for (const route of routes) {
  await page.goto(`${baseUrl}${route.path}`, { waitUntil: 'networkidle2' });
  await page.screenshot({ path: `${outputDir}/${route.name}.png` });
}
For modals/drawers, click the trigger element first, wait for animation, then capture.
使用Puppeteer或Playwright导航每个路由并截取截图：
javascript
for (const route of routes) {
  await page.goto(`${baseUrl}${route.path}`, { waitUntil: 'networkidle2' });
  await page.screenshot({ path: `${outputDir}/${route.name}.png` });
}
对于模态框/侧边栏，先点击触发元素，等待动画完成后再捕获。

Multiple Viewport Sizes (Optional)

多视口尺寸（可选）

If user wants responsive shots (common for marketing):
viewports:
  - { name: "desktop", width: 1920, height: 1080 }
  - { name: "laptop",  width: 1440, height: 900  }
  - { name: "tablet",  width: 768,  height: 1024 }
  - { name: "mobile",  width: 375,  height: 812  }
如果用户需要响应式截图（营销中常见）：
viewports:
  - { name: "desktop", width: 1920, height: 1080 }
  - { name: "laptop",  width: 1440, height: 900  }
  - { name: "tablet",  width: 768,  height: 1024 }
  - { name: "mobile",  width: 375,  height: 812  }

Step 4: Output

步骤4：输出

Default output directory:
{project-dir}/screenshots/{YYYY-MM-DD}/
Override with any user-specified path.
默认输出目录：
{project-dir}/screenshots/{YYYY-MM-DD}/
可通过用户指定的路径覆盖。

Naming Convention

命名规则

{output-dir}/
  01-main-window.png
  02-settings-general.png
  03-settings-appearance.png
  04-popdown-menu.png
  05-onboarding.png
  ...
  summary.md
Number prefix keeps order. Slug from view name.
{output-dir}/
  01-main-window.png
  02-settings-general.png
  03-settings-appearance.png
  04-popdown-menu.png
  05-onboarding.png
  ...
  summary.md
数字前缀保持顺序。从视图名称生成短标识。

Step 5: Summary

步骤5：摘要

Generate 
summary.md
:
markdown
undefined
生成
summary.md
：
markdown
undefined

{App Name} - Screenshots

{应用名称} - 截图

Date: YYYY-MM-DD Build: {git hash or version}
#ViewFileNotes
1Main Window01-main-window.pngDefault state
2Settings - General02-settings-general.png
...
undefined
日期：YYYY-MM-DD 构建版本：{git哈希或版本号}
#视图文件备注
1主窗口01-main-window.png默认状态
2设置 - 通用02-settings-general.png
...
undefined

Rules

规则

  • Always confirm the view list with user before starting captures
  • Number screenshots for consistent ordering
  • Include app version or git hash in summary for traceability
  • If a view requires user interaction to reach (e.g., login, specific data state), ask the user to navigate there and confirm
  • Use whatever capture method fits the project -- don't force a specific tool
  • For dark/light mode apps, offer to capture both variants
  • For apps with multiple states (empty, loading, error, populated), capture each distinct state
  • 开始捕获前始终与用户确认视图列表
  • 为截图编号以保持一致的顺序
  • 在摘要中包含应用版本或git哈希以确保可追溯性
  • 如果某个视图需要用户交互才能到达（例如登录、特定数据状态），请要求用户导航到该位置并确认
  • 使用适合项目的捕获方法——不要强制使用特定工具
  • 对于支持深色/浅色模式的应用，主动提供捕获两种变体的选项
  • 对于具有多种状态（空、加载、错误、已填充）的应用，捕获每个不同的状态