makepad-screenshot

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Makepad Screenshot Skill

Makepad 截图技能

Automated screenshot debugging for Makepad GUI applications

针对Makepad GUI应用的自动化截图调试工具

Trigger Words

触发指令

```
/screenshot
```
- Capture current running Makepad app
```
/screenshot <app-name>
```
- Capture specific app
```
/run-and-capture <package>
```
- Build, run and capture
"截图", "看看UI", "查看界面", "capture makepad"

```
/screenshot
```
- 捕获当前运行的Makepad应用
```
/screenshot <app-name>
```
- 捕获指定应用
```
/run-and-capture <package>
```
- 构建、运行并捕获
"截图"、"看看UI"、"查看界面"、"capture makepad"

Features

功能特性

Automates visual debugging workflow for Makepad apps:

Bring app window to front
Capture screenshot
Analyze screenshot with Read tool
Report UI issues or confirm correct rendering

为Makepad应用自动化视觉调试工作流：

将应用窗口前置
截取屏幕截图
使用Read工具分析截图
报告UI问题或确认渲染正确

Usage

使用方法

1. Capture Current Running App

1. 捕获当前运行的应用

/screenshot

Auto-detects and captures windows containing "makepad" or current project name.

/screenshot

自动检测并捕获包含"makepad"或当前项目名称的窗口。

2. Capture Specific App

2. 捕获指定应用

/screenshot a2ui-demo

Captures app with window name containing "a2ui".

/screenshot a2ui-demo

捕获窗口名称包含"a2ui"的应用。

3. Build, Run and Capture

3. 构建、运行并捕获

/run-and-capture a2ui-demo

Full workflow: cargo build → cargo run → wait for startup → capture.

/run-and-capture a2ui-demo

完整工作流：cargo build → cargo run → 等待启动 → 截图。

Implementation Steps

实现步骤

Step 1: Detect Running App

步骤1：检测运行中的应用

bash

undefined

bash

undefined

Find Makepad-related processes

ps aux | grep -E "(makepad|cargo.*run)" | grep -v grep

undefined

ps aux | grep -E "(makepad|cargo.*run)" | grep -v grep

undefined

Step 2: Bring Window to Front (macOS)

步骤2：将窗口前置（macOS）

bash

undefined

bash

undefined

Generic pattern - match by process name

osascript -e 'tell application "System Events" to set frontmost of (first process whose name contains "APP_NAME") to true'

Example

osascript -e 'tell application "System Events" to set frontmost of (first process whose name contains "a2ui") to true'

undefined

osascript -e 'tell application "System Events" to set frontmost of (first process whose name contains "a2ui") to true'

undefined

Step 3: Capture to Scratchpad

步骤3：将截图保存到临时工作区

bash

undefined

bash

undefined

Silent capture (-x suppresses shutter sound)

screencapture -x $SCRATCHPAD/screenshot.png

undefined

screencapture -x $SCRATCHPAD/screenshot.png

undefined

Step 4: View with Read Tool

步骤4：使用Read工具查看

Read $SCRATCHPAD/screenshot.png

Claude's Read tool supports image files and can directly analyze screenshot content.

Read $SCRATCHPAD/screenshot.png

Claude的Read工具支持图片文件，可直接分析截图内容。

Complete Automation Script

完整自动化脚本

Capture Current App

捕获当前应用

bash

APP_NAME="${1:-makepad}"
SCRATCHPAD="${SCRATCHPAD_DIR:-/tmp}"
SCREENSHOT="$SCRATCHPAD/makepad_screenshot_$(date +%H%M%S).png"

bash

APP_NAME="${1:-makepad}"
SCRATCHPAD="${SCRATCHPAD_DIR:-/tmp}"
SCREENSHOT="$SCRATCHPAD/makepad_screenshot_$(date +%H%M%S).png"

Bring to front

osascript -e "tell application "System Events" to set frontmost of (first process whose name contains "$APP_NAME") to true" 2>/dev/null

sleep 0.5

osascript -e "tell application "System Events" to set frontmost of (first process whose name contains "$APP_NAME") to true" 2>/dev/null

sleep 0.5

Capture

screencapture -x "$SCREENSHOT"

echo "$SCREENSHOT"

undefined

screencapture -x "$SCREENSHOT"

echo "$SCREENSHOT"

undefined

Build, Run and Capture

构建、运行并捕获

bash

PACKAGE="$1"
SCRATCHPAD="${SCRATCHPAD_DIR:-/tmp}"
SCREENSHOT="$SCRATCHPAD/${PACKAGE}_$(date +%H%M%S).png"

bash

