agentation
为AI编程助手提供可视化页面元素定位与反馈的开发工具。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：agentation。 它的用途是：为AI编程助手提供可视化页面元素定位与反馈的开发工具。 完整的 Skill 内容见：https://321skill.com/skills/agentation/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“请帮我修改登录表单中‘忘记密码’链接的样式，它现在颜色太浅了。” 然后，你可以使用Agentation点击那个链接，复制生成的元素定位信息（例如 `.login-form > a.forgot-password`）一并发送给AI。AI助手就能根据这个精确的选择器，在你的代码库中快速找到并修改对应的CSS样式。
介绍
Agentation 解决了开发者在与AI编程助手协作时，难以精确描述页面元素的痛点。以往开发者需要费力描述“侧边栏的蓝色按钮”，AI可能无法准确定位。该工具通过在页面中嵌入一个可视化工具栏，允许开发者直接点击、框选页面元素，自动生成精确的CSS选择器、位置和上下文信息。
使用时，只需在React应用中安装并引入Agentation组件，它会在页面右下角显示一个工具栏。点击激活后，即可通过点击、拖拽等方式选择页面上的任何元素或区域，并添加注释。选择完成后，可以一键复制包含所有定位信息的结构化Markdown输出。
它非常适合前端开发、全栈开发和智能体开发者使用，尤其是在与Claude、Cursor等AI助手协作进行UI调试、功能修改或代码审查时。当需要向AI清晰指出页面上的特定Bug位置、需要修改的组件或需要复用的UI模块时，这个工具能极大提升沟通效率。
建议在开发或测试环境中使用，因为它会向页面注入一个交互层。虽然它支持深色/浅色主题适配且无运行时依赖，但请注意它目前仅支持React 18+和桌面浏览器，移动端暂不可用。
核心特点
与同类截图或录屏工具不同，Agentation的核心是生成机器可读的结构化定位信息（如CSS选择器），而非仅提供视觉图像，这使AI助手能直接通过代码搜索（grep）定位到具体元素，实现了从“视觉描述”到“代码定位”的精准转换。
注意事项
目前仅支持React 18+框架的桌面端应用，不支持移动端浏览器或其他前端框架。
常见问题
Agentation 生成的输出格式是怎样的？
它会生成包含元素选择器、位置坐标、截图（可选）和用户添加的注释的Markdown格式文本，方便直接粘贴给AI助手分析。
这个工具会影响我的应用性能吗？
它是一个轻量级的纯CSS工具，零运行时依赖，对应用性能影响极小，通常仅在需要反馈时激活使用。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/agentation/raw/index.md 读取 agentation 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/agentation/raw/index.md（查看排版版本）