项目地址：Inginnng/EditHere: EditHere — 截图、写下意见、直接调整布局，把修改意图一次交给 AI。
在 AI 辅助开发越来越普及的今天，我们已经习惯把需求直接丢给 Claude、Codex、Cursor 或各种 Agent。
但有一个问题始终存在：
AI 能读懂代码，却不一定能读懂你的表达。
当你说：
- 右上角按钮再往左一点
- 这张卡片大 20%
- 这里颜色不协调
- 第三秒出现的动画效果不对
对于人来说很好理解，但对于 AI 来说，这些描述往往缺少明确的位置和上下文。
EditHere，它试图解决的不是代码生成，而是 AI 协作过程中最容易被忽略的一环：如何准确表达修改意图。
什么是 EditHere？
EditHere 可以理解为：一个专门为 AI 协作设计的可视化反馈工具。
它允许你：
- 截图
- 圈选区域
- 添加批注
- 调整布局位置
- 标记视频时间点
然后将这些修改意见导出为结构化数据，直接交给 AI 继续执行。
整个流程变成：
截图 ↓ 批注修改意见 ↓ 导出结构化反馈 ↓ AI 理解并修改
相比传统的聊天描述方式，AI 获取的信息更加精准。
它解决了什么？
传统方式：
把右上角那个按钮往左移动一点 然后把下面的卡片放大 再把标题颜色改成蓝色
AI 需要先猜：
- 哪个按钮？
- 哪张卡片？
- 哪个标题？
稍微复杂一点的界面，误判概率就会迅速上升。
而在 EditHere 中：
- 直接圈出目标区域
- 写下修改意见
- 拖动组件位置
- 调整大小
这些操作都会被记录下来。
最终交给 AI 的不只是文字，而是：
{
"position": "...",
"annotation": "...",
"before": "...",
"after": "..."
}
这种方式比自然语言更加明确。
软件预览
最有价值的功能
1. 智能截图与区域识别
截图后可以直接选择界面元素。
对于：
- 网页
- 桌面软件
- 游戏界面
- 图表
都能快速锁定目标区域，无需反复截图和裁剪。
2. 可视化布局调整
这是 EditHere 最有特色的功能之一。
很多时候你并不是想告诉 AI：向左移动 30px
而是希望：就改成这样
EditHere 会记录：
- 原始坐标
- 修改后坐标
- 尺寸变化
AI 可以直接读取这些信息。表达效率远高于文字描述。
3. 多点批注
复杂界面经常需要同时修改多个位置。
传统方式：
第一处... 第二处... 第三处...
容易遗漏。
EditHere 会给每条意见编号，并关联到具体区域。结构清晰很多。
4. 视频批注
这个功能非常实用。特别是：
- 产品演示视频
- UI 动效
- 游戏录制
- 宣传片剪辑
可以暂停到指定帧：
这里动画速度太快 这里按钮出现太晚 这里过渡效果不自然
系统自动记录：
- 时间戳
- 当前帧截图
- 批注内容
非常适合视频修改场景。
不只是前端开发
虽然项目最初面向 AI 编程场景。但它的应用范围其实远比想象的大。
AI 生图
直接在图片上标记：
- 删除元素
- 调整位置
- 修改颜色
- 替换内容
避免反复提示词重生成。
游戏 UI
给游戏界面提需求：
- HUD 调整
- 交互优化
- 布局修改
尤其适合团队沟通。
产品设计评审
设计师和开发沟通时：
这里加大留白 这里文字对齐 这里层级不够明显
可直接标在截图上。
数据看板
对于后台系统和 BI 报表：
- 图表位置
- 卡片尺寸
- 数据展示方式
都能快速标记。
发布者：木木，转载请注明出处：https://blog.mmcoo.de/11811.html
微信 
支付宝 
