当前位置：首页>java>让AI编程指哪打哪的Agentation 发布了

让AI编程指哪打哪的Agentation 发布了

  • 2026-09-07 06:17:30
让AI编程指哪打哪的Agentation 发布了
Agentation 是一个刚刚正式发布的开发者工具（2026年初左右上线），专门解决当前AI编程助手（如Claude、Cursor、Windsurf等）在处理网页/前端项目时“指代不清”的痛点，被形象地称为让AI编程“指哪打哪”的利器。

PART 01

核心痛点与Agentation的解决方案
现在用AI改前端页面时最常见的情况是：
你说：“把那个蓝色的登录按钮改成红色”
AI问：“哪个按钮？”
你描述：“就是导航栏右边那个”
AI还是猜不对位置、类名、层级……
Agentation 通过在运行中的网页上直接可视化标注，让人类开发者“点一下”就能把精确的结构信息传递给AI，极大降低沟通成本。

PART 02

它到底能做什么？（核心功能）
点击元素 → 自动生成精准选择器
  • 最稳定的CSS选择器（尽可能短且特异）
  • 类名、ID、标签名
  • 元素在视口/页面中的空间坐标（bounding rect）
  • 层级路径（偶尔还会给父子关系提示）
点击任意DOM元素，立即得到：
支持多种交互方式标注
  • 单点元素
  • 框选多个元素/区域（拖拽）
  • 选中文本（可标注文本节点）
  • 添加文字备注（比如“这边要加动画”“颜色太淡”）
一键生成结构化Markdown输出输出类似这样，AI可以直接看懂并定位：
**Element 1**- Selector: .navbar > .btn-primary.login- Classes: btn btn-primary login- Text: 登录- Bounding rect: {x: 1240, y: 18, width: 98, height: 42}- Note: 把背景色改成 #ef4444，文字白色，加点阴影
其他实用小功能
  • 可暂停CSS动画（方便抓取hover、active等瞬态样式）
  • 深色/浅色模式自动适配
  • 纯前端实现，无需后端依赖

PART 03

如何使用（非常简单）
目前主要面向 React 18+ 项目：
bash
npminstall agentation -D
在根组件里加一行：
tsx
import{ Agentation }from'agentation';functionApp(){return(<>      <你的整个应用 /><Agentation/>{/* 就这一行 */}</>);}
右下角会出现一个小工具栏图标
点击进入标注模式
点元素、加备注、复制Markdown
粘贴给Claude / Cursor / 任意支持长文本的AI编码助手
甚至有人做了Claude专用技能：npx add-skill benjitaylor/agentation，然后直接在Claude里输入 /agentation 就能调用。 
官网：https://agentation.dev/
GitHub：https://github.com/benjitaylor/agentation （目前已获较多关注）

PART 04

总结一句话
Agentation 把“描述式沟通”升级成了“指点式沟通”，开发者从“打字描述半天AI还改错地方” → “点一下、复制、粘贴，AI立刻懂了要改哪里”。 对于经常用AI做/改前端、UI组件、复杂交互的开发者来说，这可能是2026年初最实用的生产力小工具之一，尤其搭配Claude 3.5/3.7系列或Cursor使用时，效率提升非常明显。 有React项目又经常让AI帮忙改页面的朋友，强烈建议装一个试试，真的有“指哪打哪”的爽感。
本文来自网友投稿或网络内容，如有侵犯您的权益请联系我们删除，联系邮箱：596563534@qq.com 。

高质量C++编程:表达式与基本语句(上)

【AI时代如何学编程】- AI无法逾越的护城河:你的“决策思维”

最新文章

随机文章