Website Analyzer

Website Analyzer MCP

Convierte cualquier sitio web en un sistema de diseño reutilizable.

Aplica ingeniería inversa a páginas en vivo para convertirlas en tokens de diseño estructurados y documentación que tu agente de IA puede usar: colores, tipografía, espaciado, componentes, layout y comportamiento responsive.

Construido con MCP · Playwright · TypeScript

Gratuito y de código abierto. Este servidor no llama a APIs de LLM de pago. Devuelve JSON estructurado (y opcionalmente markdown de plantilla) a tu propio cliente Claude / Cursor / VS Code / Gemini / Ollama.

---

Por qué existe esto

Los agentes de IA son excelentes escribiendo UI, pero normalmente adivinan los sistemas de diseño. Website Analyzer MCP inspecciona una página real y entrega a tu agente:

• Tokens de diseño (color, tipografía, espaciado, radio, sombra)
• Señales de componentes y layout
• Análisis responsive de viewports + capturas de pantalla
• Documentación markdown determinista (design.md, rule.md, …)

Úsalo para clonar un estilo, auditar un sitio o iniciar un sistema de diseño desde producción.

Características

• Inspección de página (DOM, landmarks, encabezados, enlaces, formularios)
• Extracción de color / tipografía / espaciado
• Detección de radio de borde y sombras
• Señales de layout y componentes
• Análisis responsive (móvil / tablet / escritorio)
• Captura de pantallas (hasta 5 viewports)
• Tokens de sistema de diseño como JSON estructurado
• Documentación markdown determinista
• Protección SSRF + respeto opcional de robots.txt

Inicio rápido (usuarios finales)

No necesitas clonar este repositorio: el paquete está en npm.

1. Instala Chromium de Playwright una vez:
   npx playwright install chromium
2. Añade el servidor MCP en la configuración de tu cliente.

Cursor (Settings → MCP o ~/.cursor/mcp.json):

{ "mcpServers": { "website-analyzer": { "command": "npx", "args": ["-y", "website-analyzer-mcp"] } } }

Claude Desktop (claude_desktop_config.json):

1. Reinicia el IDE / recarga MCP.
2. Pregunta:

Analyze https://example.com and create design.md

npx -y descarga el paquete de npm automáticamente.

Clientes compatibles

Claude Code · Cursor · VS Code · Claude Desktop · cualquier cliente compatible con MCP

Herramientas

Herramienta	Qué hace
inspect_page	JSON estructurado de DOM / página
capture_screenshot	PNGs de viewport (móvil / tablet / escritorio, hasta 5 anchos)
analyze_design	Colores, tipografía, espaciado, radio, sombras, layout, componentes → JSON
analyze_responsive	Análisis de breakpoints / media queries (+ capturas opcionales)
generate_docs	Escribe design.md, rule.md, component.md, layout.md, content.md, README.md

Prompts sugeridos

Analyze https://example.com

Create:
- design.md
- rule.md
- component.md
- layout.md
- README.md

Flujo preferido

1. inspect_page / analyze_design / analyze_responsive → JSON para el LLM
2. o generate_docs → archivos deterministas bajo docs/<host>/

Configuración

Copia .env.example o define variables de entorno:

Variable	Default	Descripción
MAX_PAGES	20	Límite de páginas de rastreo (rastreo multi-página planificado)
REQUEST_TIMEOUT	30000	Tiempo de espera de navegación (ms)
MAX_DEPTH	2	Profundidad de rastreo (planificada)
SCREENSHOT	true	Capturar pantallas en generate_docs
MOBILE_VIEW / TABLET_VIEW / DESKTOP_VIEW	true	Qué bandas de viewport muestrear
USER_AGENT	WebsiteAnalyzerMCP/1.0	User agent de la solicitud
RESPECT_ROBOTS_TXT	true	Respetar Disallow de robots.txt
MAX_RESPONSE_SIZE	5000000	Tamaño máximo del cuerpo de respuesta (bytes)
WEBSITE_ANALYZER_OUTPUT	package output/	Sobrescribir raíz de capturas / salida

Ejemplo con env en Cursor:

{ "mcpServers": { "website-analyzer": { "command": "npx", "args": ["-y", "website-analyzer-mcp"], "env": { "REQUEST_TIMEOUT": "45000", "RESPECT_ROBOTS_TXT": "true" } } } }

Desarrollar desde el código fuente

git clone https://github.com/bigy2012/website-analyzer.git cd website-analyzer npm install npx playwright install chromium npm run build

Apunta tu cliente MCP al punto de entrada compilado:

{ "mcpServers": { "website-analyzer": { "command": "node", "args": ["/absolute/path/to/website-analyzer/dist/index.js"] } } }

Scripts

npm run typecheck npm test npm run smoke npm run build npm run demo:gif # regenerates assets/demo.gif

Docker

docker compose build docker compose run --rm website-analyzer-mcp

Imágenes publicadas (en releases etiquetados): ghcr.io/<owner>/website-analyzer

Seguridad

• Bloquea objetivos SSRF de localhost / IP privada / link-local / metadata de nube
• Aplicación opcional de robots.txt (RESPECT_ROBOTS_TXT=true)
• Timeouts y límites de tamaño vía env

Uso responsable

Website Analyzer MCP es solo para análisis legítimo de sitios web — por ejemplo, aprender patrones de layout, auditar tus propios sitios o extraer señales estructuradas sobre las que tu agente de IA pueda razonar.

Usar esta herramienta no otorga permiso para copiar o reutilizar el diseño, contenido, imágenes, logotipos u otros activos de otro sitio sin autorización.

Por favor, respeta:

Derechos de autor	El diseño, el copy, los medios y la marca siguen perteneciendo a sus titulares
Términos de servicio	Sigue los ToS y las reglas de uso aceptable de cada sitio
robots.txt	Respeta las directivas de rastreo (RESPECT_ROBOTS_TXT=true por defecto)
Límites de tasa	No sobrecargues ni hagas scraping agresivo
Privacidad	No recopiles ni uses indebidamente datos personales
Leyes aplicables	Incluyendo leyes de copyright, marcas y acceso informático en tu jurisdicción

Eres responsable de cómo usas la salida del análisis. En caso de duda, analiza sitios que poseas o tengas permiso de estudiar, y busca asesoramiento legal para reutilización comercial.

Limitaciones (v0.1)

• URL única / página única (rastreador multi-página planificado)
• La documentación de plantilla son heurísticas deterministas, no prosa escrita por LLM
• Las hojas de estilo de origen cruzado pueden estar incompletas

Release

CI/CD vive en .github/workflows/:

• ci.yml — typecheck, build y test en PR/push
• release.yml — en tags v*, publica a npm, GHCR y GitHub Releases

Guía de configuración: docs/RELEASE.md

Contribuciones

Issues y PRs son bienvenidos. Mantén los cambios enfocados, añade/ajusta tests al tocar seguridad o analizadores, y ejecuta npm run typecheck && npm test antes de abrir un PR.

Licencia

MIT