01 Qué vas a conseguir
Explicarle a un diseñador «quiero algo como esta web» es lo más habitual del mundo. Con Claude Code puedes hacer lo mismo: le das la URL de referencia, la abre en un navegador, la fotografía en varios tamaños, analiza cómo está construida y te entrega una página propia que sigue el mismo lenguaje visual pero con tu marca, tus textos y tus imágenes.
La clave está en separar lo que se puede reutilizar (estructura de secciones, jerarquía, espaciado, tipo de tipografía, tono de color, patrones de animación) de lo que pertenece a otro (logotipos, textos, fotografías, ilustraciones). Esta guía se centra en lo primero.
UI UX Pro Max
Skill de código abierto con catálogos de estilos, paletas, combinaciones tipográficas y reglas de diseño por sector. Aporta criterio para adaptar la referencia a tu negocio.
Playwright CLI
Navegador controlable desde la terminal. Permite a Claude ver la página de referencia y la suya propia, con capturas a distintos anchos.
Nano Banana MCP
Servidor MCP opcional que genera y edita imágenes con los modelos de Gemini, para no dejar huecos ni usar fotos ajenas.
02 Instalación
-
1
Instala la skill de diseño
Puedes hacerlo como plugin de Claude Code o con su CLI. El CLI la copia a .claude/skills/ del proyecto, o a tu carpeta personal con --global.
-
2
Comprueba Python
La skill usa un script de búsqueda en Python 3 (solo biblioteca estándar, sin conexiones de red). Verifica con python3 --version.
-
3
Instala Playwright CLI
Con npm de forma global y registra sus skills para que Claude sepa manejarlo.
-
4
Opcional: conecta la generación de imágenes
Consigue una clave en Google AI Studio, instala uv y añade el servidor MCP con la clave como variable de entorno.
# Opción A: como plugin, dentro de Claude Code
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill
# Opción B: con su CLI, desde la carpeta del proyecto
npm install -g ui-ux-pro-max-cli
uipro init --ai claudenpm install -g @playwright/cli@latest
playwright-cli install --skills
# opcional: imágenes con Gemini (requiere uv)
claude mcp add nanobanana --env GEMINI_API_KEY=tu-clave -- uvx nanobanana-mcp-server@latest03 El proceso en cuatro pasos
-
1
Elige bien la referencia
Funcionan mejor las landings con secciones claras que las webs muy dinámicas o con mucho contenido generado por scripts.
-
2
Pide primero un análisis, no código
Activa el modo plan con Shift+Tab y deja que Claude capture la página y describa su sistema visual. Corrige lo que no quieras heredar.
-
3
Construye con tu contenido
Aporta tus textos, tu logotipo y tus colores de marca si los tienes; la skill ajusta el resto a tu sector.
-
4
Compara y ajusta
Pide capturas de tu versión junto a la referencia en escritorio y móvil, y ajusta detalles concretos: ritmo vertical, tamaños de titular, contraste.
Abre [URL de referencia] con playwright-cli y haz capturas de la página completa a 1440 px y a 390 px de ancho. Analiza su sistema visual: orden y función de cada sección, rejilla y márgenes, escala tipográfica y tipo de fuentes, paleta (con códigos aproximados), estilo de botones y tarjetas, y animaciones al hacer scroll o al pasar el ratón. Usa la skill ui-ux-pro-max para identificar el estilo y dime qué partes encajan con una empresa de reformas integrales y cuáles cambiarías. No escribas código todavía.Construye nuestra página de inicio siguiendo el sistema visual que acabas de analizar, con Tailwind CSS y totalmente adaptable a móvil. Usa nuestros textos del archivo contenido/inicio.md y nuestro logotipo de public/logo.svg. No copies textos, imágenes, iconos ni logotipos de la referencia. Organiza los estilos como componentes reutilizables para aplicarlos luego a las páginas de servicios. Donde falte una imagen, genérala con nanobanana con un estilo fotográfico realista y coherente con la paleta.Arranca el servidor de desarrollo y haz capturas de nuestra página a 1440 px y 390 px. Compáralas con las de la referencia y enumera las diferencias de espaciado, jerarquía y proporción que hacen que la nuestra se vea menos cuidada. Corrige las cinco más importantes y vuelve a capturar.04 Inspiración sí, copia no
Los patrones de diseño (una cabecera con titular y botón, una rejilla de servicios, una franja de testimonios) no pertenecen a nadie. Pero los textos, las fotografías, las ilustraciones, los iconos personalizados y los logotipos sí están protegidos, y una imitación demasiado fiel de una marca concreta puede generar confusión con ella.
- ✓Usa la referencia para estructura, ritmo y estilo; pon siempre tu contenido y tus recursos.
- ✓No reutilices imágenes ni iconos descargados de la web original.
- ✓Evita reproducir la combinación exacta de colores, tipografía y logotipo de un competidor directo.
- ✓Revisa las licencias de las fuentes que proponga la skill (las de Google Fonts se pueden usar en proyectos comerciales).
- ✓Las imágenes generadas con IA pueden contener errores (manos, textos, logotipos inventados): revísalas antes de publicar.
Preguntas frecuentes
Su herramienta de lectura web obtiene sobre todo el texto. Para analizar el diseño necesita ver la página renderizada, por eso esta guía usa Playwright CLI para hacer capturas.
La clave de Gemini se consigue sin coste, pero los modelos de imagen pueden tener límites o tarifas según tu cuenta. Consulta las condiciones de Google AI Studio antes de generar en volumen.
La skill tiene pautas para muchos entornos, pero el flujo de esta guía está pensado para un proyecto con código (HTML con Tailwind, React, Next.js, Laravel). Para un tema de WordPress tendrías que pedir expresamente esa salida.
Según el repositorio, la versión premium añade identidad de marca, logotipos y otros recursos. Para replicar y adaptar diseños web basta con la versión gratuita, que tiene licencia MIT.
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.