WebToMCP

WebToMCP是什么？

WebToMCP是一款基于 MCP（Model Context Protocol）的浏览器扩展工具，可将将任意网站的 UI 组件一键捕获并发送给AI编码助手（Cursor、Claude Code 等），精准描述前端组件 DOM 结构、CSS 样式及视觉上下文，无需截图和手动描述，支持 React、Vue、Angular、原生 HTML 等任意框架，使你在 30 秒内轻松连接设计与代码，提升效率与还原度，适合前端工程师、设计师、全栈开发等。

它能做什么?

• 捕获真实组件：直接获取网页上渲染后的 DOM 结构、CSS 样式和视觉上下文，而不是截图或手动描述。
• 一键发送到 AI：通过 MCP 协议，把组件数据传给 AI 编码助手，让 AI 精准复刻 UI。
• 跨框架兼容：无论项目是用哪种技术实现的都能无差别输出（React / Vue / Angular / 原生 HTML）。
• 减少沟通成本：AI 完成的组件不再需要 “再圆一点”，不需要 “颜色再深一点”、重复、反复……第一次看到效果就很接近理想状态。
• 加速开发：把原本 30 分钟的描述和调试，缩短到 30 秒的精准交付。

适用人群

• 前端开发：快速复用成熟 UI 组件
• 设计师：将设计稿直接转化为可用代码
• 全栈/独立开发者：减少设计与实现之间的反复沟通
• 学习者：分析优秀网站的组件实现方式

WebToMCP产品价格方案 

WebToMCP官网及快速上手指南

官网网址：https://web-to-mcp.com/

1. 安装与登录

打开WebToMCP官网，点击 “Add to Chrome” 安装扩展到浏览器，安装后，在你的浏览器内点击这个图标并选择用 Google 账号登录，登录之后就自动产生了一串你自己的 MCP 网址（后面会配置到 AI 助手上）。

2. 在AI编码助手中配置 MCP

打开Cursor设置（Windows：Ctrl+Shift+J / Mac：Cmd+Shift+J），进入 Model Context Protocol → 功能 。在项目根目录创建 .cursor/mcp.json 文件，添加以下内容 :

{
“mcpServers”: {
“web-to-mcp”: {
“url”: “https://web-to-mcp.com/mcp/”
}
}
}

现在将替换为你在 WebToMCP 账户中获取的 MCP URL，保存后， Cursor 将会检测到它。

3. 捕获网页组件

打开任意一个包含该 UI 界面的网页，点击浏览器右上角 WebToMCP 扩展图标后进入“选择模式”，点击想要捕获的组件即可，它会提取出该组件的 DOM结构 + CSS样式+上下文信息，组件的数据由 MCP 跳过中间服务层直接推送至你的AI助手（如 Cursor、Claude Code）。

4. 在 AI 助手中使用组件

在AI聊天中直接引用捕获的组件 ID，让 AI 直接生成对应的代码，支持 React、Vue、Angular、原生 HTML/CSS 等多种技术栈，可结合提示词让 AI 按需修改样式、结构或交互逻辑 。