Replica Diseños Web
Roba el diseño de cualquier página web. Instala un skill, pega una URL, y Claude replica el layout, colores, tipografía y animaciones en tu proyecto.
Cómo funciona
Combinas dos cosas: un skill que le da conocimiento de diseño a Claude (67 estilos UI, 161 paletas de colores, 57 combinaciones de fuentes) y un prompt que le dice exactamente qué replicar de la página que le pases.
UI UX Pro Max Skill
El conocimiento — 161 reglas de diseño por industria
El Prompt de Replicación
La instrucción — analiza la URL y replica todo
01 requisitos
Qué necesitas
Claude Code instalado
Si aún no lo tienes, sigue la guía Instalar Claude Code.
Un proyecto web
Next.js, React, o cualquier proyecto frontend donde quieras aplicar el diseño replicado.
02 el skill
Instalar UI UX Pro Max
Este skill le enseña a Claude cómo diseñar como profesional — no solo genera código, sino que entiende reglas de diseño reales por industria.
Instalar el skill
claude install-skill https://github.com/nextlevelbuilder/ui-ux-pro-max-skillQué incluye este skill
67 estilos UI
Glassmorphism, neumorphism, brutalism, AI-native y más
161 paletas de colores
Alineadas por categoría de producto e industria
57 combinaciones de fuentes
Integración directa con Google Fonts
161 reglas de razonamiento
8 dominios: tech, finanzas, salud, e-commerce y más
03 el prompt
El Prompt de Replicación
Este es el prompt que usas después de instalar el skill. Copia la URL de cualquier página que te guste, pega este prompt en Claude Code, y deja que replique el diseño completo.
Replicar el diseño de una página web
Cambia la URL por la página que quieras replicar. Claude analiza layout, colores, tipografía y animaciones.
Esta es la landing page [URL]. Replica el layout y espaciado, la tipografía, los patrones de animación, y los colores y la paleta de colores. Usa el skill UI UX Pro Max y Tailwind CSS para construir un sitio completamente responsive. Que las plantillas las pueda aplicar a otras páginas y landing pages, para que mi landing se vea como este sitio pero con mi contenido y copy. Si no tienes imágenes o gráficos, usa NanoBanana para generarlos.
Cómo usarlo paso a paso
1. Encuentra la página
Ve a cualquier sitio web que te guste y copia su URL
2. Pega el prompt
Abre Claude Code en tu proyecto y pega el prompt con la URL
3. Claude replica
Claude analiza y construye la réplica con tu contenido
04 opcional
NanoBanana — Imágenes con IA
Si no tienes imágenes propias, NanoBanana genera imágenes con IA usando modelos Gemini. Es un servidor MCP que Claude puede usar automáticamente cuando necesita gráficos.
Agregar NanoBanana a tu .mcp.json
echo '{"mcpServers":{"nanobanana":{"command":"npx","args":["-y","nanobanana-mcp-server"]}}}' >> .mcp.jsonO configurar manualmente en .mcp.json
{
"mcpServers": {
"nanobanana": {
"command": "npx",
"args": ["-y", "nanobanana-mcp-server"]
}
}
}Esto es completamente opcional
Si ya tienes tus propias imágenes o assets, no necesitas NanoBanana. El prompt menciona NanoBanana como fallback — solo se activa si Claude no tiene imágenes disponibles.
05 tips
Tips para mejores resultados
Elige páginas con layout claro
Landing pages con secciones bien definidas dan mejores resultados que páginas complejas con muchos elementos dinámicos.
Cambia el copy después
Primero deja que Claude replique el diseño, luego reemplaza el texto con tu propio contenido y marca.
Usa Plan Mode
Presiona Shift+Tab antes de ejecutar para que Claude planee la estructura primero — componentes, colores y layout.
Itera en los detalles
Después de la primera réplica, pídele ajustes específicos: "hazlo más oscuro", "cambia la fuente", "agrega más animaciones".
Recursos y documentación