Skip to main content
Glama
Sign In
deenesjakoptruzh
ui-polish-mcp

ui-polish-mcp

by Pedro21062014
OverviewSchemaSourceRelated ServersDiscussionsAdmin
TypeScript
Local

ui-polish-mcp

MCP server for AI agents to create UIs that don't look AI-generated.

Detects and fixes the most common fingerprints of generated UI: generic palettes, uniform spacing, contextless copy, excessive animations, and lack of accessibility.

Available Tools

Tool

What it does

audit_component

Analyzes JSX and returns a 0-100 score + list of issues with fixes

refine_copy

Converts "Submit" / "Click here" into contextual copy

suggest_placeholder

Generates real placeholders instead of "Enter your..."

suggest_theme

Suggests a theme preset based on the app type

get_theme

Returns complete tokens for a preset (colors, fonts, radii, shadows)

list_presets

Lists the 5 available presets

check_contrast

Validates WCAG AA/AAA contrast between two hex colors

audit_color_pairs

Audits multiple color pairs at once

Related MCP server: v0-mcp-ts

Theme Presets

Preset

Purpose

studio

SaaS, productivity, dev tools (Linear/Vercel aesthetic)

craft

Blogs, portfolios, creative agencies (handcrafted editorial)

data

Dashboards, analytics, DevOps (dense dark mode)

flow

CRMs, onboarding, B2B apps (conversational SaaS)

brutal

Disruptive landing pages, startups (neobrutalism)

Installation

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

Claude Desktop Configuration

Add to 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

Cursor Configuration

Create .cursor/mcp.json in the project root:

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

Agent Usage (Recommended Flow)

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

Example 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/

Available Tools

8 tools
audit_color_pairsA

Audita múltiplos pares de cor de uma vez. Útil para verificar toda a paleta do tema antes de entregar.

Inputs: pairs (required).

audit_componentA

Analisa código JSX/TSX e detecta padrões que fazem o componente parecer gerado por IA. Retorna score de 0-100, grade (A-F), lista de issues com fixes e itens aprovados. Use antes de entregar qualquer componente React.

Inputs: jsx (required).

check_contrastA

Verifica se um par de cores tem contraste adequado (WCAG AA/AAA). Use sempre que definir cor de texto sobre fundo. Retorna ratio, nível WCAG e sugestão de correção se falhar.

Inputs: background (required), foreground (required), largeText.

get_themeA

Retorna tokens completos de um preset específico. Presets disponíveis: studio | craft | data | flow | brutal

Inputs: preset (required).

list_presetsA

Lista todos os presets de tema disponíveis com suas descrições.

Inputs: no named parameters.

refine_copyA

Melhora textos genéricos de UI para soarem humanos e contextuais. Remove padrões como "Submit", "Click here", "Error occurred", "Lorem ipsum". Use em labels de botões, placeholders, mensagens de erro e empty states.

Inputs: text (required), lang, noun, tone, +1 more.

suggest_placeholderA

Sugere placeholder contextual para campos de formulário. Em vez de "Enter your email...", retorna "Ex: pedro@empresa.com". Use sempre que criar inputs, textareas ou selects.

Inputs: fieldName (required), lang.

suggest_themeA

Sugere um preset de tema visual baseado no tipo de app. Retorna tokens completos: cores, fontes, raios, sombras, espaçamentos. Inclui CSS variables e config do Tailwind prontos para usar.

Inputs: mood, appType, darkMode, industry.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

Loading tool schema changelog…

    Deploy Server
    Claude Code, inside the Godot 4 editorFlockbay puts an AI agent in the real Godot 4 editor: it writes GDScript, runs your game and fixes what breaks. Free, or bring your own Claude Code or Codex.flockbay.comAd

    TDQS

    A4.2/5.0

    Scored across 8 tools

    Disambiguation5/5

    Each tool targets a clearly distinct concern: component auditing, theme suggestion/retrieval/listing, single vs. batch color contrast checks, copy refinement, and placeholder suggestion. Overlapping areas like check_contrast and audit_color_pairs are explicitly separated as single-pair vs. multi-pair operations.

    Naming Consistency5/5

    All tools follow a consistent verb_noun snake_case scheme: audit_component, suggest_theme, get_theme, list_presets, check_contrast, audit_color_pairs, refine_copy, suggest_placeholder. The naming makes each tool's resource and action predictable.

    Tool Count5/5

    8 tools is well-scoped for a UI polish server. Each tool earns its place and collectively they cover component analysis, theme selection, contrast verification, and copy improvements without unnecessary bloat.

    Completeness5/5

    The toolset forms a complete pre-delivery polish workflow: audit React components, validate the color palette, refine UI copy, generate context-aware placeholders, and select or retrieve theme tokens. There are no obvious dead ends or missing core operations for the stated domain.

    Maintenance

    ActivityInactive
    ResponsivenessNo recent community issues

    Resources

    Related MCP Connectors

    Related MCP Servers

    • v0-mcp-ts

      Conce-AI
      A
      license
      Not graded
      quality
      D
      maintenance
      MCP server that bridges design and code by generating UI components, layouts, and themes from text prompts using v0.dev, with features like code refactoring and accessibility auditing.
      14 npm
      1
      MIT

    • stitch-bridge

      jlhernando
      A
      license
      A
      quality
      D
      maintenance
      MCP server that gives AI coding agents the ability to design UIs through Google Stitch. It generates production-ready HTML and screenshots from natural language prompts.
      9
      MIT

    • design-mcp

      augustinezuka
      A
      license
      Not graded
      quality
      D
      maintenance
      MCP server for design decisions during a build, providing live UI/animation library docs (via llms.txt) and a curated knowledge base of UX laws and UI conventions. It enables agents to look up real component APIs and apply design best practices, running locally via stdio or hosted on Vercel.
      6 npm
      MIT