ui-polish-mcp

MCP server para agentes de IA criarem UIs que não parecem geradas por IA.

Detecta e corrige os fingerprints mais comuns de UI gerada: paletas genéricas, espaçamento uniforme, copy sem contexto, animações excessivas e falta de acessibilidade.

Tools disponíveis

Tool	O que faz
`audit_component`	Analisa JSX e retorna score 0-100 + lista de issues com fixes
`refine_copy`	Converte "Submit" / "Click here" em copy contextual
`suggest_placeholder`	Gera placeholders reais em vez de "Enter your..."
`suggest_theme`	Sugere preset de tema baseado no tipo do app
`get_theme`	Retorna tokens completos de um preset (cores, fontes, raios, sombras)
`list_presets`	Lista os 5 presets disponíveis
`check_contrast`	Valida contraste WCAG AA/AAA entre dois hexadecimais
`audit_color_pairs`	Audita múltiplos pares de cor de uma vez

Presets de tema

Preset	Para quê
`studio`	SaaS, produtividade, ferramentas dev (Linear/Vercel aesthetic)
`craft`	Blogs, portfólios, agências criativas (editorial artesanal)
`data`	Dashboards, analytics, DevOps (dark mode denso)
`flow`	CRMs, onboarding, apps B2B (SaaS conversacional)
`brutal`	Landing pages disruptivas, startups (neobrutalism)

Instalação

git clone https://github.com/Pedro21062014/ui-polish-mcp
cd ui-polish-mcp
npm install
npm run build

Configuração no Claude Desktop

Adicione ao claude_desktop_config.json:

{
  "mcpServers": {
    "ui-polish": {
      "command": "node",
      "args": ["/caminho/absoluto/ui-polish-mcp/dist/index.js"]
    }
  }
}

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

Configuração no Cursor

Crie .cursor/mcp.json na raiz do projeto:

{
  "mcpServers": {
    "ui-polish": {
      "command": "node",
      "args": ["/caminho/absoluto/ui-polish-mcp/dist/index.js"]
    }
  }
}

Uso pelo agente (fluxo recomendado)

1. suggest_theme(appType, industry, mood)
   → escolhe o preset certo

2. get_theme(preset)
   → pega os tokens e aplica no app

3. [agente cria os componentes]

4. audit_component(jsx)
   → verifica cada componente antes de entregar

5. refine_copy(text, { action, noun })
   → melhora todos os textos de botões/labels

6. audit_color_pairs(pairs)
   → valida acessibilidade da paleta inteira

Exemplo de output — audit_component

## Audit Result
Score: 52/100 | Grade: D
Summary: Fraco — múltiplos padrões de IA detectados. Revisão necessária.

### Issues (4)
1. [HIGH] color
- Problema: Paleta genérica: text-blue-500, bg-gray-100, text-gray-600
- Fix: Substitua por tokens customizados. Ex: text-[#1A1917], bg-[#FAFAF9]

2. [MEDIUM] spacing
- Problema: p-4 repetido 6x — espaçamento monótono sem hierarquia
- Fix: Varie: p-3 em elementos menores, p-6 em seções, p-10 em containers.

3. [HIGH] copy
- Problema: Copy genérico: "Submit", placeholder genérico
- Fix: Use verbos contextuais. Ex: "Salvar projeto", placeholder="Ex: pedro@empresa.com"

4. [HIGH] accessibility
- Problema: Botão com ícone sem aria-label
- Fix: <button aria-label="Fechar modal">

Dev

npm run dev    # roda com tsx (sem build)
npm run build  # compila para dist/

ui-polish-mcp

ui-polish-mcp

Tools disponíveis

Presets de tema

Instalação

Configuração no Claude Desktop

Configuração no Cursor

Uso pelo agente (fluxo recomendado)

Exemplo de output — audit_component

Dev

Latest Blog Posts

MCP directory API