# 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

```bash
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`:

```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:

```json
{
  "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

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