海外资源测评导航
返回开发工具 海外资源 / 开发工具 / AI编程可视化DevTools / sidekicko.com
S
🔧 开发工具 AI编程可视化DevTools 美国总部 国内优化

sidekicko.com

AI编程浏览器辅助工具

8.0/10 中国可用
TTG4G 编辑组 ·更新于 2026-06-08 ·数据来源: ai_crawl 评测方法 ↗
数据来源
ai_crawl · 最近更新 2026-06-08
行业深度解析AI 深度分析
一句话面向 AI 编码代理的浏览器可视化 DevTools,用于检查、编辑、批注 UI 并导出上下文给 Claude Code、Cursor 等工具。
定价免费增值 / 订阅 / 一次性买断 Free:$0 forever,包含 Element picker、Visual controls、Clipboard export、创建账号。Plus:$8/month,包含 MCP handoff、React component context、Full fidelity reports。Plus Lifetime:$39 one time,包含 Sha
适合谁使用 AI 编码代理进行前端/UI 修改的开发者、独立构建者、产品团队。
核心功能浏览器扩展覆盖层元素选择器可视化样式调整与实时预览React 组件上下文读取布局感知面板评论与标注AI handoff 导出MCP server 连接剪贴板回退导出快捷键 Shift + Command + K 唤起
功能与用途Sidekicko 是一个运行在浏览器中的可视化 DevTools,面向 AI coding agents。它可在任意站点通过快捷键唤起,用于检查元素、编辑样式、复制组件信息、取色、识别字体、下载资源、在 localhost 上评论编辑,并驱动浏览器。核心用途是把视觉调整转化为可交给 Claude Code、Cursor 或其他代理的准确 diff 与上下文。
支持语言/框架文本明确提到 React context,可读取组件名称、props 和 ancestry。未说明支持 Vue、Angular、Svelte 或其他框架,也未说明具体编程语言支持范围。
定价Free:$0 forever,适合尝试本地 UI 修复;Plus:$8/month,面向日常产品开发;Plus Lifetime:$39 one time,提供终身访问、共享标注、团队导出和优先支持。
API/SDK提供 MCP server,可在支持时把浏览器 overlay 连接到 agent tools,实现结构化 UI 变更;另有 clipboard fallback,可复制干净的 change report。未见传统 API 或 SDK 说明。
集成与生态明确面向 Claude Code、Cursor 或任何 agent workflow;通过 MCP handoff 与支持 MCP 的代理工具连接。浏览器端覆盖层可在网站或本地应用上使用。
文档质量抓取正文展示了核心功能、四步工作流、快捷键、输出保真度和定价层级,产品定位清晰。但缺少安装环境、权限说明、浏览器兼容性、安全与隐私、MCP 配置细节等文档信息。
中国访问未知
适用场景本地前端页面视觉微调、将 UI 问题标注并交给 AI 编码代理、导出组件上下文和样式差异、团队围绕真实页面元素做批注。
同类Chrome DevTools、React Developer Tools、Polypane、VisBug、Cursor、Claude Code、Builder.io Visual Copilot
性价比8
易用8
服务6
综合8
优点
  • 围绕 AI 编码代理工作流设计,能把可视化 UI 问题转化为结构化变更上下文
  • 支持 React 组件名称、props、层级等信息,较普通 CSS selector 更利于代码定位
  • 提供 MCP handoff 与剪贴板两种交付方式,兼容不同代理工作流
  • 免费版可用于基础本地 UI 调整,入门门槛较低
  • 一次性买断价格相对明确
不足
  • 抓取文本未说明支持的浏览器类型、安装渠道和系统兼容性
  • 除 React 外未见对 Vue、Svelte、Angular 等框架的上下文支持说明
  • 未披露开源情况、自托管能力或企业安全细节
  • MCP handoff 标注为在支持时使用,实际兼容范围仍需验证
  • 中国大陆访问、支付方式和网络稳定性信息缺失

深度测评

TG4G · 2026-06-08 更新 · 仅供参考

是什么

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 定位代码。

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代理。

官网快照

/shot/sidekicko-com.png
sidekicko.com

价格走势

当前价 · 仅供参考
价格未公开 当前定价
价格采集自官网公开页面,实时更新;历史走势数据采集中,暂无足够历史样本。下单请以官网实时价为准。

用户评价

综合评分
8.0/10
TG4G 综合评分

评分明细(分布与用户短评)接入中。当前展示 TG4G 综合评分,数据源自公开测评与用户反馈。

常见问题

sidekicko.com 是一家美国的开发工具 (AI编程可视化DevTools)服务商. 本页收录其「AI编程浏览器辅助工具」套餐. 可选元素、改UI并发给AI代理.
sidekicko.com 在中国大陆有较好的直连体验, 多数地区无需代理即可访问. 该商家总部位于美国, 主要面向海外市场.
访问 sidekicko.com 官网完成注册即可使用. 注册一般需要邮箱 (推荐 Gmail/Outlook) 和支付方式. 多数海外服务支持信用卡 / PayPal / 加密货币. 完整流程见本页"前往官网"按钮.

浏览其他大类