AI导哈

网页组件转MCP工具

Web to MCP是一款浏览器扩展和网页服务，能够一键捕获网站组件并通过模型上下文协议（MCP）直接发送至AI编程助手，实现设计与代码的无缝衔接。

  • by Web-to-MCP
  • 本地部署
  • 更新于
在 GitHub 查看 Web-to-MCP/mcp-server

使用说明

Web到MCP

一键将任何网站组件发送到Cursor、Claude Code或您的AI编码助手。

https://web-to-mcp.com

Web-to-MCP是一个强大的浏览器扩展和Web服务，通过允许您捕获网站组件并使用模型上下文协议（MCP）将其直接发送给您的AI编码助手，弥合了设计和代码之间的差距。

🌟 特性

  • 🎯 一键式组件捕获：选择任何网站元素并将其直接发送给您的AI助手
  • 🔗 MCP集成：通过模型上下文协议与Cursor IDE和Claude代码无缝协作
  • 🎨 像素完美参考：捕捉具有精确样式的实际渲染组件
  • ⚡ 迅速的：比描述UI组件的传统方法快10倍
  • 🔒 安全：使用安全MCP通道的Google OAuth身份验证
  • 🌐 通用：适用于任何网站和任何组件
  • 💳 灵活定价：免费套餐提供高级功能

🚀 快速开始

先决条件

  • Chrome浏览器（最新版本）
  • 用于身份验证的Google帐户
  • 游标IDE或Claude代码（用于MCP集成）

安装

  1. 安装Chrome扩展程序

    https://chromewebstore.google.com/detail/web-to-mcp/hbnhkfkblpgjlfonnikijlofeiabolmi

  2. 登录您的帐户

    • 单击扩展图标
    • 使用您的Google帐户进行身份验证
    • 获取您唯一的MCP URL

  3. 在AI工具中配置MCP

    • 按照以下Cursor或Claude Code的设置指南进行操作
    • 添加您的MCP URL以启用直接组件传输

🛠️ 设置指南

用于游标IDE

  1. 安装Chrome扩展程序 （见上文）

  2. 在游标中配置MCP

    • 打开光标设置(Ctrl+Shift+J 或 Cmd+Shift+J)
    • 导航到功能→ 模型上下文协议
    • 创建新的MCP配置文件

  3. 添加MCP配置 创建 .cursor/mcp.json 在项目根目录中：

    {
  "mcpServers": {
    "web-to-mcp": {
      "url": "https://web-to-mcp.com/mcp/<YOUR_UNIQUE_ID>"
    }
  }
}

  4. 开始捕捉

    • 导航到任何网站
    • 单击扩展图标
    • 选择要捕获的任何组件
    • 使用组件ID在游标中引用它

克劳德代码

  1. 安装Chrome扩展程序 （见上文）

  2. 安装Claude代码

    # Download from https://claude.ai/code
# Verify installation
claude --version

  3. 添加MCP服务器

    claude mcp add --transport http web-to-mcp https://web-to-mcp.com/mcp/<YOUR_UNIQUE_ID>

  4. 开始捕捉

    • 导航到任何网站
    • 单击扩展图标
    • 选择要捕获的任何组件
    • 使用组件ID在Claude代码中引用它

相关 MCP