Agentation 是 benjitaylor 出品的
本资源包含什么
完整 monorepo 源码：来自 GitHub
benjitaylor/agentationmain 分支（npm 包名 agentation），含package/（React 主组件）+mcp/（MCP Server）+skills/（Claude Code Skills 模板）+example/（演示 React 应用）。React 主组件：
package/src/内 TypeScript 实现的 <Agentation />，含 hooks / store / 注释面板 / 结构化输出。MCP Server：
mcp/src/实现 Model Context Protocol，可被 Claude Desktop / Cursor 直接调用。Claude Code Skills：
skills/agentation/与skills/agentation-self-driving/两个 skill 模板，含 SKILL.md 与 reference 文档。官方文档：
README.md、AGENTS.md、CLAUDE.md、CONTRIBUTING.md、LICENSE。logo 资源：
package/logo.svg+package/logo-dark.svg。
核心能力
点击添加注释：在 React 应用嵌入 <Agentation />，开发模式下用鼠标点击页面任意元素，弹出注释面板。
结构化 prompt 输出：自动把点击的元素路径、CSS 选择器、DOM 结构、附加文字注释打包成结构化 prompt，可直接复制给 AI 编码 agent。
agent-agnostic：不绑定特定 agent——Cursor / Claude Code / Codex / Continue / Cline 等都能用。
MCP Server 集成：内置 MCP 协议 server，Claude Desktop / Cursor 等支持 MCP 的客户端可直接对接。
Claude Code Skills：提供两个 Skill 模板（标准版 + 自驱动版），Claude Code 用 .claude/skills 路径加载。
零侵入：生产构建里自动不渲染，不影响线上用户。
本资源包不含什么
编译产物（已剔
node_modules/、dist/、.next/）依赖锁定文件（已剔
pnpm-lock.yaml、package-lock.json）GitHub CI 配置（已剔
.github/、.vscode/）
资源包大小
压缩后约 3.4 MB，解压后约 4.7 MB / 188 个文件。
启动运行（嵌入 React 应用）
# 1. 安装 npm 包
npm install agentation -D
# 2. 在 React 应用入口添加组件
import { Agentation } from 'agentation';
function App() {
return (
<>
<YourApp />
<Agentation />
</>
);
}
# 3. 启动开发服务器，鼠标点击页面即可添加注释
npm run dev启动运行（MCP Server）
cd mcp pnpm install pnpm build # 配置到 Claude Desktop: claude_desktop_config.json 加 mcp server 入口
安装编译依赖
Node.js ≥ 18
pnpm（推荐）：
npm i -g pnpmReact 18+（主组件依赖）
Claude Desktop 或支持 MCP 的 IDE（可选）
典型使用场景
前端 bug 反馈：开发自测发现 UI 错位，点击元素 + 写一句"这里偏了 2px"，粘贴 prompt 给 AI agent 自动定位代码。
设计师与前端协作：设计师用 Agentation 截图标注，输出给 Cursor 自动改样式。
AI 编程课程演示：把 Agentation 作为"AHA moment"教学生如何结构化与 AI 编码 agent 沟通。
视觉回归测试：把历史注释存为 fixture，定期对比。
适用人群
用 Cursor / Claude Code / Codex 写代码的前端工程师，希望快速把 UI 反馈结构化给 AI。
设计师，希望用更工程化的方式给前端提 UI 改动需求。
AI 编程教学者：把 Agentation 作为"结构化 prompt"教学案例。
做技术选型：评估 Agentation vs 0xagent / tldraw / Excalidraw 视觉反馈。
质量承诺
本资源包内源码全部来自 benjitaylor/agentation 官方 GitHub 仓库（MIT 协议），版本 0.0.1 monorepo，经本地解压验证：含 React 主组件 + MCP Server + 2 个 Claude Code Skills + 演示 example + 完整文档。用户解压后 npm install && npm run dev 即可启动。
版权声明
本站文字内容为原创编撰或者网络搜集整理，受著作权保护，禁止未经授权批量采集转载。
本站分享的各类源码、AI大模型、程序工具仅作技术科普部署教程使用，不直接存储原版版权文件。
所有第三方资源的知识产权、开源协议、商用授权规则均归原开发团队所有。
使用者下载、部署、二次开发必须严格遵守国家著作权相关法律法规，以及资源官方许可协议，如需商业运营，务必向版权方申请合法授权。
因用户私自商用、违规分发资源造成的法律纠纷与经济损失，全部由使用者自行承担，本站不承担连带责任。
