01 Las cuatro piezas y qué aporta cada una
Un buen proceso de diseño separa tres momentos: decidir (estilo, colores, tipografía, estructura), visualizar (maquetas antes de programar) y construir (con componentes probados). Esta configuración da a Claude Code una herramienta para cada momento. No necesitas las cuatro desde el principio: empieza por la skill y añade el resto según lo que hagas.
| Pieza | Momento | Qué hace | Coste |
|---|---|---|---|
| UI UX Pro Max (skill) | Decidir | Genera un sistema de diseño por sector: patrón de página, estilo, paleta, tipografías, efectos y antipatrones a evitar | Gratuita (MIT) |
| Nano Banana (MCP) | Visualizar | Genera y edita imágenes y maquetas con los modelos de imagen de Gemini | Según tu cuenta de Gemini |
| Stitch (MCP) | Visualizar | Accede a tus proyectos de Stitch, la herramienta de Google para diseñar pantallas con IA, y descarga su HTML y capturas | Según las condiciones de Stitch |
| 21st (MCP) | Construir | Busca y trae componentes React con Tailwind de un catálogo comunitario; la generación con IA requiere acceso de pago | Clave gratuita; IA de pago |
02 Paso 1: la skill de diseño y las imágenes
npm install -g ui-ux-pro-max-cli
uipro init --ai claude
# o, para todos tus proyectos:
uipro init --ai claude --global-
1
Consigue una clave de Gemini
Créala en Google AI Studio. Guárdala en tu gestor de contraseñas, nunca en un archivo que vayas a subir a Git.
-
2
Instala uv
El servidor de imágenes es un paquete de Python que se ejecuta con uvx, la herramienta de uv para lanzar paquetes sin instalarlos.
-
3
Añade el servidor MCP
Con claude mcp add y la clave como variable de entorno. Las imágenes se guardan por defecto en ~/nanobanana-images; puedes cambiarlo con IMAGE_OUTPUT_DIR.
claude mcp add nanobanana --env GEMINI_API_KEY=tu-clave -- uvx nanobanana-mcp-server@latest03 Paso 2: Stitch y 21st
Stitch se conecta con stitch-mcp, un proyecto independiente (no oficial de Google) que hace de puente con tu cuenta y añade herramientas como descargar el código de una pantalla o construir un sitio a partir de varias. Su asistente de configuración se encarga de gcloud, la autenticación y la configuración del cliente. 21st tiene su propio CLI que añade su servidor MCP a Claude Code.
# Stitch: asistente guiado (gcloud, inicio de sesión y configuración del cliente)
npx @_davideast/stitch-mcp init
# 21st: consigue antes una clave en su web, apartado MCP
npx @21st-dev/cli@latest init --client claude04 Paso 3: el flujo de trabajo
-
1
Sistema de diseño
Pide a la skill una propuesta para tu sector y guárdala como archivo del proyecto (la skill lo guarda en design-system/nombre-del-proyecto/MASTER.md) para que todas las páginas la respeten.
-
2
Maqueta
Genera una o dos maquetas de la página con Nano Banana o diseña las pantallas en Stitch. Elige una dirección antes de programar.
-
3
Construcción
Claude programa la página tomando la maqueta como referencia, el sistema de diseño como norma y los componentes de 21st como base.
-
4
Revisión
Compara el resultado con la maqueta, revisa contraste, foco visible y versión móvil, y ajusta.
Usa la skill ui-ux-pro-max para generar el sistema de diseño de la web de una bodega familiar de la Ribera del Duero que vende online y organiza visitas con cata. Quiero patrón de página, estilo, paleta con códigos, pareja tipográfica, efectos recomendados y lo que debemos evitar. Guárdalo en design-system/bodega/MASTER.md y explícame en cinco líneas por qué encaja con este público.Con nanobanana, genera dos maquetas de escritorio de la página de inicio siguiendo design-system/bodega/MASTER.md: una más editorial, con mucha fotografía de viñedo, y otra más comercial, centrada en la tienda y la reserva de visitas. Guárdalas en docs/maquetas/ y descríbeme las diferencias de estructura entre ambas.He elegido la maqueta editorial. Constrúyela en Next.js con Tailwind CSS respetando design-system/bodega/MASTER.md. Busca en 21st componentes para la cabecera, la rejilla de productos y el formulario de reserva, adáptalos a nuestra paleta y tipografías y no añadas dependencias que no necesitemos. Al terminar, dime qué componentes has usado y de dónde viene cada uno.05 Consejos y límites
- ✓Empieza con la skill sola: en muchos proyectos ya es suficiente y no requiere cuentas ni claves.
- ✓Las maquetas generadas son orientativas; pueden contener textos sin sentido o detalles imposibles de reproducir.
- ✓stitch-mcp es experimental y no tiene garantía de mantenimiento: no lo conviertas en una dependencia crítica de tu proceso.
- ✓Revisa la licencia de cada componente que traigas de 21st antes de usarlo en un proyecto de cliente.
- ✓Cada servidor MCP añade herramientas al contexto: desactiva los que no uses en un proyecto con /mcp.
- ✓Pide siempre una lista de comprobación final de accesibilidad: contraste mínimo de 4,5:1, foco visible y respeto a la preferencia de movimiento reducido.
Preguntas frecuentes
Nano Banana genera imágenes: sirve para maquetas visuales y para fotografías o ilustraciones de la web. Stitch diseña pantallas de interfaz y te da su HTML, así que es más útil cuando quieres un punto de partida con estructura real.
La clave es gratuita y permite buscar y obtener componentes. La generación de componentes con su IA alojada requiere activar acceso de pago; sin él, Claude adapta los componentes por su cuenta.
La skill tiene pautas para más de veinte entornos, incluidos HTML con Tailwind, Vue, Astro o Laravel. Los componentes de 21st, en cambio, son de React.
El asistente de stitch-mcp usa el inicio de sesión oficial de Google y una configuración de gcloud aislada. Aun así, es un proyecto independiente: revisa su código y usa un proyecto de Google Cloud dedicado.
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.