PACKAGE="$1"
SCRATCHPAD="${SCRATCHPAD_DIR:-/tmp}"
SCREENSHOT="$SCRATCHPAD/${PACKAGE}_$(date +%H%M%S).png"

Kill old process

pkill -f "$PACKAGE" 2>/dev/null

Build and run

cargo build -p "$PACKAGE" &&
(cargo run -p "$PACKAGE" 2>&1 &) &&
sleep 5 &&
osascript -e "tell application "System Events" to set frontmost of (first process whose name contains "$PACKAGE") to true" &&
sleep 1 &&
screencapture -x "$SCREENSHOT"

echo "$SCREENSHOT"

undefined

echo "$SCREENSHOT"

undefined

Claude Execution Flow

Claude 执行流程

When user says "截图" or "/screenshot":

Detect App

bash

ps aux | grep -E "cargo.*run|makepad" | grep -v grep | head -1

Determine App Name
- Extract from process list
- Or use current project's package name

Execute Screenshot

bash

osascript -e 'tell application "System Events" to set frontmost of (first process whose name contains "APP") to true'
sleep 0.5
screencapture -x /path/to/scratchpad/screenshot.png

Read and Analyze
```
Read /path/to/scratchpad/screenshot.png
```
Report Results
- Describe visible UI elements
- Point out any issues (layout, colors, missing components)
- Confirm functionality

当用户说"截图"或 "/screenshot":

检测应用

bash

ps aux | grep -E "cargo.*run|makepad" | grep -v grep | head -1

确定应用名称
- 从进程列表中提取
- 或使用当前项目的包名

执行截图

bash

osascript -e 'tell application "System Events" to set frontmost of (first process whose name contains "APP") to true'
sleep 0.5
screencapture -x /path/to/scratchpad/screenshot.png

读取并分析
```
Read /path/to/scratchpad/screenshot.png
```
报告结果
- 描述可见的UI元素
- 指出任何问题（布局、颜色、缺失组件）
- 确认功能正常

Notes

注意事项

macOS Only - Uses
```
screencapture
```
and
```
osascript
```
Permission Required - osascript needs accessibility permission
Window Occlusion - Must bring to front first
Startup Time - Need to sleep after cargo run to wait for window
Scratchpad - Use session-specific scratchpad directory for screenshots

仅支持macOS - 使用
```
screencapture
```
和
```
osascript
```
需要权限 - osascript需要辅助功能权限
窗口遮挡 - 必须先将窗口前置
启动时间 - cargo run后需要等待一段时间让窗口加载
临时工作区 - 使用会话专属的临时工作区目录存储截图

Example Interactions

示例交互

Example 1: Quick Screenshot

示例1：快速截图

User: 截图看看现在的 UI

Claude:
1. Detected running a2ui-demo
2. Execute screenshot command
3. Read screenshot file
4. Analysis: "UI displays normally, TextField shows input '你好', product list rendered 3 cards..."

用户: 截图看看现在的 UI

Claude:
1. 检测到运行中的a2ui-demo
2. 执行截图命令
3. 读取截图文件
4. 分析结果: "UI显示正常，TextField显示输入内容'你好'，产品列表渲染了3个卡片..."

Example 2: Build Run and Capture

示例2：构建、运行并捕获

User: /run-and-capture a2ui-demo

Claude:
1. pkill old process
2. cargo build -p a2ui-demo
3. cargo run -p a2ui-demo &
4. sleep 5 wait for startup
5. Capture and analyze

用户: /run-and-capture a2ui-demo

Claude:
1. 终止旧进程
2. cargo build -p a2ui-demo
3. cargo run -p a2ui-demo &
4. 等待5秒启动应用
5. 截图并分析

Example 3: Verify Two-way Binding

示例3：验证双向绑定

User: I entered "Hello😊" in TextField, help me verify two-way binding with screenshot

Claude:
1. Execute screenshot, save to scratchpad
2. Read screenshot, analyze UI
3. Output verification report:

   ┌────────────────────────────────────────┐
   │ A2UI Demo - Product Catalog           │
   ├────────────────────────────────────────┤
   │ [Search Products]                      │
   │ ┌──────────────────────────────────┐  │
   │ │ Hello😊                          │  │ ← TextField shows input
   │ └──────────────────────────────────┘  │
   │ Hello😊                               │ ← Text (caption) synced
   │                                        │
   │ Products (Template Rendering)          │
   │ ┌──────────────────────────────────┐  │
   │ │ Premium Headphones | $99.99 | +  │  │
   │ └──────────────────────────────────┘  │
   └────────────────────────────────────────┘

   ✅ Two-way binding verification successful:
   | Component | Binding Path | Display Content |
   |-----------|--------------|-----------------|
   | TextField | /search/query | Hello😊 |
   | Text (caption) | /search/query | Hello😊 |

