devlab-web-visual-opslisted

# DevLab Web Visual Ops — Web 视觉化操作 ## Purpose 对 **Web 应用**做可重复的视觉化操作：观察页面、导航、交互、检查（Console/Network/Runtime）、验证、截图捕获，并沉淀为 Debug / UI Review / Visual Regression / E2E / Browser Automation 五类 Workflow 的标准化产物。 **定位边界（与 Stagehand 的关系）**：Stagehand 本质是 AI Browser Automation；本技能是范围更大的 Web Visual Operations。因此 **Stagehand 是 Router 层的 AI Adapter 之一，不是 Skill 底座**。Console/Network/Trace/截图/视觉回归/UI Review 是 Skill 自己的核心能力，不抽象成"Stagehand 能力"，避免被具体框架绑死。 ## 适用条件 - 目标是有浏览器 UI 的 Web 应用（SPA / 微前端 / MPA 均可）； - 需要浏览器端到端执行的操作：视觉走查、UI 审查、页面调试、截图对比、视觉回归、浏览器自动化； - 执行环境可运行 Node ≥ 18 + Playwright。**浏览器获取方式可选（三选一）**：① `npx playwright install chromium` 自动下载到 ms-playwright 缓存；② 复用已有 ms-playwright 缓存；③ 系统 Chrome/Edge（`executablePath` 或 `channel`）。**无头模式默认可用**：Playwright 与 Vision/CUA 路径还可用更轻的 `chromium_headless_shell`（实测三项全 PASS）。 - Stagehand AI 增强路径需 Node ≥ 22.18.0 + newapi 消费 key（`chat_default` 模型，见 infra-aimodel-ops）；**必须完整 Chromium（headless 模式即可，实测全 PASS），headless shell 不支持扩展注入（实测失败）**； - 无 DOM 或 DOM 不可靠的场景（canvas / 复杂 iframe / 纯视觉渲染）走 Vision/CUA 兜底。 ## 核心设计：三层架构 ``` devlab-web-visual-ops │ ├── Core 能力原语（Observe / Navigate / Interact / Inspect / Validate / Capture） ├── Router 执行路由（Playwright / Stagehand / DevTools / Vision-CUA） └── Workflows 业务闭环（Debug / UI Review / Visual Regression / E2E / Browser Automation） ``` 1. **Core 定义"做什么"**，与具体执行器解耦；所有 Workflow 只调用 Core 原语。 2. **Router 决定"用谁执行"**：默认确定性执行（Playwright）；AI 增强/非确定性页面切 Stagehand；Console/Network/Runtime 检查走 DevTools；无 DOM 走 Vision/CUA