🌐 Qwen WebMaster MCP

Convierte Qwen Desktop en un Experto World-Class de Páginas Web

¿Qué hace este MCP?

Este servidor MCP transforma a Qwen Desktop en un diseñador y desarrollador web senior que:

• 🎨 Diseña sitios con estética de Apple, Nike, Coca-Cola, Samsung, Tesla
• ✨ Incluye 30+ animaciones premium (magnetic buttons, parallax, liquid cursor, particles...)
• 📋 Crea un Plan de Desarrollo y pide tu aprobación antes de construir
• 💻 Genera código HTML/CSS/JS completo listo para abrir en el navegador
• 📱 100% responsive (mobile-first)
• 🚀 Sin frameworks externos — Vanilla JS puro y rápido

🚀 INSTALACIÓN (3 pasos)

Paso 1 — Requisitos

Node.js 18 o superior → https://nodejs.org
Qwen Desktop App (versión con soporte MCP)

Paso 2 — Instalar el MCP

# Clona o copia la carpeta qwen-webmaster-mcp en tu computador
# Luego entra a la carpeta y ejecuta:

cd qwen-webmaster-mcp
npm install

Paso 3 — Configurar en Qwen Desktop

Abre la configuración de Qwen Desktop y agrega este MCP:

{
  "mcpServers": {
    "qwen-webmaster": {
      "command": "node",
      "args": ["/RUTA/COMPLETA/qwen-webmaster-mcp/src/index.js"],
      "description": "Expert Web Designer — World-Class animations & design"
    }
  }
}

⚠️ Cambia /RUTA/COMPLETA/ por la ruta real donde guardaste la carpeta.

Ejemplo Windows: C:/Users/TuNombre/qwen-webmaster-mcp/src/index.js Ejemplo Mac/Linux: /home/tunombre/qwen-webmaster-mcp/src/index.js

🎯 CÓMO USARLO

Una vez conectado, di a Qwen:

"Activa el modo WebMaster Expert y crea una página web para mi restaurante"

O simplemente:

"Quiero crear una página web para mi empresa de maquila"

Qwen seguirá este flujo automáticamente:

1. 🔍 Analiza requerimientos (te hace preguntas)
2. 📋 Crea Plan de Desarrollo completo
3. ✅ Espera tu aprobación
4. 💻 Genera el código HTML completo

🛠️ HERRAMIENTAS DISPONIBLES

| Tool | Descripción | |------|-------------| | analyze_requirements | Genera preguntas clave según tu industria | | create_development_plan | Plan detallado con secciones, animaciones y stack | | generate_webpage | Código HTML/CSS/JS completo con animaciones | | get_animation_snippets | Snippets de animaciones individuales | | review_and_enhance | Mejora código existente |

🎨 ESTILOS DE REFERENCIA DISPONIBLES

| Estilo | Descripción | Ideal para | |--------|-------------|------------| | apple | Ultra-minimalista, blancos y negros | Tech, premium | | coca-cola | Energético, vibrante, curvas | Alimentos, bebidas | | samsung | Premium tech, gradientes azules | Electrónica, tech | | nike | Dinámico, negro dominante, impacto | Deporte, moda | | netflix | Oscuro, cards de contenido | Media, entretenimiento | | tesla | Tecnológico-premium, full-screen | Autos, tech premium | | airbnb | Amigable, coral, confianza | Servicios, turismo |

✨ ANIMACIONES INCLUIDAS POR NIVEL

Básico

• Fade-in / Slide-up al aparecer en pantalla
• Hover en botones y cards
• Transición suave de navbar

Intermedio

• Parallax en hero section
• Cards 3D al hacer hover
• Contadores numéricos animados
• Infinite marquee de logos/texto
• Scroll progress indicator

Premium

• Magnetic buttons (se atraen al cursor — Apple/Stripe)
• Split-text reveal (texto partido — Nike)
• Custom cursor con blend-mode — (Awwwards sites)
• Glassmorphism cards (Apple iOS style)
• Ripple effect en botones
• Gradient mesh animado de fondo

Ultra

• Liquid cursor con física real
• Partículas interactivas (reaccionan al mouse)
• Text scramble effect (estilo Matrix)
• Blob morphing animado
• Elementos flotantes con animación orgánica

📁 ESTRUCTURA DEL PROYECTO

qwen-webmaster-mcp/
├── src/
│   ├── index.js       ← Servidor MCP principal
│   ├── animations.js  ← Biblioteca de animaciones
│   ├── prompts.js     ← Prompts expertos para Qwen
│   └── generators.js  ← Generador de HTML/CSS/JS
├── package.json
└── README.md

💡 EJEMPLO DE CONVERSACIÓN

Tú: "Crea una página web para mi empresa de alimentos NUTRIFRESH"

Qwen (con MCP): 
  ✅ Analizando requerimientos...
  ❓ ¿Tienes logo? ¿Cuáles son tus colores corporativos?
  ❓ ¿Necesitas sección de productos con precios?
  ❓ ¿Haces delivery?

Tú: [respondes las preguntas]

Qwen: 
  📋 PLAN DE DESARROLLO — NUTRIFRESH
  - Estilo: COCA-COLA (energético, apetitoso)
  - Colores: Verde natural + Naranja acento
  - Secciones: Hero, Nosotros, Productos, Testimonios, Contacto
  - Animaciones: PREMIUM (20+ efectos)
  ✅ ¿Apruebas este plan?

Tú: "Aprobado, genera la página"

Qwen: 
  💻 Generando código HTML completo...
  [Entrega index.html listo para abrir]

🔧 SOLUCIÓN DE PROBLEMAS

Error: "Cannot find module" → Ejecuta npm install dentro de la carpeta del MCP

Qwen no reconoce el MCP → Verifica que la ruta en la configuración sea absoluta y correcta → Reinicia Qwen Desktop después de agregar el MCP

Node.js no encontrado → Instala Node.js desde https://nodejs.org (versión LTS recomendada)

Qwen WebMaster MCP v1.0 — Desarrollado para crear experiencias web de clase mundial