一个 Chrome 扩展程序，可捕获网站组件并将其发送到人工智能编码助手，如 Cursor、Claude Code、Codex 等
直观地捕获网站组件，并将其转换为可供 AI 编码助手使用的代码和提示。借助 Web To MCP，您可以突出显示实时网页的任何部分，生成干净的输出，并通过 MCP 集成将其直接发送到 Cursor 或 Claude Code 等工具中。
Web To MCP 扩展消除了设计到代码工作流程中的猜测，为开发人员和团队提供了一种更快的方法，利用来自网络的真实上下文构建准确的前端界面。
主要特点
通过简单的悬停和单击即可直观地捕获组件
生成可直接在编辑器中使用的即时代码和提示
通过 MCP 与 Cursor 和 Claude Code 无缝集成
保留像素完美的参考，以实现准确的设计到代码的切换
通过自动化重复的前端任务来节省数小时的手动工作
轻量且安全的 Chrome 扩展程序，专为提高速度而打造
它是如何运作的
从 Chrome 网上应用店安装 Web To MCP Chrome 扩展程序。
在浏览器中启用扩展程序。
访问任何网站并将鼠标悬停在某个元素上以突出显示它。
单击以捕获组件并生成代码和提示。
直接复制并粘贴到 Cursor 或 Claude Code 中开始构建。
为什么开发人员选择 Web To MCP
人工智能驱动的工作流程：通过视觉和代码输入为您的编码助手提供清晰的上下文。
更快的前端开发：将设计到代码的交付时间缩短多达 10 倍。
更高的准确性：停止依赖模糊的描述，而是传递真实的 UI 组件。
与您的堆栈配合使用：针对 Cursor 和 Claude Code 等现代 AI IDE 进行了优化。
改善协作：设计师、开发人员和 AI 工具与共享视觉参考保持一致。
使用案例
从实时站点快速捕获导航栏、按钮或布局
使用现实世界的设计元素加速原型制作
使用精确的视觉效果训练 AI 编码助手以获得更好的结果
通过减少沟通不畅消除前端开发中的返工
自动执行重复的编码任务并专注于运输功能
要求
谷歌浏览器
配置了 MCP 的光标或 Claude 代码
Web to MCP: Import any website components to Cursor or Claude Code插件谷歌浏览器安装教程
第一步：下载Web to MCP: Import any website components to Cursor or Claude Code安装扩展
第二步：下载下来的扩展解压到你想放的文件夹里
比如我解压到extend文件夹
打开Chrome的扩展页面（chrome：// extensions /或按Chrome菜单图标>更多工具>扩展程序），右上角开发者模式，点击开启，蓝色为开启，灰色为关闭；
再次将crx文件拖放到扩展程序，页面左下角提示：“扩展功能、应用和主题背景可能会损害您的计算机。您确定要继续吗？”
点击“继续”依然显示“无法从该网站添加应用、扩展程序和用户脚本”。尝试另一种办法方法。
第三步：把crx后缀改为zip，再进行解压
如果有些windows电脑系统查看不到文件扩展名，则可以通过以下设置：
找到文件夹顶部，点击查看
点击查看，找到隐藏已知文件扩展名，去掉前面的勾即可
这样你就能看到解压好的扩展名：.crx
解压的扩展名为.crx
把.crx改为：zip
然后再用解压工具再解压一遍，即可得到扩展的全部文件
然后再谷歌浏览器插件页面选择：加载已解压的扩展程序
这样就安装成功了
友情提醒：
其他浏览器，包括qq浏览器，360浏览器，edge浏览器，猎豹浏览器，搜狗浏览器安装插件的方法都是类似的，以上内容大部分通用！
