comunidadbóvedaclaude diseñador web perfecto

Claude Diseñador Web Perfecto

Combina 4 herramientas para que Claude diseñe, construya y revise páginas web como un profesional.

Cómo funciona la idea

Imagina un diseñador que tiene: un libro de reglas de diseño (Skill), dos catálogos de componentes bonitos (Magic UI + shadcn), y un espejo para verse a sí mismo (Playwright). Eso es lo que vas a armar.

Frontend Design Skill

Sabe diseñar — las reglas estéticas

Magic UI MCP

Componentes animados — marquee, blur-fade, etc.

shadcn/ui MCP

Componentes accesibles — botones, formularios, cards

Playwright CLI

Puede ver la página — abre Chrome y revisa su trabajo

01 requisitos

Qué necesitas

Claude Code instalado

Si aún no lo tienes, sigue la guía Instalar Claude Code.

Node.js 18+

Necesario para instalar los MCPs y Playwright. Verifica con node --version.

Un proyecto web

Next.js, React, o cualquier proyecto frontend donde quieras diseñar.

02 paso 1

Instalar el Frontend Design Skill

Este skill le enseña a Claude cómo diseñar bonito — tipografía, colores, animaciones, composición espacial. Sin esto, Claude genera diseños genéricos.

Instalar el plugin de diseño

claude plugin add anthropics/claude-code/plugins/frontend-design

Qué agrega este skill

Le da a Claude conocimiento profundo en 5 dimensiones estéticas: tipografía (jerarquía, espaciado, fuentes), color (paletas, contraste, armonía), movimiento (transiciones, micro-interacciones), composición espacial (grids, whitespace, balance) y detalles visuales (bordes, sombras, texturas).

03 paso 2

Conectar Magic UI

Magic UI es un catálogo de componentes animados — marquees, blur-fades, hero sections, bento grids. El MCP le da acceso directo a Claude para que los use cuando diseña.

Instalar Magic UI MCP

npx @magicuidesign/cli@latest install claude

O configurar manualmente en .mcp.json

{
  "mcpServers": {
    "magicuidesign-mcp": {
      "command": "npx",
      "args": ["-y", "@magicuidesign/mcp@latest"]
    }
  }
}

Después de agregar, reinicia Claude Code

Escribe /mcp para verificar que Magic UI aparece como servidor conectado.

04 paso 3

Conectar shadcn/ui

shadcn/ui es otro catálogo — componentes accesibles, formularios, botones, cards. Combinar ambos catálogos le da a Claude muchísimas opciones para diseñar.

Instalar shadcn/ui MCP

pnpm dlx shadcn@latest mcp init --client claude

O configurar manualmente en .mcp.json

{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": ["shadcn@latest", "mcp"]
    }
  }
}

05 paso 4

Instalar Playwright CLI

Playwright CLI le da ojos a Claude — puede abrir un navegador, ver la página que acaba de crear, y decidir si necesita cambios. Es como darle un espejo al diseñador.

Instalar Playwright CLI

npm install -g @anthropic-ai/claude-code-playwright && npx playwright install chromium

Qué puede hacer

Abrir páginas, tomar snapshots, hacer click en elementos, llenar formularios, tomar screenshots. Todo desde la terminal, sin que tú tengas que abrir el navegador.

06 todo junto

Tu diseñador perfecto

Ya tienes las 4 piezas instaladas. Ahora solo háblale a Claude como le hablarías a un diseñador.

Ejemplo: diseñar una landing page

Claude usa el skill de diseño, los catálogos de componentes y Playwright para iterar.

Diseña una landing page moderna para una startup de IA. Usa componentes de Magic UI y shadcn. Cuando termines, abre la página con Playwright y verifica que se vea bien. Si algo no se ve bien, corrígelo.

Ejemplo: mejorar un diseño existente

Claude abre la página actual, la evalúa y la mejora con componentes animados.

Abre http://localhost:3000 con Playwright, revisa el diseño actual y mejora la sección hero usando componentes animados de Magic UI. Verifica el resultado.

El flujo completo

Le pides

Describes lo que quieres

Claude diseña

Usa skill + catálogos

Claude revisa

Abre Playwright y mira

Claude corrige

Itera hasta que se vea bien

El poder está en que Claude puede ver su propio trabajo

No necesitas tú revisar cada cambio — él abre el navegador, mira, y corrige solo.

07 tips

Tips para mejores resultados

Usa Plan Mode

Presiona Shift+Tab antes de diseñar para que Claude planee el diseño primero — estructura, paleta y componentes.

Sé específico

"Landing para startup de seguridad con colores oscuros" > "hazme una landing". Más contexto = mejor diseño.

Déjalo iterar

Dile que revise con Playwright y corrija. Puede hacer 2-3 rondas solo sin que tú intervengas.

Combina catálogos

Dile explícitamente "usa Magic UI para animaciones y shadcn para formularios" para mejores resultados.

Recursos y documentación

Claude Code · Magic UI · shadcn/ui · Playwright · Crea Claude Skills