SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场agentation

agentation

编程与开发

查看项目

更新于 10-15 14:21

技能介绍

用途

Agentation 是仓库中的「已渲染 UI 反馈桥接」工具。当人类需要点击真实 UI、把反馈附着到确切的元素或区域，并把结构化数据包传给编码智能体时使用它。它的主要工作是标注路由：选择合适的标注模式、采集精确证据，然后把修复循环交给合适的相邻技能或智能体运行时。

何时使用

当任务需要以下一项或多项时使用 agentation：

  • 人类评审者指向真实 UI 元素，而不是含糊描述
  • 带选择器、元素路径、边界框或复制 Markdown 的结构化反馈包
  • 浏览器与编码智能体之间的本地复制粘贴评审循环
  • 由 MCP 支持的同步/监听循环，新标注自动流入智能体上下文
  • 仍以已渲染 UI 证据为起点的自驱动评审/修复循环
  • 把待处理 UI 标注传入 Claude Code、Codex、Gemini CLI 或 OpenCode 的平台配置

默认不要用于：

  • 全新会话的浏览器验证或确定性回归检查 → browser-harness
  • 运行中浏览器、已登录或依赖扩展的浏览器复用 → playwriter
  • 计划评审、差异批准或对提案产物的视觉签核 → plannotator
  • 没有具体已渲染 UI 数据包的通用设计系统、无障碍或启发式审计

快速路由规则

  • 需要人类点击 UI 并给智能体留下精确反馈 → agentation
  • 需要在干净可重复会话中做浏览器验证 → browser-harness
  • 需要用户已打开的浏览器、Cookie 或已登录标签页 → playwriter
  • 需要在执行前评审或批准计划/差异 → plannotator

使用方式

第 1 步：选择正确的标注模式

在接触配置细节前先选定一种模式：

  • 复制粘贴评审：一位评审者想标注 UI 并把数据包粘贴到聊天中，输出结构化 Markdown 数据包
  • 同步监听循环：新标注应自动出现在智能体工作流中，输出待处理标注队列 + 循环
  • 自驱动评审：智能体/浏览器循环会反复生成或消费标注，输出评审/修复循环数据包
  • 平台配置：核心问题在于把标注桥接接入 Claude/Codex/Gemini/OpenCode，输出配置清单和配置目标

如果任务实际上是「测试网站」或「驱动已登录浏览器」，先路由出去，只有当缺失的部分确实是精确的人类 UI 反馈时再回到 agentation。

第 2 步：明确浏览器边界

agentation 不替代浏览器运行时选择。

  • 想要干净的一次性验证浏览器时用 browser-harness
  • 必须复用用户真实浏览器会话时用 playwriter
  • 当已有渲染页面需要人类或循环精确标注时用 agentation

第 3 步：遵循核心循环

  1. 准备已渲染 UI（如需要，先选择正确的浏览器/运行时技能）
  2. 在开发环境中把 Agentation 工具栏加入应用
  3. 选择标注模式：复制粘贴、监听循环、自驱动或配置
  4. 采集一个具体的 UI 数据包
  5. 把数据包交给编码智能体
  6. 修复后用同一条评审通道重新验证

第 4 步：使用最快且安全的安装路径

对大多数配置，实际顺序是：

# React toolbar
npm install agentation -D

# MCP bridge / auto-registration for supported agents
npx add-mcp "npx -y agentation-mcp server"

# verify the bridge
npx agentation-mcp doctor

Claude Code 用户也可以安装上游官方技能，当这是引导体验最简单的方式时：

npx skills add benjitaylor/agentation -g
# then use /agentation in Claude Code

第 5 步：先使用最小工具栏集成

从最小的可用嵌入开始：

import { Agentation } from 'agentation';

function App() {
  return (
    <>
      <YourApp />
      {process.env.NODE_ENV === 'development' && <Agentation />}
    </>
  )
}

只有当所选模式确实需要时，才添加 endpoint、回调或 webhook 行为。

第 6 步：选择正确的交接模式

A. 复制粘贴评审

当人类正在主动评审页面并把数据包粘贴到智能体聊天中时使用。适合：快速 bug/UI 打磨轮次、一次性定向修复、低配置协作。

B. 同步监听循环

当智能体应持续轮询或摄取待处理标注时使用。适合：重复的 QA/修复轮次、设计师 ↔ 智能体循环、活跃前端工作期间的本地评审队列。在信任该循环前，使用捆绑的验证脚本：

bash .agent-skills/agentation/scripts/verify-loop.sh

C. 自驱动评审

当智能体/浏览器循环反复评审 UI，而 agentation 是结构化反馈数据包（而非浏览器运行时本身）时使用。典型形态：浏览器工具捕获当前状态 → agentation 编码具体反馈目标 → 编码智能体应用修复 → 浏览器工具复查结果。

第 7 步：保持平台配置聚焦

当请求实际是关于平台接线时，只回答：配置在哪里、agentation-mcp 如何注册、待处理标注如何进入智能体循环、如何验证配置。把平台特定配置块放入参考文档，而不是塞进主工作流。

脚本

优先使用捆绑脚本，而不是重新输入长命令：

  • scripts/setup-agentation-mcp.sh：为支持的智能体注册 MCP 桥接
  • scripts/verify-loop.sh：验证标注队列 / ACK → RESOLVE 风格的监听循环行为

示例

示例 1：人类评审者想要精确 UI 反馈

提示：「我可以指出坏掉的结账按钮，但不想手动描述选择器。」

预期行为：选择 agentation，推荐复制粘贴评审或同步模式，保持浏览器运行时选择独立。

示例 2：浏览器验证才是真正的工作

提示：「运行可重复的无头 UI 回归检查并比较结果。」

预期行为：路由到 browser-harness，而不是 agentation，除非人类标注成为后续步骤。

示例 3：已登录浏览器复用

提示：「使用我已经登录的浏览器，让我标注一个账单页面问题。」

预期行为：把浏览器运行时路由到 playwriter，然后用 agentation 处理标注数据包。

示例 4：计划评审而非 UI 评审

提示：「在浏览器中打开生成的计划，以便我在编码开始前批准或拒绝步骤。」

预期行为：路由到 plannotator，因为产物是计划/差异而非已渲染 UI 问题。

最佳实践

  • 先选择浏览器/运行时通道；agentation 是反馈桥接，不是所有浏览器工具
  • 一次只偏好一种标注模式，不要在单个回答中混合复制粘贴、监听循环和平台配置
  • 保持首次集成最小化；只有当工作流需要时才添加钩子、回调或 webhook
  • 修复后用产生该标注的同一条评审通道重新验证
  • 把精确 UI 反馈视为交付物，而不是一大堆安装排列组合
  • 当任务实际是计划评审、全新浏览器验证或运行中浏览器复用时，果断路由出去

参考

本技能中的深入文档：

  • modes-and-routing
  • platform-setup-and-hooks
  • watch-loop-and-self-driving

主要来源：

  • https://github.com/benjitaylor/agentation
  • https://agentation.com
  • https://www.npmjs.com/package/agentation
  • https://www.npmjs.com/package/agentation-mcp

元数据

  • 版本：1.1.0
  • 最后更新：2026-04-15
  • 范围：面向编码智能体的精确已渲染 UI 反馈数据包、监听循环和平台交接