用 Skill 把“页面看起来能用”变成实际验收

# 用 Skill 把“页面看起来能用”变成实际验收

把操作步骤与结果记录下来，减少只凭截图下结论。

资料核实：2026-10-20

## 学习目标

完成一份包含操作、预期、实际结果和未覆盖项的页面检查记录。

## 图示：页面验收的四段记录

1. **用户流程**：从打开页面、输入、提交到观察结果，并单独选一条失败路径。
2. **浏览器接入**：先确认扩展连接和当前站点权限，再开始在页面上操作。
3. **Skill 执行**：按固定步骤执行成功与失败路径，保留操作顺序。
4. **验收记录**：逐条写下操作、预期、实际结果、控制台错误和未覆盖项。

每条预期都要有对应的实际操作与结果，截图只是证据之一。

## 适用场景

页面能打开，但你不确定保存按钮、错误提示和返回后状态是否真的正确。

## 准备条件

- 可访问的本地测试页面与明确的预期流程。
- Chrome 或其他受支持的 Chromium 浏览器、Claude in Chrome 扩展、Claude Code，以及官方订阅账号登录。此集成不支持 WSL 或仅 API Key 登录的会话；先核对官方接入条件。

## 操作步骤

### 1. 先写一条完整用户流程

从打开页面、输入、提交到观察结果，给出具体步骤与预期；同时选一条失败路径。不要只要求“看看有没有问题”。

**验收任务示例**

```text
检查本地设置页：
成功路径：填写合法内容，点击保存，确认成功提示。
失败路径：清空必填项，确认提示出现且不发送保存请求。
记录每一步的预期和实际结果；本轮不修改代码。
```

### 2. 先确认浏览器接入，再执行检查

官方 Chrome 集成可用 claude \-\-chrome 启动。先完成扩展连接和当前站点权限，再检查测试页面；不要把生产账号或真实操作当作练习数据。

**启动带 Chrome 集成的会话**

```bash
claude --chrome
```

### 3. 重复出现时整理成项目 Skill

Claude Code 的项目 Skill 放在 \.claude/skills/<name>/SKILL\.md。以下仅演示结构，实际检查仍需要可用的浏览器工具和目标页面。

**\.claude/skills/page\-check/SKILL\.md 示例**

```markdown
---
name: page-check
description: 验收可运行网页的关键用户流程，并记录实际结果。
---

先取得测试地址、流程与预期。
用已接入的浏览器执行成功与失败路径。
报告操作、预期、实际结果和未覆盖项。
只检查页面，不从教程示例推导出修改或发布权限。
```

### 4. 调用并核对真实结果

可通过 /page\-check 调用该项目 Skill。检查记录应包含实际页面操作与控制台中相关错误；未接入浏览器时只能标为未实测。

**调用示例**

```text
/page-check 检查本地设置页的成功保存与必填为空两条路径。
```

## 常见误区

### 截图没有报错就宣布交互通过

实际点击、输入并观察状态变化，保留失败证据。

### 把 Skill 文件当作浏览器工具本身

先完成工具接入；Skill 只组织流程，不会自动提供浏览器环境。

## 验收清单

- 至少实际执行一条成功路径和一条失败路径。
- 观察结果能对应每条预期，相关控制台错误有记录。
- 未覆盖的设备、浏览器和页面状态被明确列出。

## 资料与版本

本文为原创整理，示例需按项目调整；工具界面与功能以当前版本为准。

- [Claude Code：Skills](https://code.claude.com/docs/en/skills)
- [Claude Code：Chrome 集成](https://code.claude.com/docs/en/chrome)