AI编程浏览器辅助工具
Sidekicko 是一款面向 AI coding agents 的浏览器可视化 DevTools。它以浏览器扩展/覆盖层形式工作,可通过 ⇧⌘K 在站点中唤起,帮助开发者选择页面元素、查看样式与组件上下文、进行可视化微调,并把修改结果导出给 Claude Code、Cursor 或其他代理工作流。
它的重点不是替代完整 IDE,而是把“这个 UI 看起来不对”的视觉问题转成可执行的代码修改上下文。Element picker 可捕获 selector、文本、class、边界和 computed styles;Visual controls 支持调整间距、颜色、圆角、字体、布局、阴影、透明度和图片适配并实时预览;布局感知面板会根据 flex、grid、文本、图片等场景显示相关控件。对 React 项目,它还能读取组件名、props 和层级,这比单纯 CSS selector 更利于 AI 定位代码。
Sidekicko 的突出点是 AI handoff:可导出 before/after diff、元素上下文和不同保真度报告,包括最小 selector diff、标准组件上下文或完整 computed-style 快照。Plus 版提供 MCP handoff,可在工具支持时把浏览器 overlay 连接到 agent tools;同时保留剪贴板 fallback,方便复制 change report 到其他工具。
免费版永久免费,包含元素选择、可视化控制和剪贴板导出,适合试用本地 UI 修复。Plus 为每月 8 美元,增加 MCP handoff、React component context 和完整保真报告。Plus Lifetime 为一次性 39 美元,包含共享标注、团队导出和优先支持。
优点是工作流聚焦、与 AI 编码代理结合紧密,能减少截图描述和 prompt 误差;免费版也足够体验核心流程。限制在于文本未说明开源、自托管、安全隐私、浏览器兼容性,也只明确提到 React,上手 MCP 的实际兼容范围需验证。它适合使用 Cursor、Claude Code 做前端迭代的独立开发者和小团队,尤其是频繁处理视觉细节的产品工程师。
抓取信息未提供中国大陆网络可用性、支付方式或本地化支持,因此判断为未知。若访问或支付受限,可临时使用 Chrome DevTools、React Developer Tools、VisBug 等工具配合 Cursor/Claude Code 手动传递上下文。
本测评基于公开资料整理,不构成购买建议,请以 sidekicko.com 官网实际信息为准。
可选元素、改UI并发给AI代理。
评分明细(分布与用户短评)接入中。当前展示 TG4G 综合评分,数据源自公开测评与用户反馈。