"Reseña de Claude Design: El flujo de trabajo web con IA que realmente publiqué"

"## Reseña de Claude Design: El flujo de trabajo web con IA que realmente publiqué\n\nEl primer prompt que le envié a Claude Design fue una mentira. Le dije que era principiante. No lo soy. Llevo dibujando píxeles y moviendo vectores desde mediados de los años 2000 — más de quince años de trabajo con clientes, sistemas de marca, páginas de destino que tenían que convertir o yo no comía ese mes. Pero quería saber qué se sentía al usarlo siendo alguien que entra completamente en frío.\n\nAsí que abrí Claude, hice clic en la nueva pestaña Design y escribí una sola frase: "Design a landing page for a cyberpunk open-world game called City Punks."\n\nSeis minutos después estaba mirando tres variaciones de wireframe y una UI de alta fidelidad funcional. No un archivo de Figma. No un PNG estático. Una página HTML viva, respirando, inspeccionable con las herramientas del navegador, con efectos de glitch en el título del hero, una navegación funcional y una paleta de colores por la que le habría cobrado a un cliente tres horas de trabajo.\n\nY mi primera reacción no fue "Figma está muerto". Fue: "Esto cubre quizás el 80% de lo que hago. El otro 20% es de lo que nadie está hablando."\n\nEsto es ese otro 20%. También es el flujo de trabajo completo que usé para publicar un sitio cyberpunk de aspecto real — Claude Design a Midjourney a Claude Code a Cloudflare — y los lugares exactos donde la IA chocó contra una pared y un humano (yo) tuvo que intervenir.\n\n## Qué es Claude Design realmente\n\nAnthropic lanzó Claude Design el 17 de abril de 2026, como vista previa de investigación dentro de las aplicaciones de Claude. Disponible para suscriptores de Pro, Max, Team y Enterprise. Funciona sobre Claude Opus 4.7.\n\nCinco opciones en la pestaña Design:\n- Prototypes — flujos interactivos con clics\n- Wireframes — exploración de layouts en baja fidelidad\n- Hi-fi UIs — páginas de destino y superficies de producto completas en HTML/CSS\n- Slide decks — presentaciones construidas como HTML\n- Import — importar archivos de Figma o cargar capturas de pantalla\n\nLo que lo diferencia de v0, Lovable y Figma Make es la transferencia: Claude Design empaqueta todo el diseño (componentes, tokens, activos, marcado) en un bundle que se le pasa a Claude Code con un solo comando.\n\n## Los requisitos\n\nNecesitas: una suscripción a Claude y una idea aproximada. Ejecuté el primer pase con el plan Pro de $20/mes.\n\nEl detalle que nadie menciona: Claude Design consume la cuota de uso muy rápido. La mitad de mi ventana diaria se había ido para la segunda ronda de ediciones de alta fidelidad. Planifica en consecuencia.\n\nStack completo:\n- Midjourney — plan Standard $30/mes\n- Topaz Astra — opcional, plan Personal $39/mes para escalado de video con IA\n- Claude Code — incluido en la suscripción de Claude\n- GitHub + Cloudflare — ambos gratuitos\n\n## El sistema de diseño es el verdadero desbloqueo\n\nEn tu primer proyecto, Claude Design pregunta: "¿Tienes activos de marca existentes, o debo construir un sistema de diseño desde cero?"\n\nArrastra un logo, un archivo de Figma o un repositorio de GitHub — los lee, extrae colores de marca, escala tipográfica, convenciones de degradados y trazos, y patrones de componentes. Lo guarda como un sistema de diseño persistente vinculado a tu workspace. Cada nuevo proyecto lo hereda automáticamente.\n\nEsto es lo que Lovable y v0 no hacen de forma nativa. Claude Design puede inferir un sistema coherente a partir de un repositorio de GitHub.\n\nPara City Punks lo construí desde cero:\n- Ambiente: Neo-Tokio 2077, mercado nocturno, bruma de neón\n- Colores primarios: cian eléctrico, magenta intenso, gris cromado\n- Tipografía: fuente display con cortes geométricos afilados; sans limpia para el cuerpo\n- Estilo de trazo: delgado y preciso — bordes de 1px, sin contornos gruesos\n- Apetito por degradados: alto — atmósfera, no decoración\n\n40 segundos después: cuadrícula de colores, cinco muestras tipográficas, tres opciones de degradado, hoja de componentes. Aprobado, ajustado, bloqueado.\n\n## El flujo de wireframe\n\nPrompt: "Landing page for City Punks, an open-world cyberpunk game launching late 2026. Big video hero with character footage, two feature sections explaining gameplay pillars, a news/blog teaser section, a full-width CTA before footer. Bold, atmospheric, not busy."\n\nTres variaciones de wireframe en menos de un minuto:\n1. Hero alineado a la izquierda — demasiado editorial, parece un blog\n2. Hero centrado — funciona pero genérico\n3. Hero en pantalla dividida — se lucha visualmente consigo mismo\n\nElegí el centrado, seguí con: "Stretch the video to full-bleed. Push the title down and give it a glitch effect. Minimize the nav — simple logo-plus-burger-menu, nothing else."\n\nOcho segundos. Listo.\n\n## Generando la UI de alta fidelidad\n\n"Hi-fi this with full visuals." Noventa segundos:\n- Página HTML completa con el sistema de diseño bloqueado aplicado\n- Encabezado "CITY PUNKS" con animación de glitch en CSS (separación RGB, vibración horizontal, tres keyframes)\n- Video de marcador de posición en el hero\n- Dos secciones de características con encabezados de prueba, subtexto, marcadores de iconos\n- Teaser de noticias con tres ranuras de tarjetas\n- CTA a ancho completo con botón bordeado de neón\n- Pie de página con enlaces de redes sociales, legales y selector de idioma\n\nTodo editable en línea. La función estrella de Claude Design: edición de estilos en línea sin perder el vínculo con el sistema de diseño. Cambia el color de acento principal — cada elemento que usa ese token se actualiza en toda la página.\n\nTres ediciones que hice:\n1. Cambié la tipografía del encabezado por algo más angular\n2. Reduje la animación de glitch de "agresiva" a "sutil"\n3. Añadí superposición de líneas de exploración al hero — dos frases en el chat, seis segundos\n\n## La transferencia a Midjourney\n\nNinguna herramienta de diseño con IA genera imágenes de calidad de producción. Abrí Midjourney:\n1. Hero: personaje femenino cyberpunk, calles iluminadas con neón, aguamarina y magenta, 16:9\n2. Sección de características: azotea de Neo-Tokio de noche, superficies mojadas por la lluvia, señalización de neón\n3. Tarjetas del blog: tres variantes de fotos de vehículos cyberpunk\n\n~40 imágenes rápidas, 20 minutos de iteración. De vuelta en Claude Design: arrastré la imagen hero al marcador de posición, acepté el degradado de superposición que Claude sugirió, pedí una superposición de cuadrícula tenue al 15% de opacidad.\n\n## El problema de la responsividad\n\nProbé en escritorio (1440px), portátil (1280px), tableta (768px), móvil (375px).\n\nEscritorio: perfecto. Portátil: perfecto. Tableta: bien. Móvil: roto.\n\nCinco problemas: desbordamiento de navegación, titular del hero demasiado grande, secciones de características sin apilarse, botón de CTA desbordándose.\n\nEscribí: "Audit the mobile layout and fix the breakpoints. Navigation should collapse to a burger menu below 768px. Hero headline should scale down to fit in two lines on mobile. Feature sections should stack vertically on tablet and below. CTA button should go full-width on mobile."\n\nDos minutos. Los cinco problemas resueltos.\n\nPero tuve que saber qué preguntar. Un principiante publicaría un sitio que se ve genial en MacBook y terrible en el iPhone del cliente.\n\n## La transferencia a Claude Code\n\nEn mi cuarta ronda de ediciones, llegué al límite de uso. Hice clic en Export to Claude Code — Claude empaqueta el diseño (HTML, CSS, JavaScript, activos, tokens) en un bundle. En la terminal: "Continue working on this project locally."\n\nUsé Claude Code para:\n- Reemplazar la imagen hero por un video de fondo comprimido\n- Ajustar los efectos de desplazamiento parallax en las secciones de características\n- Añadir estados hover en las tarjetas del blog (elevación + brillo en el borde)\n- Ajustar el espaciado del pie de página\n- Añadir metaetiquetas y tarjetas Open Graph\n\nLas variables del sistema de diseño se transfirieron limpiamente.\n\n## El truco de la animación de video\n\nBucles animados de Midjourney + Topaz Astra (plan Personal, ~160 segundos de modo creativo 4K/mes) = bucle hero de 4 segundos escalado a 4K. Comprimido de vuelta a 1080p alta tasa de bits con ffmpeg.\n\nLe dije a Claude Code: "Replace the hero image with this video as a looping background. Keep the overlay gradient and grid. Autoplay muted with playsinline attribute."\n\nOnce segundos. Listo.\n\n## Donde el toque del diseñador todavía importó\n\nPosicionamiento del logo. Por defecto: logo de 40px arriba a la izquierda. Necesitaba: más grande, desplazado a la derecha, con eslogan renderizado en píxeles.\n\nNavegación. Enlace de texto "Sign up" por defecto → botón píldora de neón, fijo al hacer scroll, brillo al pasar el cursor.\n\nCalibración del color. El cian generado automáticamente era demasiado saturado para el texto del cuerpo. Reduje tres tonos.\n\nTemporización del parallax. Multiplicador por defecto 0.5 → 0.2 para una sensación cinematográfica.\n\nEstados hover. Elevación por defecto de 2px + sombra → brillo en el borde, elevación de 1px, cambio de color en el título.\n\nContinuidad multipágina. La página interna del blog por defecto usaba un layout nuevo que no coincidía con la página de inicio.\n\n## Despliegue: GitHub + Cloudflare\n\nClaude Code inicializó un repositorio Git, lo subió a GitHub. Conectado a Cloudflare Pages — cinco clics según la documentación de Cloudflare. Cada push a main se despliega automáticamente. Tiempo total de despliegue: ~12 minutos. Alojamiento gratuito, SSL gratuito, CDN global.\n\n## El veredicto honesto\n\nClaude Design es la mejor herramienta de prompt a prototipo que he usado. Supera a Lovable en fidelidad del sistema de diseño. Supera a v0 en versatilidad. Supera a Figma Make en velocidad.\n\nPero no es un reemplazo de Figma. Es una herramienta del 80%.\n\nFenomenal para: principiantes, trabajo de concepto rápido, validación de startups, presencia web de pequeñas empresas, prototipado rápido.\n\nNo es tu única herramienta si: la fidelidad pixel-perfect importa, productos multipágina complejos, colaboración en equipo, trabajo vectorial preciso, responsividad móvil por encima de "básicamente funciona".\n\nLos diseñadores que se adapten diseñarán más rápido. Los que no lo hagan tendrán dificultades para justificar sus tarifas en 2027.\n\n## El flujo de trabajo que usaré a partir de ahora\n\n1. Claude Design — sistema de marca, wireframes, UI de alta fidelidad\n2. Midjourney — imágenes para hero y secciones\n3. Topaz Astra — solo video hero (opcional)\n4. Claude Code — al llegar al límite de cuota o para ajuste fino local\n5. Pulido manual en Claude Code — logo, navegación, estados hover, parallax, auditoría móvil\n6. GitHub → Cloudflare Pages — despliegue automático\n\nTiempo total para un sitio pequeño competente: 3-5 horas en lugar de 2-3 días.\n\n## Preguntas frecuentes\n\n### ¿Necesito Claude Pro?\nSí — Pro, Max, Team o Enterprise. El plan Pro de $20/mes lo incluye.\n\n### ¿Puede Claude Design reemplazar a Figma?\nNo. Figma gana en colaboración, historial de versiones, ecosistema de plugins y trabajo vectorial. Claude Design gana en prototipado rápido.\n\n### ¿El resultado es responsivo para móvil?\nEn su mayoría. El móvil necesita una pasada de correcciones. Pedirle a Claude Design que audite los breakpoints resuelve la mayoría de los problemas en menos de cinco minutos.\n\n### ¿Cómo es la transferencia a Claude Code?\nUn bundle completo: HTML, CSS, JavaScript, activos, tokens de diseño. Las variables del sistema de diseño se transfieren íntegras.\n\n## Trabajemos juntos\n\n* Fiverr: fiverr.com/s/EgxYmWD\n* Portfolio: mejba.me\n* Ramlit Limited: ramlit.com\n* ColorPark: colorpark.io\n* xCyberSecurity: xcybersecurity.io"