用户: 我在TextField中输入了"Hello😊"，帮我用截图验证双向绑定

Claude:
1. 执行截图，保存到临时工作区
2. 读取截图，分析UI
3. 输出验证报告:

   ┌────────────────────────────────────────┐
   │ A2UI Demo - Product Catalog           │
   ├────────────────────────────────────────┤
   │ [Search Products]                      │
   │ ┌──────────────────────────────────┐  │
   │ │ Hello😊                          │  │ ← TextField显示输入内容
   │ └──────────────────────────────────┘  │
   │ Hello😊                               │ ← 文本（标题）已同步
   │                                        │
   │ Products (Template Rendering)          │
   │ ┌──────────────────────────────────┐  │
   │ │ Premium Headphones | $99.99 | +  │  │
   │ └──────────────────────────────────┘  │
   └────────────────────────────────────────┘

   ✅ 双向绑定验证成功:
   | 组件       | 绑定路径       | 显示内容   |
   |-----------|--------------|----------|
   | TextField | /search/query | Hello😊 |
   | 文本（标题） | /search/query | Hello😊 |

UI Analysis Report Format

UI分析报告格式

After screenshot, Claude should provide structured analysis:

截图后，Claude应提供结构化分析：

Basic Report

基础报告

markdown

undefined

markdown

undefined

Screenshot Analysis

截图分析

Application: a2ui-demo Time: 2026-02-01 14:30:00 Window State: Normal display

应用: a2ui-demo 时间: 2026-02-01 14:30:00 窗口状态: 正常显示

UI Elements

UI元素

Element	Type	Content/State
Title	Label	"A2UI Demo - Product Catalog"
Search Box	TextField	Empty/Has input
Product List	PortalList	3 cards

元素	类型	内容/状态
标题	Label	"A2UI Demo - Product Catalog"
搜索框	TextField	空/已输入内容
产品列表	PortalList	3个卡片

Issue Detection

问题检测

✅ Layout normal
✅ Text rendering normal
⚠️ Image not loaded (network image)

undefined

✅ 布局正常
✅ 文本渲染正常
⚠️ 图片未加载（网络图片）

undefined

Function Verification Report

功能验证报告

markdown

undefined

markdown

undefined

Function Verification: TextField Two-way Binding

功能验证：TextField双向绑定

Test Scenario: User enters content in TextField, verify data model sync

测试场景: 用户在TextField中输入内容，验证数据模型同步

Verification Result

验证结果

Component	Binding Path	Expected	Actual	Status
TextField	/search/query	Hello😊	Hello😊	✅
Text (caption)	/search/query	Hello😊	Hello😊	✅

组件	绑定路径	预期值	实际值	状态
TextField	/search/query	Hello😊	Hello😊	✅
文本（标题）	/search/query	Hello😊	Hello😊	✅

Conclusion

结论

✅ Two-way binding works correctly

Unicode Chinese characters: ✅
Emoji characters: ✅
Real-time sync: ✅

undefined

✅ 双向绑定功能正常

Unicode中文字符: ✅
表情符号: ✅
实时同步: ✅

undefined

Common Issue Troubleshooting

常见问题排查

Window Cannot Be Brought to Front

窗口无法前置

bash

undefined

bash

undefined

Check if process is running

ps aux | grep -E "a2ui|makepad" | grep -v grep

Try using process ID

osascript -e 'tell application "System Events" to set frontmost of (first process whose unix id is PID) to true'

undefined

osascript -e 'tell application "System Events" to set frontmost of (first process whose unix id is PID) to true'

undefined

Screenshot is Black Screen

截图为黑屏

Possible causes:

Window occluded by other windows - bring to front first
App still starting - increase sleep time
GPU rendering delay - wait 1-2 seconds before capture

可能原因：

窗口被其他窗口遮挡 - 先将窗口前置
应用仍在启动中 - 增加等待时间
GPU渲染延迟 - 截图前等待1-2秒

App Name Matching Issues

应用名称匹配问题

Makepad compiled app names are usually package names (underscores to hyphens):

```
a2ui-demo
```
→ process name contains
```
a2ui
```
or
```
a2ui-demo
```
```
my_app
```
→ process name contains
```
my_app
```
or
```
my-app
```

Makepad编译后的应用名称通常为包名（下划线转为连字符）：

```
a2ui-demo
```
→ 进程名称包含
```
a2ui
```
或
```
a2ui-demo
```
```
my_app
```
→ 进程名称包含
```
my_app
```
或
```
my-app
```