设计系统查询服务

HolyGuide MCP Server 是一个为Massimo Dutti的设计系统HolyGuide提供的实时查询服务,帮助开发者在VS Code中通过AI助手(如GitHub Copilot)生成符合官方风格指南的代码。

  • by glopezi1997
  • JavaScript
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 glopezi1997/holyguide-mcp

使用说明

HolyGuide MCP Server

MCP Server para el Design System HolyGuide de Massimo Dutti.

Este servidor permite a los asistentes de IA (como GitHub Copilot en VS Code) consultar el Design System en tiempo real para generar código que siga las guías de estilo oficiales.

🚀 Instalación

No necesitas instalar nada manualmente. Solo configura VS Code y usará npx automáticamente.

🔧 Configuración en VS Code

Añade esto a tu archivo .vscode/mcp.json en tu proyecto (o en settings.json global):

{
  "servers": {
    "holyguide": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@gerardlopezdev/holyguide-mcp"]
    }
  }
}

Reinicia VS Code y el MCP estará disponible.

🛠️ Herramientas disponibles

Herramienta Descripción
get_typography Documentación de tipografías
get_spacing Documentación de espaciado (paddings, margins)
get_colors Documentación de colores
get_flexbox Helpers de flexbox
get_buttons Documentación de botones
get_components Lista de componentes disponibles
get_templates Lista de templates/plantillas
get_page Cualquier página específica de HolyGuide
search_holyguide Búsqueda en toda la documentación
get_all_foundations Toda la documentación de foundations

💬 Ejemplos de uso

Una vez configurado, puedes pedirle al asistente:

  • "¿Cómo hago un botón que ocupe todo el ancho?"
  • "Dame las clases de padding responsive de HolyGuide"
  • "¿Qué tipografías debo usar según HolyGuide?"
  • "Genera un card siguiendo el Design System de Massimo Dutti"

🔄 Caché

El servidor cachea las respuestas durante 5 minutos para mejorar el rendimiento. Los datos se obtienen en tiempo real desde https://holyguide.es/

📝 Desarrollo local

# Clonar el repositorio
git clone https://github.com/glopezi1997/holyguide-mcp.git
cd holyguide-mcp

# Instalar dependencias
npm install

# Build
npm run build

# Ejecutar
npm start

📦 Publicar nueva versión

# Incrementar versión
npm version patch  # o minor / major

# Publicar
npm publish --access public

🤝 Contribuir

  1. Fork del repositorio
  2. Crear rama feature (git checkout -b feature/nueva-funcionalidad)
  3. Commit cambios (git commit -am 'Añade nueva funcionalidad')
  4. Push a la rama (git push origin feature/nueva-funcionalidad)
  5. Crear Pull Request

📄 Licencia

MIT