Labzz MCP Forge - Design System Enforcer

MCP Server para enforçar padrões de UI/UX do Design System Eduzz/Labzz Forge em IAs generativas (Lovable, Replit, Cursor, Claude, etc.).

Quick Start (Zero Instalação)

1. Configure no seu cliente MCP

Claude Code - Edite ~/.claude/settings.json:

{
  "mcpServers": {
    "eduzz-design": {
      "command": "npx",
      "args": ["labzz-mcp-forge"]
    }
  }
}

Claude Desktop - Edite o arquivo de configuração:

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

{
  "mcpServers": {
    "eduzz-design": {
      "command": "npx",
      "args": ["labzz-mcp-forge"]
    }
  }
}

2. Reinicie o cliente e teste

Peça ao Claude: "Use a ferramenta get_paleta_cores para me mostrar as cores do design system"

Instalação Alternativa (Local)

Se preferir instalar localmente:

git clone https://github.com/furihata/labzz-mcp-forge.git
cd labzz-mcp-forge
npm install
npm run build

E configure com caminho absoluto:

{
  "mcpServers": {
    "eduzz-design": {
      "command": "node",
      "args": ["/caminho/para/labzz-mcp-forge/dist/index.js"]
    }
  }
}

O que é?

Este MCP (Model Context Protocol) Server funciona como um "design system enforcer" - toda vez que uma IA for criar interface, ela consultará o MCP para garantir compliance com os padrões do Design System Eduzz/Labzz Forge.

Funcionalidades

Tools (Ferramentas)

| Ferramenta | Descrição | |------------|-----------| | get_paleta_cores | Retorna paleta completa de cores com HSL, hex, RGB e classes Tailwind | | get_escala_tipografica | Retorna escala tipográfica com tamanhos, pesos e classes | | get_sistema_espacamento | Retorna sistema de espaçamento (base 4px) com layout e grid | | get_breakpoints | Retorna breakpoints responsivos com exemplos mobile-first | | get_specs_componente | Retorna specs completas de um componente (variantes, estados, exemplos) | | listar_componentes | Lista todos os componentes disponíveis | | get_regras_icones | Retorna regras de uso de ícones | | validar_codigo | Valida código contra os padrões do Design System | | get_regras_acessibilidade | Retorna regras de acessibilidade (WCAG, ARIA) | | get_css_variables | Retorna CSS Variables do tema |

Resources (Documentação)

| URI | Descrição | |-----|-----------| | eduzz://design-system/cores | Sistema de cores completo | | eduzz://design-system/tipografia | Sistema tipográfico | | eduzz://design-system/espacamento | Sistema de espaçamento | | eduzz://design-system/layout | Sistema de layout e grid | | eduzz://design-system/principios | Princípios CRAP de design | | eduzz://design-system/acessibilidade | Guia de acessibilidade |

Prompts

| Prompt | Descrição | |--------|-----------| | design_enforcer | Prompt principal que instrui a IA a seguir os padrões | | criar_componente | Prompt para criar componentes seguindo padrões | | criar_pagina | Prompt para criar páginas seguindo padrões |

Testar Localmente

Use o MCP Inspector para testar as ferramentas:

npm run inspect

Isso abrirá uma interface web onde você pode testar todas as ferramentas.

Exemplos de Uso

Criar um botão

Usuário: Crie um botão de salvar

IA: [Consulta get_specs_componente("button")]

Resposta:
<Button variant="default" size="default">
  Salvar
</Button>

Validar código

Usuário: Valide este código: <div style="background: #ff0000; padding: 13px">

IA: [Chama validar_codigo()]

Resposta:
{
  "valido": false,
  "score": 80,
  "problemas": [
    {
      "tipo": "erro",
      "mensagem": "Cor hardcoded encontrada: #ff0000",
      "sugestao": "Use classes Tailwind (ex: bg-red-500)"
    },
    {
      "tipo": "aviso",
      "mensagem": "Espaçamento fora da escala: 13px",
      "sugestao": "Use valores da escala. Valor mais próximo: 12px"
    }
  ]
}

Padrões do Design System

Cores

| Nome | Hex | Uso | |------|-----|-----| | Primary (Zinc-900) | #18181b | Textos principais | | Accent (Blue-500) | #3b82f6 | CTAs e destaques | | Background (Zinc-50) | #fafafa | Fundo da aplicação | | Success (Emerald-500) | #10b981 | Estados de sucesso | | Warning (Amber-500) | #f59e0b | Alertas | | Destructive (Red-500) | #ef4444 | Erros |

Tipografia

• Fonte principal: Plus Jakarta Sans
• Fonte código: JetBrains Mono
• Escala: 12px, 14px, 16px, 18px, 20px, 24px, 30px, 36px, 48px

Espaçamento

• Base: 4px
• Escala: 0, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64px

Layout

• Container: max-width 1400px
• Grid: 12 colunas
• Border-radius: 12px (padrão)

Princípios CRAP

1. Contraste - Elementos diferentes parecem diferentes
2. Repetição - Padrões visuais consistentes
3. Alinhamento - Elementos conectados visualmente
4. Proximidade - Relacionados próximos, não-relacionados separados

Requisitos

• Node.js >= 18.0.0
• Cliente MCP compatível (Claude Code, Claude Desktop, Cursor, etc.)

Desenvolvimento

# Instalar dependências
npm install

# Build
npm run build

# Desenvolvimento com watch
npm run dev

# Testar com inspector
npm run inspect

Estrutura do Projeto

labzz-mcp-forge/
├── src/
│   ├── index.ts              # Entry point
│   ├── server.ts             # MCP server config
│   ├── tools/                # Ferramentas
│   │   ├── colors.ts
│   │   ├── typography.ts
│   │   ├── spacing.ts
│   │   ├── components.ts
│   │   └── validate.ts
│   ├── resources/            # Documentação
│   │   └── design-system.ts
│   └── prompts/              # Prompts
│       └── design-enforcer.ts
├── dist/                     # Build output
├── package.json
├── tsconfig.json
└── README.md

Licença

MIT