MUCV — Motor Universal de Conversión Visual

Versión: 0.6.1 Protocolo: MCP (Model Context Protocol) Runtime: Node.js 20+

Qué es MUCV

MUCV es un servidor MCP que convierte diseños entre formatos visuales usando una representación intermedia neutral (VIR):

SOURCE → Parser → Normalizer → VIR → Optimizer → Generator → TARGET

Nunca hay conversión directa entre formatos. Todo pasa por el VIR.

Formatos Soportados

| Source ↓ \ Target → | Elementor | HTML+CSS | React | Vue | Svelte | Angular | Astro | Gutenberg | Elementor Widget | |----------------------|:---------:|:--------:|:-----:|:---:|:------:|:-------:|:-----:|:---------:|:----------------:| | Elementor | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | | HTML | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | | React (JSX) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |

Instalación

Claude Code

claude mcp add-json mucv '{"type":"stdio","command":"npx","args":["-y","@sn4p.dev/mucv@latest"],"env":{"WP_URL":"https://tu-sitio.com","WP_USER":"admin","WP_APP_PASSWORD":"xxxx xxxx xxxx xxxx xxxx xxxx"}}'

Claude Desktop

Añade a tu claude_desktop_config.json:

{
  "mcpServers": {
    "mucv": {
      "command": "npx",
      "args": ["-y", "@sn4p.dev/mucv@latest"],
      "env": {
        "WP_URL": "https://tu-sitio.com",
        "WP_USER": "admin",
        "WP_APP_PASSWORD": "xxxx xxxx xxxx xxxx xxxx xxxx"
      }
    }
  }
}

VS Code

Añade a .vscode/mcp.json en tu proyecto:

{
  "servers": {
    "mucv": {
      "command": "npx",
      "args": ["-y", "@sn4p.dev/mucv@latest"],
      "env": {
        "WP_URL": "https://tu-sitio.com",
        "WP_USER": "admin",
        "WP_APP_PASSWORD": "xxxx xxxx xxxx xxxx xxxx xxxx"
      }
    }
  }
}

Las variables WP_* son opcionales. Solo se requieren para las herramientas de WordPress (list_pages, get_page_design, publish_design). Las tools de conversión funcionan sin WordPress.

Ejecución directa

npx @sn4p.dev/mucv

Herramientas MCP (9 tools)

| Tool | Descripción | Requiere WP | |------|-------------|:-----------:| | convert_design | Convierte entre formatos visuales | No | | validate_vir | Valida un VIR contra el schema Zod | No | | get_page_design | Obtiene diseño de una página WP | Sí | | publish_design | Publica un diseño en WP | Sí | | list_pages | Lista páginas/posts de WP | Sí | | get_elementor_kit | Lee el Kit Global de Elementor (colores, tipografía) | Sí | | update_elementor_kit | Actualiza parcialmente el Kit Global | Sí | | health_check | Estado del servidor | No | | get_metrics | Métricas de conversión | No |

Características Destacadas

CSS Stylesheet Parser (v0.6.0)

El parser HTML extrae automáticamente bloques <style> embebidos y aplica los estilos a cada nodo por clase y tag. Prioridad: tag < class < inline. Ya no es necesario que todo el CSS esté inline.

Elementor Kit Manager (v0.6.0)

Lee y actualiza el Kit Global de Elementor (colores del sistema, tipografía, container width) directamente via REST API. Soporta actualizaciones parciales — solo cambia lo que se envía.

Generadores de Output (9 formatos)

• Elementor — JSON completo con metadata para WordPress
• HTML+CSS — Semántico con clases BEM
• React — Componentes funcionales TypeScript con CSS Modules
• Vue — Vue 3 SFC con <script setup> y <style scoped>
• Svelte — Componentes Svelte nativos
• Angular — Standalone components v17+ con template inline
• Astro — Componentes con frontmatter y <style> scoped
• Gutenberg — Bloques nativos WordPress (post_content)
• Elementor Widget — Plugin PHP completo con widgets personalizados (ZIP instalable)

Seguridad

• Sanitización HTML completa (script, iframe, SVG, data: URIs, CSS injection)
• Validación de URLs en VIR (bloquea javascript:, data:, vbscript:)
• Rate limiting: 60 req/min (ventana deslizante)
• Límites de tamaño: content 5MB, title 500 chars, search 200 chars
• TypeScript strict, validación Zod en runtime

Desarrollo Local

git clone https://github.com/yosnap/mucv.git
cd mucv
npm install
npm run build
npm test

Scripts

| Script | Descripción | |--------|-------------| | npm run build | Compilar TypeScript | | npm test | Ejecutar tests | | npm run test:coverage | Tests con cobertura | | npm run test:e2e | Tests E2E contra WordPress Docker | | npm run lint | ESLint |

Docker (solo para desarrollo)

docker compose up -d    # WordPress + MySQL para testing

Documentación

• Arquitectura
• Especificación VIR
• API Reference
• Seguridad
• Roadmap
• Changelog

Licencia

Por definir — uso interno hasta v1.0.0.