El Desafío de 48 Horas: Construyendo Z-Image desde Cero
Cómo construimos un sitio web generador de imágenes IA gratuito en 48 horas - desde la compra del dominio hasta el despliegue. Una mirada sin filtros a construir en público.
Es tarde, no puedo dormir, y he estado observando el revuelo de la comunidad alrededor de z-image-turbo durante los últimos días.
Este modelo salió hace apenas 2-3 días, y la discusión está en todas partes. Las búsquedas de Google Trends están explotando ahora mismo.
Lo probé en Hugging Face Spaces, y ahora entiendo por qué todos hablan de él.
Creo que este podría ser el SDXL de próxima generación. Esto es lo que me emocionó (para el análisis técnico profundo, mira nuestra evolución de los modelos de IA texto-a-imagen):
- Funciona en GPUs de consumo — finalmente, sin necesidad de hardware empresarial
- Rostros humanos fotorrealistas — el realismo en retratos es increíble
- Rápido — generación con solo 8 pasos de inferencia
- Renderizado de texto adecuado — inglés y chino, realmente legible
El hype es real. Pero el Space de Hugging Face siempre está saturado, y la mayoría de la gente aún no puede probarlo fácilmente sin esperar en cola o configurarlo localmente.
Quiero que más personas puedan usar este modelo.
Así que tomé una decisión: Voy a construir un sitio web gratuito para él.
El Desafío de 48 Horas
- Construir un sitio de z-image-turbo gratuito desde cero
- Construyendo en Público completo: dominio → desarrollo → despliegue → lanzamiento
- 48 horas, empezando ahora
- Si fallo, pueden burlarse de mí para siempre
Lo que verás: Cada paso documentado. Cada error expuesto.
Ya sea que tenga éxito o fracase estrepitosamente, aprenderás algo.
Lo que está en juego: Si fallo, captura de pantalla de este post. Sácalo a relucir para siempre. Permiso total concedido.
El reloj comienza ahora. 48 horas. Veamos qué pasa.
T+1h: Empezando
Poniendo Z-Image a funcionar en nuestro servidor con ComfyUI. Quizás pueda optimizar la velocidad después, pero esto servirá por ahora.
T+1.5h: Dominio Comprado
Compré el dominio en Cloudflare — z-image.vip ($10)
T+2h: Configuración del Proyecto
Desplegué el proyecto Next.js en Vercel. Como hacemos desarrollo web y tenemos nuestras propias plantillas refinadas, este paso fue bastante fácil para nosotros. Pero honestamente, con herramientas poderosas como Claude Code hoy en día, cualquiera puede hacer esto. También puedes comprar plantillas listas de varios proveedores — no los nombraré aquí, pero confía en mí, una búsqueda rápida y encontrarás un montón.
T+3h: Stack Tecnológico Decidido
Esto es lo que estamos usando:
| Categoría | Tecnología |
|---|---|
| Frontend | Next.js (Vercel) |
| Dominio | Cloudflare |
| Almacenamiento | Cloudflare R2 |
| Procesamiento de Imágenes | Cloudflare Images |
| Autenticación | Google Auth, Email Auth |
| Servicio de Email | Plunk |
| Base de Datos | PostgreSQL (Neon) |
| ORM | Prisma |
| Trabajos en Segundo Plano | Trigger.dev |
| Servidor GPU | RunPod + FastAPI |
T+4h: Tema y Configuración de Landing Page
Landing page + configuración del tema (Tailwind CSS + shadcn/ui, tema Claude). Usualmente agarro mis temas de tweakcn.com — me encanta este sitio porque los temas son super limpios y muy simples. Cada proyecto Next.js tiene un archivo CSS global — solo copia lo que obtienes del sitio y pégalo. Eso es todo.
T+5h: Logo Creado
Logo creado con Seadream 4.0. Las herramientas de IA haciendo todo más rápido.
T+6h: Cursor Personalizado
Incluso hice archivos SVG de cursor personalizado — honestamente esto es muy divertido. Tengo diferentes versiones para modo oscuro y claro, más diferentes estados. Es algo pequeño pero hace que tu sitio se sienta diferente al de todos los demás. Característica super simple pero realmente añade personalidad. El cursor fue generado por Gemini 3 Pro.
T+7h: Filosofía de Landing Page
Hablemos de landing pages — honestamente, esta parte puede hacer o deshacer tu sitio.
Tu landing page es la primera impresión. Tienes quizás 3 segundos para convencer a alguien de quedarse. Eso es todo. ¿Entonces cómo lo haces contar?
El playbook estándar:
- Navbar
- Sección hero (aquí es donde los enganchas)
- Características (¿qué puedes hacer por mí?)
- Precios (sé directo al respecto)
- Testimonios (prueba social)
- Llamada a la Acción (diles qué hacer a continuación)
- Footer
Siendo honestos: muchos de esos testimonios brillantes que ves en sitios web no son todos reales. Algunos son solo plantillas de placeholder. Lo mismo con mucho del contenido. No digo que todos estén mintiendo, pero digamos que deberías tomar algo de ello con escepticismo. Aprenderás a notar la diferencia.
Cuando construyo landing pages, paso mucho tiempo navegando bibliotecas de componentes y otros sitios buscando inspiración. Sin vergüenza en eso — ¿por qué reinventar la rueda? Encuentra algo que funcione, adáptalo, hazlo tuyo.
Pero esto es lo que he aprendido con el tiempo: nada de eso importa si no puedes responder estas tres preguntas:
- ¿Por qué debería usar tu sitio en lugar de otra cosa?
- ¿Qué problema me estás resolviendo?
- ¿Qué te hace diferente?
Clava esas, y estás 90% ahí. Todo lo demás es solo pulido.
Ah y una cosa más — rendimiento. Si tu sitio tarda una eternidad en cargar, la gente se va. Nadie tiene tiempo de esperar. Cerrarán la pestaña antes de que tu elegante animación hero termine de cargar.
T+8h: Landing Page Terminada
¡Landing page terminada! Tengo todos los básicos — navbar, hero, características, precios, testimonios, CTA, footer. Solo necesito cambiar las imágenes placeholder por las generadas reales después. Honestamente, se ve bastante bien hasta ahora.
Me estoy cansando un poco ahora, pero siguiendo adelante. Lo siguiente: autenticación Google y login por email. Esta parte va a ser un poco tediosa — hay que registrarse con Google, configurar todas las variables de entorno, lo típico molesto.
T+9h: Primer Despliegue
El sitio está ahora desplegado en Vercel y en vivo en z-image.vip — puede que todavía tenga algunos bugs aquí y allá. La función principal de generación de imágenes aún no funciona completamente, pero literalmente me estoy quedando dormido en el teclado ahora mismo. Voy a tomar una siesta rápida.
Lo siguiente cuando despierte:
- Arreglar bugs y pulir cosas
- Generar algunas imágenes reales para reemplazar los placeholders en el sitio
Estén atentos — seguimos construyendo.
T+10h: De Vuelta
Estoy de vuelta. Vamos.
T+11h: El Loop Principal
Ahora trabajando en la parte más importante — el flujo completo de generación de imágenes.
Este es el loop completo:
- Frontend: usuario envía una tarea
- Backend: recibe y procesa la solicitud
- Servidor GPU (RunPod): maneja la generación real de imágenes
- Resultados: regresan y se muestran en el frontend
Un ciclo completo desde entrada del usuario → backend → GPU → de vuelta al usuario. Aquí es donde ocurre la magia.
T+12h: Arreglos Importantes
Arreglé un montón de cosas:
Problema de estilos en móvil — descubrí que el layout de cascada no hacía scroll en móvil pero funcionaba bien en desktop. Arreglado.
El flujo de generación de imágenes está completo: Usuario hace clic en generar → solicitud va al backend → GPU toma la tarea → empieza a procesar → actualizaciones de estado → callback notifica a nuestro backend → orden actualizada → frontend obtiene resultados en tiempo real vía Upstash Realtime.
Un problema sin embargo — mantener la suscripción abierta 24/7 parece algo caro. Lo optimizaré después. Suficiente por ahora.
Añadí login anónimo — ahora puedes generar imágenes sin registrarte. Algunos en los comentarios pidieron esto, así que lo hice realidad. Pero sí, hay que añadir captcha o algo después para prevenir abuso. Si te registras, obtendrás más créditos.
Todavía con algunos bordes ásperos pero estamos llegando.
Llevar múltiples proyectos al mismo tiempo me está matando. Sin IA estaría absolutamente perdido ahora mismo.
T+24h: Está en Vivo
Bien, está terminado. Compartiéndolo con todos ahora — necesito que me ayuden a probarlo.
El sitio está en vivo: https://z-image.vip/
Funcionando con una sola 4090 por ahora. Si el tráfico aumenta, añadiré más máquinas.
Puede que todavía haya algunos detalles pequeños que necesiten arreglo, pero el flujo principal debería estar funcionando bien. Suficiente para compartir.
Lo siguiente que estoy pensando:
- Optimización SEO
- Añadir algunas páginas de comparación entre modelos
- Quizás algo de contenido de benchmarks
- También noté que la comunidad ya tiene algunos LoRAs para este modelo — definitivamente quiero probar esos
Me voy a dormir ahora. Cuando despierte, revisaré el feedback y haré otra ronda de arreglos.
Díganme qué está roto.
Qué Sigue
Esto es solo el comienzo. Planeamos:
- Eventualmente hacer este proyecto open-source en GitHub
- Añadir más modelos conforme salgan
- Seguir mejorando basado en feedback de usuarios
Si necesitas más créditos gratuitos, contáctanos. Estamos aquí para hacer la generación de imágenes IA accesible para todos.
48 horas. Un sitio web. Cero sueño. Valió la pena.
Sigue Leyendo
- Z-Image Turbo vs Flux: Comparativa 2025 — Por qué Z-Image Turbo es 5-10x más rápido que Flux
- Mejor Sampler para Z-Image Turbo — Optimiza tu configuración de generación
- La Evolución de la IA Texto-a-Imagen — De Stable Diffusion a Z-Image Turbo