Web to MCP
WebToMCP · Programación
Web to MCP es una extensión de Chrome y servidor de Model Context Protocol que captura cualquier componente real de una web y envía su código y estilos a Cursor o Claude Code.
Acerca de Web to MCP
What Is Web to MCP
Web to MCP resuelve un problema concreto y molesto: explicarle un componente de interfaz a un asistente de IA. En lugar de escribir "un botón azul con esquinas redondeadas y degradado", apuntas al elemento real y lo envías.
La herramienta se divide en dos piezas que trabajan juntas. Una extensión de Chrome se encarga de la captura en cualquier sitio que visites, y un servidor MCP entrega ese componente a tu asistente. Está pensada para desarrolladores que ya usan Cursor o Claude Code y quieren puntos de partida fieles al píxel en vez de adivinanzas.
La limitación principal es el alcance. Web to MCP solo alimenta al asistente; no escribe ni edita código por su cuenta, y la calidad del resultado sigue dependiendo de tu modelo y tu prompt. También exige un navegador Chrome y una cuenta de Google, y funciona con una URL MCP personal en vez de un servidor compartido.
Getting Started
- Instala la extensión de Web to MCP desde la Chrome Web Store.
- Inicia sesión con tu cuenta de Google para generar tu URL MCP única.
- Añade esa URL al archivo de configuración de tu asistente (Cursor lee
.cursor/mcp.json; Claude Code usa su propia configuración MCP). - Abre cualquier web, pulsa el icono de la extensión y activa el modo de selección.
- Haz clic en el elemento que quieras, copia su id de referencia y pídele al asistente que lo reconstruya.
Información del producto
Un vistazo rápido a los precios, las plataformas compatibles y el rendimiento de Web to MCP.
Ideal para
Los usuarios, tareas y casos de uso en los que esta herramienta encaja mejor.
Usuarios
- Desarrolladores front-end que usan Cursor o Claude Code, porque el código capturado entra directo en su flujo de chat actual.
- Perfiles de design engineering que convierten maquetas y páginas reales en componentes de producción y quieren valores de estilo exactos, no aproximados.
- Equipos que incorporan gente nueva, ya que capturar un componente ya probado es más rápido que documentar sus estilos a mano.
Tareas
- Reconstruir un componente visto en otra web, que la extensión captura con su estructura DOM y su CSS calculado.
- Igualar los botones o tarjetas de un sistema de diseño propio, para que el código nuevo no rompa lo que la app ya usa.
- Prototipar un diseño a partir de una referencia, donde tomar varios patrones reales gana a describir cada uno desde cero.
Casos de uso
- Ves una tabla de precios que te gusta y quieres que tu asistente reproduzca su estructura en tu stack.
- Un diseñador te pasa una página en vivo, y necesitas el comportamiento real al pasar el ratón en vez de una imagen plana.
- Estás aprendiendo cómo se construye un componente complejo y quieres el contexto de código para estudiarlo.
Funciones clave
Captura de componentes en un clic
Pulsa el icono de la extensión, cambia al modo de selección y elige cualquier elemento de una página real. Web to MCP registra la estructura DOM y el CSS calculado tal como se renderiza, así que tu asistente recibe lo mismo que ve un visitante. No hace falta abrir las herramientas de desarrollo ni copiar estilos a mano.
Entrega directa por MCP
Los componentes capturados viajan a tu asistente por el Model Context Protocol usando una URL personal ligada a tu cuenta. Cursor y Claude Code detectan la herramienta solos en cuanto la URL está en su configuración. Dentro del chat referencias el elemento por su id, y el traspaso queda dentro de las herramientas que ya usas.
Salida independiente del framework
La captura funciona igual en React, Vue, Angular y sitios de HTML y CSS plano, porque lee el resultado renderizado y no las tripas del framework. Después tu asistente adapta ese contexto al stack en el que construyes. Eso sí, conviene que indiques tu framework y sistema de diseño en el prompt para orientar el resultado.
Contexto semántico, no solo píxeles
A diferencia de una captura de pantalla, aquí entran HTML semántico, valores CSS exactos y contexto de maquetación como la estructura alrededor y los estados al pasar el ratón. Ese detalle es lo que permite al asistente acercarse al resultado visual en vez de reinterpretar una imagen. Web to MCP afirma que sus datos van directos al asistente y no se guardan en sus servidores.
Endpoint MCP personal y único
Cada cuenta registrada recibe su propia URL MCP, generada tras iniciar sesión con Google. La pegas en un archivo de configuración de proyecto o global, y la conexión queda solo para ti. Ese diseño deja la puesta en marcha en pocos minutos frente a levantar tu propio servidor.
Compatible con Claude Code y Cursor
Las guías de instalación cubren Cursor y Claude Code, los dos asistentes alrededor de los que se construyó la herramienta. En Cursor añades una entrada a .cursor/mcp.json; en Claude Code editas su archivo de configuración MCP. Ambas rutas siguen el mismo flujo de capturar y referenciar tras la instalación.
Ventajas y desventajas
Ventajas
- Quita las adivinanzas al describir una interfaz a un asistente, porque envía el código y los estilos reales.
- Manda HTML semántico y CSS exacto en lugar de una captura plana, lo que mejora el acierto al primer intento.
- Funciona en cualquier web y con cualquier framework front-end porque lee el resultado renderizado.
- La puesta en marcha tarda pocos minutos con una URL MCP personal y un archivo de configuración estándar.
- Los datos del componente van directos al asistente y no se guardan en los servidores del fabricante.
Desventajas
- Necesita Chrome y una cuenta de Google, así que quien use Firefox o Safari se queda fuera.
- La calidad del resultado depende de tu modelo y tu prompt: es una mejor entrada, no un trabajo terminado.
- El plan gratuito limita las capturas al mes, y quien capture mucho tendrá que pasar al plan Pro.
Preguntas frecuentes
Captura un componente de cualquier web en vivo y envía su código y sus estilos a un asistente de IA, así que puedes pedirle que reconstruya ese componente sin describirlo tú.
Contenido relacionado
Explora herramientas, habilidades y artículos relacionados con Web to MCP.
Alternativas a Web to MCP
Base Code
Base44 (Wix) · Programación · ProductividadBase Code es un entorno de desarrollo en la nube compartido de Base44. El equipo describe cambios sobre un repositorio de GitHub en el chat, los ve en una vista previa y los envía como pull requests.
Google EmbeddingGemma 2
Google DeepMind · Escritura · Imagen · ProgramaciónGoogle EmbeddingGemma 2 es un modelo abierto de 740 millones de parámetros que convierte texto, código, imágenes, audio y fotogramas de vídeo en vectores de un mismo espacio de 768 dimensiones, y funciona en móviles y portátiles.
GitGlow
GitGlow · Programación · ProductividadGitGlow es un cliente Git de escritorio que reúne tu código y los cambios de tus agentes de IA en una sola revisión, para que sepas qué va a salir de tu máquina antes de publicarlo.