---
title: 两个实用的 UXC 浏览器 Skill：Chrome DevTools MCP 和 Playwright MCP
date: '2026-03-17 06:41:21'
draft: false
summary: 一个更接近真实调试上下文，一个更适合确定性自动化。关键不是浏览器工具本身，而是 UXC 把它们收成了稳定的调用面。
slug: two-practical-browser-skills
syndication:
- platform: Weibo
  url: https://weibo.com/1648815335/5277470091644875
- platform: X / Twitter
  url: https://x.com/jolestar/article/2033795809259724838
aliases:
- /devtools-mcp-and-playwright-split/
tags:
- uxc
- browser-automation
- mcp
topics:
- ai
- software-engineering
type: post
---

最近试了下 Chrome 的 remote debugging 和 DevTools MCP，也顺手把这两条线封成了两个 UXC skill：`chrome-devtools-mcp-skill` 和 `playwright-mcp-skill`。

这两个 skill 的分工大致是这样。

## 1. `chrome-devtools-mcp-skill`

因为它更接近真实工作流：不是重新起一个隔离浏览器，而是直接让 agent 接进你已经打开的 Chrome 调试现场。

这类场景下，agent 可以做的事情包括：

- 看 Network / Console / Elements
- 分析性能问题
- 复用当前 Chrome 会话
- 接手你已经打开的调试上下文

如果你已经在浏览器里打开了页面、登录了账号、想和 AI 交互，这个 skill 会比较自然。因为 agent 不需要再把整套流程重放一遍，而是直接进入当前浏览器上下文。

这个 skill 会自动创建以下 link 命令：

```bash
uxc link chrome-devtools-mcp-cli "npx -y chrome-devtools-mcp@latest --autoConnect --no-usage-statistics"
chrome-devtools-mcp-cli -h
```

后面就可以让 Codex / Claude Code 通过这个命令接进当前浏览器上下文。

## 2. `playwright-mcp-skill`

这个 skill 更适合确定性的浏览器自动化，比如：

- 打开页面
- 点击
- 抓 DOM / snapshot
- 截图
- 跑一段稳定脚本

但这种方式有一个比较麻烦的问题是：

- head 模式容易干扰桌面
- headless 模式又很难完成真实登录

所以 `playwright-mcp-skill` 提供了一个更实用的方式：

1. 先用有界面的浏览器会话完成登录
2. 把登录态放在明确的 profile 目录里
3. 再让 agent 用同一个 profile 走 headless / CLI 调用

`playwright-mcp-skill` 会自动创建两个 link 命令：

```bash
uxc link --daemon-exclusive ~/.uxc/playwright-profile playwright-mcp-ui \
  "npx -y @playwright/mcp@latest --user-data-dir ~/.uxc/playwright-profile"

uxc link --daemon-exclusive ~/.uxc/playwright-profile playwright-mcp-cli \
  "npx -y @playwright/mcp@latest --headless --user-data-dir ~/.uxc/playwright-profile"
```

这样登录这一步可以留给 UI 模式（`playwright-mcp-ui`），真正让 agent 干活时再切到 headless（`playwright-mcp-cli`），不干扰桌面，两边还共用同一个 profile。

对 server 端 agent 来说，比如你把 OpenClaw 部署到服务器了，这条路也比较现实：先在本地完成登录，再把对应的 browser profile 带到 server，让远端 agent 用 headless 模式复用这个已经完成登录的 profile。

## 这两个 skill 背后，UXC 补的是哪一层

这两个 skill 之所以能比较顺地工作，关键不只是 skill 本身，而是 UXC 把这类 MCP stdio 工具收成了一层统一调用面。

它主要做了几件事：

- 用 `uxc link` 把长命令固化成稳定入口
- 用 daemon 维持会话和进程
- 让 profile / session reuse 变得更自然
- 让 skill 可以围绕固定命令名来组织，而不是每次重写一串启动参数

如果你最近正好在看 agent 怎么更自然地用浏览器，这两个 skill 可以先试试。

安装命令：

```bash
npx -y skills@latest add holon-run/uxc --skill chrome-devtools-mcp-skill
npx -y skills@latest add holon-run/uxc --skill playwright-mcp-skill
```