ui-screenshotlisted

# UI Screenshot — AgentHub Desktop 视觉自动化 ## When to Use - 修改 CSS/布局后需要验证实际渲染效果 - 用户提到"不好看"但没有具体描述，需要截图诊断 - 对标竞品（Codex App / Claude Desktop / Cursor）进行界面分析 - 深色/浅色模式切换后的视觉回归检查 - 验证��应式布局在不同窗口尺寸下的表现 ## When NOT to Use - 纯逻辑/数据流改动不需要截图 - 用户已经提供了截图并明确指出了具体问题 - 单文件 typo 修复 ## 前置依赖 ```bash # Desktop 目录下已安装 playwright cd app/desktop pnpm exec playwright install chromium ``` ## 工作流 ### 1. 启动 Desktop Dev Server Playwright 访问 Vite dev server（而非 Tauri 二进制），避免构建开销： ```bash cd app/desktop # Terminal 1: 启动 dev server pnpm dev # Terminal 2: 启动 Edge Server（提供 mock 数据） cd ../../edge-server go run ./cmd/agenthub-edge --mock ``` ### 2. 截图 使用 `scripts/capture.ts`： ```bash cd app/desktop npx tsx .agents/skills/ui-screenshot/scripts/capture.ts \ --url http://localhost:5173 \ --out screenshots/$(date +%Y%m%d-%H%M%S).png \ --theme dark # dark | light --viewport 1440,900 # width,height --wait 2000 # ms, 等字体/动画稳定 ``` **常用区域裁剪**（添加 `--region x,y,w,h`）： | 区域 | 坐标 (1440x900) | |---|---| | 消息气泡区 | `--region 300,120,840,600` | | 输入框 | `--region 300,740,840,120` | | 侧边栏 | `--region 0,34,280,866` | | 右侧面板 | `--region 1160,120,280,600` | | 顶部栏 | `--region 0,0,1440,34` | ### 3. 竞品对比分析 截图后，自己调用图像分析： 1. **读截图** — `Read` 工具查看生成的 PNG 2. **与竞品对比** — 参考已保存的竞品截图（`screenshots/reference/`） 3. **分析差异** — 用以下维度做结构化对比： - 色彩/对比度（深色模式死黑？浅色模式刺眼？） - 留白/间距（消息太挤？边距失衡？） - 字体层级（标题太大？正文太小？） - 圆角/形状（气泡太圆？按钮太平？） - 交互反馈（hover 态？焦点态？） 4. **生成改进清单** — 最多 3 个最高优先级项 ### 4.