Skip to main content
Glama
deenesjakoptruzh
Pedro21062014

ui-polish-mcp

by Pedro21062014
OverviewSchemaRelated ServersScoreDiscussions
TypeScript
Local

ui-polish-mcp

AI 에이전트가 AI가 생성한 것처럼 보이지 않는 UI를 만들 수 있게 해주는 MCP 서버입니다.

생성된 UI의 가장 흔한 특징을 감지하고 수정합니다: 획일적인 색상 팔레트, 균일한 간격, 맥락 없는 카피, 과도한 애니메이션, 접근성 부족.

사용 가능한 도구

도구

기능

audit_component

JSX를 분석하고 0-100 점수 + 수정 사항이 포함된 이슈 목록을 반환합니다.

refine_copy

"Submit" / "Click here"를 맥락에 맞는 카피로 변환합니다.

suggest_placeholder

"Enter your..." 대신 실제 placeholder를 생성합니다.

suggest_theme

앱 유형에 따라 테마 프리셋을 추천합니다.

get_theme

프리셋의 전체 토큰을 반환합니다(색상, 글꼴, 테두리 반경, 그림자).

list_presets

사용 가능한 5가지 프리셋을 나열합니다.

check_contrast

두 HEX 색상 간의 WCAG AA/AAA 대비를 검증합니다.

audit_color_pairs

여러 색상 쌍을 한 번에 검사합니다.

Related MCP server: v0-mcp-ts

테마 프리셋

프리셋

용도

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