Page Design Guide MCP Server

Page Design Guide MCP Server

Um servidor MCP (Model Context Protocol) que fornece orientação de design para ajudar LLMs a gerar páginas web melhores e mais modernas. Este servidor foca em ensinar princípios de design e melhores práticas, em vez de fornecer modelos de código.

Recursos

• [layout] Orientação de Layout - Quando e como usar F-Pattern, Z-Pattern, Bento Grid, etc.
• [palette] Psicologia das Cores - Significados das cores, tipos de esquemas e recomendações de paletas
• [type] Tipografia - Hierarquia, combinações de fontes e melhores práticas de legibilidade
• [grid] Design Responsivo - Estratégias mobile-first e orientação sobre breakpoints
• [layers] Hierarquia Visual - Princípios de contraste, espaçamento e alinhamento
• [component] Orientação de Componentes - Princípios de design para botões, cards, formulários e navegação
• [motion] Princípios de Animação - Timing, propósito e considerações de desempenho
• [accessibility] Acessibilidade - Conformidade com WCAG, taxas de contraste, HTML semântico
• [sparkles] Tendências Modernas - Tendências de design atuais e quando usá-las
• [check] Revisão de Design - Analise descrições de design e receba recomendações

Configuração com Claude Desktop

Adicione isto ao seu arquivo de configuração do Claude Desktop:

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

Opção 1: Instalação Global (Recomendada)

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

Opção 2: Instalação Local

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

Substitua /absolute/path/to pelo caminho real do diretório node_modules do seu projeto.

Configuração com OpenCode

Seu arquivo de configuração opencode.json deve incluir:

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

Uso

Depois de conectado, você pode fazer perguntas ao Claude como:

• "Quais princípios de design devo seguir para esta landing page?"
• "Qual layout funciona melhor para um site de portfólio?"
• "Quais cores transmitem confiança e profissionalismo?"
• "Como devo estruturar a seção hero?"
• "Quais são os erros comuns a evitar com tipografia?"
• "Como torno isto acessível?"
• "Revise minha abordagem de design para esta página de e-commerce"

Ferramentas Disponíveis

get_design_principles

Obtenha princípios fundamentais de design (hierarquia, espaçamento, contraste, alinhamento, etc.) com diretrizes e erros comuns a evitar.

get_layout_guidance

Obtenha recomendações de layout com base no tipo de página. Explica quando e por que usar F-Pattern, Z-Pattern, Bento Grid, Split Screen, etc.

get_color_guidance

Obtenha psicologia das cores, tipos de esquemas (monocromático, complementar, etc.) e recomendações de paletas com base no clima e no setor.

get_typography_guidance

Obtenha hierarquia tipográfica, recomendações de combinações de fontes para diferentes estilos e melhores práticas para texto legível.

get_section_guidance

Obtenha orientação para seções específicas da página: header, hero, features, testimonials, pricing, cta, footer, faq - incluindo propósito, estrutura e melhores práticas.

get_responsive_guidance

Obtenha princípios de design responsivo, estratégias de breakpoints e melhores práticas mobile-first.

get_component_guidance

Obtenha orientação de design para componentes de UI: botões, cards, formulários, navegação, modais, ícones - incluindo dimensionamento, estados e acessibilidade.

get_animation_guidance

Obtenha princípios de animação, diretrizes de timing e considerações de desempenho para diferentes tipos de movimento.

get_accessibility_guidance

Obtenha requisitos de acessibilidade, incluindo taxas de contraste, estados de foco, HTML semântico e preferências de movimento.

get_modern_trends

Obtenha tendências atuais de design web (2024-2026) com orientação sobre quando e como usá-las adequadamente.

review_design_approach

Descreva seu design e receba feedback com pontuações, pontos fortes identificados, preocupações e recomendações.

Estrutura do Projeto

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

Desenvolvimento

Para desenvolvimento com reconstrução automática em alterações:

npm run watch

Requisitos

• Node.js >= 18.0.0
• Aplicativo Claude Desktop

Licença

MIT