01 La idea: criterio, materiales y ojos
Cuando le pides a Claude una landing sin más, suele entregar algo correcto pero previsible: degradado violeta, tres tarjetas y una tipografía de sistema. No es falta de capacidad, es falta de dirección, de piezas de calidad y de una forma de comprobar el resultado.
Esta guía resuelve las tres cosas a la vez. Una skill le da criterio estético, dos servidores MCP le dan acceso a catálogos de componentes probados y Playwright CLI le permite abrir la página en un navegador, hacer capturas y corregir lo que no encaja antes de enseñártelo.
frontend-design (skill)
Plugin oficial de Anthropic. Se activa solo en tareas de interfaz y empuja a Claude a elegir una dirección visual clara: tipografía, paleta, movimiento y detalles.
Magic UI (MCP)
Catálogo de componentes animados para React: marquesinas de logos, textos con aparición difuminada, fondos de rejilla, rejillas tipo bento.
shadcn/ui (MCP)
Componentes accesibles y editables (botones, diálogos, formularios, tablas) que se copian a tu proyecto en lugar de quedar como dependencia.
Playwright CLI
Navegador controlable desde la terminal: abre URLs, hace capturas, rellena formularios y cambia el tamaño de la ventana para revisar el diseño en móvil.
02 Antes de empezar
- ✓Claude Code instalado y abierto al menos una vez en modo interactivo (así se registra el marketplace oficial de plugins).
- ✓Node.js 18 o superior: compruébalo con node --version.
- ✓Un proyecto React o Next.js con Tailwind CSS. Si partes de cero, pídele a Claude que lo cree antes de seguir.
- ✓Git inicializado en el proyecto, para poder deshacer cualquier cambio de diseño que no te guste.
03 Instalación de las cuatro piezas
-
1
Instala la skill de diseño
Desde Claude Code, instala el plugin frontend-design del marketplace oficial. Si te dice que no encuentra el marketplace, añádelo primero con el comando alternativo.
-
2
Conecta Magic UI
Añade su servidor MCP con alcance de proyecto, para que la configuración quede en .mcp.json y la comparta todo el equipo.
-
3
Conecta shadcn/ui
Su propio CLI escribe la configuración para Claude Code en tu proyecto.
-
4
Instala Playwright CLI
Se instala de forma global con npm y, opcionalmente, registra sus skills para que Claude sepa usarlo sin explicaciones.
-
5
Reinicia y comprueba
Cierra y abre Claude Code en la carpeta del proyecto, ejecuta /mcp y confirma que magicui y shadcn aparecen conectados. La primera vez te pedirá aprobar los servidores de .mcp.json.
/plugin install frontend-design@claude-plugins-official
# solo si no encuentra el marketplace:
/plugin marketplace add anthropics/claude-plugins-officialclaude mcp add --scope project magicui -- npx -y @magicuidesign/mcp@latest
npx shadcn@latest mcp init --client claudenpm install -g @playwright/cli@latest
playwright-cli install --skills
playwright-cli --help04 El flujo de trabajo que funciona
-
1
Planifica primero
Activa el modo plan con Shift+Tab y pide una propuesta de dirección visual, estructura de secciones y componentes antes de escribir código.
-
2
Construye con piezas reales
Indica qué catálogo usar para qué: Magic UI para el movimiento y los efectos, shadcn/ui para formularios, diálogos y navegación.
-
3
Revisa en el navegador
Pide que arranque el servidor de desarrollo, abra la página con Playwright CLI y haga capturas en escritorio y móvil.
-
4
Itera con criterio
Deja que haga dos o tres rondas de corrección por su cuenta y luego revisa tú las capturas finales.
Diseña la página de inicio de una gestoría que ofrece asesoría fiscal online a autónomos. Antes de programar, propón una dirección visual (tipografías, paleta, tono) y la lista de secciones. Usa shadcn/ui para el formulario de contacto y la navegación, y Magic UI solo para dos efectos discretos en la cabecera y la franja de logos de clientes. Cuando termines, arranca el servidor de desarrollo, abre la página con playwright-cli, haz capturas a 1440 px y a 390 px de ancho y corrige lo que se vea descuadrado o poco legible. Enséñame las capturas finales.Abre http://localhost:3000/servicios con playwright-cli y haz una captura. Analiza la jerarquía visual, el contraste y el espaciado y dime los tres problemas más graves. Después corrígelos sin cambiar los textos ni la estructura de datos, y vuelve a capturar para comparar el antes y el después.05 Consejos para resultados profesionales
Da contexto de negocio
Sector, público y sensación que buscas pesan más que cualquier adjetivo. «Serio pero cercano, para clientes de más de 50 años» orienta mejor que «moderno».
Aporta tu marca
Si tienes colores, tipografías o un manual, pégalos en el CLAUDE.md del proyecto para que no los reinvente en cada sesión.
Menos efectos
Los componentes animados lucen en una demo, pero en exceso cansan y penalizan el rendimiento. Limita su número explícitamente.
Revisa la accesibilidad
Pide contraste suficiente, foco visible y textos alternativos, y que lo compruebe con Playwright navegando con el teclado.
Preguntas frecuentes
No. La skill frontend-design por sí sola ya mejora mucho los resultados. Los catálogos aportan componentes pulidos y Playwright aporta la autorrevisión; añade cada pieza cuando la necesites.
La skill y Playwright sirven para cualquier web. Los componentes de Magic UI y shadcn/ui son de React con Tailwind, así que fuera de ese entorno solo te servirán como inspiración.
El CLI gasta menos contexto porque no vuelca árboles de accesibilidad enteros en cada paso, lo que encaja mejor con sesiones largas de código. El MCP sigue siendo una opción válida si ya lo usas.
No. Son de código abierto y se copian a tu proyecto, así que puedes modificarlos libremente.
Sobre el autor
Equipo editorial de appyweb
Marketing, SEO y desarrollo con IA
Especialistas de appyweb en SEO, publicidad, desarrollo web y automatización con IA.