Page Design Guide MCP Server

Servidor MCP de Guía de Diseño de Páginas

Un servidor MCP (Model Context Protocol) que proporciona orientación de diseño para ayudar a los LLMs a generar páginas web mejores y más modernas. Este servidor se centra en enseñar principios de diseño y mejores prácticas en lugar de proporcionar plantillas de código.

Características

• [layout] Orientación de Diseño - Cuándo y cómo usar F-Pattern, Z-Pattern, Bento Grid, etc.
• [palette] Psicología del Color - Significados de colores, tipos de esquemas y recomendaciones de paletas
• [type] Tipografía - Jerarquía, combinaciones de fuentes y mejores prácticas de legibilidad
• [grid] Diseño Responsivo - Estrategias mobile-first y orientación sobre breakpoints
• [layers] Jerarquía Visual - Principios de contraste, espacios en blanco y alineación
• [component] Orientación de Componentes - Principios de diseño para botones, tarjetas, formularios y navegación
• [motion] Principios de Animación - Tiempo, propósito y consideraciones de rendimiento
• [accessibility] Accesibilidad - Cumplimiento de WCAG, ratios de contraste y HTML semántico
• [sparkles] Tendencias Modernas - Tendencias de diseño actuales y cuándo usarlas
• [check] Revisión de Diseño - Analiza descripciones de diseño y obtén recomendaciones

Configuración con Claude Desktop

Añade esto a tu archivo de configuración de Claude Desktop:

MacOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json

Opción 1: Instalación Global (Recomendada)

{
  "mcpServers": {
    "page-design-guide": {
      "command": "npx",
      "args": ["-y", "page-design-guide-mcp"]
    }
  }
}

Opción 2: Instalación Local

{
  "mcpServers": {
    "page-design-guide": {
      "command": "node",
      "args": ["/absolute/path/to/node_modules/page-design-guide-mcp/build/index.js"]
    }
  }
}

Reemplaza /absolute/path/to con la ruta real al directorio node_modules de tu proyecto.

Configuración con OpenCode

Tu archivo de configuración opencode.json debe incluir:

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "page-design-guide": {
      "type": "local",
      "command": ["npx", "-y", "page-design-guide-mcp"],
      "enabled": true
    }
  }
}

Uso

Una vez conectado, puedes hacer preguntas a Claude como:

• "¿Qué principios de diseño debo seguir para esta página de aterrizaje?"
• "¿Qué diseño funciona mejor para un sitio de portafolio?"
• "¿Qué colores transmiten confianza y profesionalismo?"
• "¿Cómo debería estructurar la sección hero?"
• "¿Cuáles son los errores comunes a evitar con la tipografía?"
• "¿Cómo hago esto accesible?"
• "Revisa mi enfoque de diseño para esta página de comercio electrónico"

Herramientas Disponibles

get_design_principles

Obtén principios de diseño fundamentales (jerarquía, espacios en blanco, contraste, alineación, etc.) con pautas y errores comunes a evitar.

get_layout_guidance

Obtén recomendaciones de diseño según el tipo de página. Explica cuándo y por qué usar F-Pattern, Z-Pattern, Bento Grid, Split Screen, etc.

get_color_guidance

Obtén psicología del color, tipos de esquemas (monocromático, complementario, etc.) y recomendaciones de paletas según el estado de ánimo y la industria.

get_typography_guidance

Obtén jerarquía tipográfica, recomendaciones de combinaciones de fuentes para diferentes estilos y mejores prácticas para texto legible.

get_section_guidance

Obtén orientación para secciones específicas de la página: header, hero, características, testimonios, precios, cta, footer, faq - incluyendo propósito, estructura y mejores prácticas.

get_responsive_guidance

Obtén principios de diseño responsivo, estrategias de breakpoints y mejores prácticas mobile-first.

get_component_guidance

Obtén orientación de diseño para componentes de UI: botones, tarjetas, formularios, navegación, modales, iconos - incluyendo tamaños, estados y accesibilidad.

get_animation_guidance

Obtén principios de animación, pautas de tiempo y consideraciones de rendimiento para diferentes tipos de movimiento.

get_accessibility_guidance

Obtén requisitos de accesibilidad incluyendo ratios de contraste, estados de enfoque, HTML semántico y preferencias de movimiento.

get_modern_trends

Obtén tendencias de diseño web actuales (2024-2026) con orientación sobre cuándo y cómo usarlas adecuadamente.

review_design_approach

Describe tu diseño y obtén retroalimentación con puntuaciones, fortalezas identificadas, preocupaciones y recomendaciones.

Estructura del Proyecto

page-design-guide-mcp/
├── src/
│   └── index.ts          # Main MCP server code
├── build/                # Compiled JavaScript (generated)
├── package.json
├── tsconfig.json
└── README.md

Desarrollo

Para desarrollo con auto-reconstrucción en cambios:

npm run watch

Requisitos

• Node.js >= 18.0.0
• Aplicación Claude Desktop

Licencia

MIT