Skip to main content
Glama
deenesjakoptruzh
Pedro21062014

ui-polish-mcp

by Pedro21062014
OverviewSchemaRelated ServersScoreDiscussions
TypeScript
Local

ui-polish-mcp

AIエージェントがAI生成のように見えないUIを作成するためのMCPサーバー。

生成されたUIに最もよく見られる痕跡を検出・修正します：汎用的なパレット、均一な余白、文脈のないコピー、過剰なアニメーション、アクセシビリティ不足。

利用可能なツール

Tool

説明

audit_component

JSXを分析し、0〜100のスコアと修正付きのissueリストを返します

refine_copy

「Submit」/「Click here」をコンテキストに応じたコピーに変換します

suggest_placeholder

「Enter your...」の代わりに実際のプレースホルダーを生成します

suggest_theme

アプリの種類に基づいてテーマのプリセットを提案します

get_theme

プリセットの完全なトークン（色、フォント、角丸、影）を返します

list_presets

利用可能な5つのプリセットを一覧表示します

check_contrast

2つの16進数間のWCAG AA/AAAコントラストを検証します

audit_color_pairs

複数のカラーペアを一度に監査します

Related MCP server: v0-mcp-ts

テーマのプリセット

Preset

用途

studio

SaaS、生産性向上、開発ツール（Linear/Vercel スタイル）

craft

ブログ、ポートフォリオ、クリエイティブエージェンシー（職人的エディトリアル）

data

ダッシュボード、アナリティクス、DevOps（高密度ダークモード）

flow

CRM、オンボーディング、B2Bアプリ（会話型SaaS）

brutal

破壊的なランディングページ、スタートアップ（ネオブルータリズム）

インストール

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

Claude Desktop での設定

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 での設定

プロジェクトのルートに .cursor/mcp.json を作成してください:

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

エージェントによる使用（推奨フロー）

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

出力例 — 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">

開発

npm run dev    # roda com tsx (sem build)
npm run build  # compila para dist/
Install Server
F
license - not found
A
quality
C
maintenance

How are these scores calculated?

Maintenance

–Maintainers
–Response time
–Release cycle
–Releases (12mo)
Commit activity

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Tools

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.
    17
    1
    MIT

  • stitch-bridge

    jlhernando
    F
    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

View all related MCP servers

Related MCP Connectors

  • Figma MCP Server

    The Figma MCP server brings Figma design context directly into your AI workflow.

  • microservices.sh

    MCP server for AI agents to plan, verify, and deploy Cloudflare-native apps.

  • mcp-flux-pro

    MCP server for Flux AI image generation

View all MCP Connectors

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/Pedro21062014/ui-polish-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server