Cuando sale un modelo nuevo que realmente rinde bien, se nota enseguida. Y con Claude Opus 4.8 pasó exactamente eso. Empezó a usarse muchísimo para crear propuestas rápidas, visuales y bastante profesionales para clientes potenciales.
La gracia no está solo en que genere código. Lo interesante es el flujo completo. Puedes pasar de una idea a una propuesta funcional en muy pocos minutos, con diseño, estructura, imágenes creadas con IA y una versión navegable que ya se puede enseñar o incluso publicar.
Ese tipo de velocidad cambia por completo la manera de trabajar. Antes hacer dos propuestas distintas para dos negocios diferentes podía llevar horas. Ahora puedes tener ambas listas en paralelo y con una calidad más que suficiente para presentar una idea clara.
En este caso el flujo se apoya en Emergent, una herramienta de vibe coding que suelo usar como primera opción cuando quiero probar modelos nuevos, sobre todo porque suele incorporar las versiones recientes muy rápido. Y para preparar prompts más pulidos, también utilicé Primera App, que ayuda bastante a estructurar instrucciones más profesionales.
Tabla de contenido
- ⚡ Por qué este flujo es tan potente
- 🧠 El punto de partida: un prompt bien armado
- 💈 Propuesta 1: una web para barbería con estética premium
- 🧽 Propuesta 2: una web para empresa de limpieza con enfoque más claro y corporativo
- 🎨 El papel de las imágenes generadas con IA
- 🚦Cuándo parar el proceso automático
- 🔗 Cómo pasar el proyecto a GitHub sin depender del hosting interno
- 🌐 Publicar en Hostinger paso a paso
- 🔁 Qué pasa cuando haces cambios después de publicar
- 📦 Por qué este sistema funciona tan bien para propuestas comerciales
- 🛠️ Cosas que conviene tener claras antes de usarlo con clientes
- 🚀 Herramientas usadas en este flujo
- 💬 La conclusión: menos tiempo maquetando, más tiempo cerrando proyectos
⚡ Por qué este flujo es tan potente
La gran ventaja de este sistema es que no estás creando solo un mockup bonito. Estás generando una propuesta funcional. Eso significa que puedes enseñar una landing, navegar secciones, revisar el estilo visual y, si hace falta, publicar el proyecto fuera de la plataforma original.
Eso último es importante. Mucha gente se bloquea pensando que si genera una web con una herramienta de IA queda atada al hosting interno de esa plataforma. Pero no tiene por qué ser así. Si el proyecto puede exportarse a GitHub, entonces ya entra en un flujo mucho más flexible. Puedes alojarlo donde quieras.
En este proceso se hicieron dos ejemplos reales inspirados en clientes distintos:
- Una página para una barbería.
- Una página para una empresa de limpieza.
Los nombres concretos y datos privados se omiten, pero el método es exactamente el mismo que se usaría en un encargo real.
La idea no es pasar horas afinando cada detalle desde el principio. La idea es conseguir una propuesta sólida, rápida y suficientemente buena como para abrir conversación con el cliente. Luego ya se itera.
🧠 El punto de partida: un prompt bien armado
Si quieres que la IA te entregue algo convincente, el prompt importa muchísimo. No hace falta escribir una novela, pero sí conviene definir bien algunos elementos clave:
- Tipo de negocio.
- Tono visual deseado.
- Estructura principal de la web.
- Colores aproximados.
- Estilo de imágenes.
- Objetivo de conversión, como reservar, pedir presupuesto o contactar.
Para esto viene muy bien apoyarse en una herramienta como Primera App, porque te ayuda a convertir una idea difusa en una instrucción mejor organizada. Cuando el prompt está mejor pensado, la primera versión que genera el modelo también sube de nivel.
Un detalle práctico que uso mucho es cortar el proceso antes de ciertas fases automáticas de testeo o clustering cuando no las necesito. Si mi tarea en ese momento es solo generar una propuesta visual, prefiero revisar por mi cuenta en lugar de dejar que la herramienta siga ejecutando pasos que consumen más tiempo y más tokens.
Esto parece menor, pero cuando trabajas con varias iteraciones, ahorrar tokens y tiempo se nota bastante.
💈 Propuesta 1: una web para barbería con estética premium
El primer ejemplo fue una barbería. Aquí el objetivo era bastante claro: transmitir una sensación premium, masculina, cuidada y elegante. No se trataba de hacer una web genérica de peluquería, sino una página con identidad.
Ese tipo de negocio suele necesitar una combinación muy concreta:
- Un hero potente con imagen protagonista.
- Tipografía con carácter.
- Paleta oscura con acentos dorados o cálidos.
- Secciones de servicios y experiencia.
- Reserva visible desde el primer scroll.
Lo interesante es que Emergent no solo resolvió la maquetación. También generó las imágenes con inteligencia artificial, y eso acelera muchísimo el resultado final. No tienes que salir a buscar fotos de stock durante media hora para tener algo decente. El propio flujo te arma una versión bastante coherente visualmente.
El resultado fue una landing con fondo oscuro, un hero muy llamativo, bloques de beneficios, servicios, estadísticas, galería, testimonios y llamadas a la acción bien repartidas.
Ese primer bloque ya deja claras varias cosas:
- El negocio se posiciona como premium.
- La propuesta está pensada para hombres que valoran la imagen y la experiencia.
- La acción principal es reservar.
Después la página desarrolla mejor la propuesta. Aparecen razones para elegir la barbería, una sección de servicios con tarjetas visuales, números destacados para generar confianza y una experiencia de navegación bastante cuidada para el poco tiempo invertido.
Una de las claves aquí es entender que para una propuesta comercial no necesitas tener el texto perfecto ni la base de datos conectada. Necesitas una experiencia creíble. Si el cliente abre la página y siente que ya ve su negocio representado, la conversación cambia.
Ya no estás vendiendo una idea abstracta. Estás mostrando una versión tangible de su web futura.
🧽 Propuesta 2: una web para empresa de limpieza con enfoque más claro y corporativo
El segundo ejemplo fue una empresa de limpieza. Aquí el lenguaje visual debía ser completamente distinto. Nada de tonos oscuros ni estética de lujo. Este tipo de servicio pide limpieza visual, claridad, confianza y sensación de orden.
Por eso la propuesta se fue a una dirección mucho más luminosa. Fondo claro, textos negros muy marcados, acentos amarillos y una estructura que da prioridad a la lectura rápida.
Otra cosa interesante es que las imágenes también fueron generadas por IA. En este caso, el resultado tenía un look muy fotográfico y realista, algo que encaja muy bien con negocios de servicios. Cuando las imágenes parecen cercanas y creíbles, la propuesta gana bastante.
La home planteada para este negocio incluía elementos bastante lógicos para este sector:
- Un titular directo sobre limpieza profesional.
- Un bloque de métricas o datos de confianza.
- Presentación del equipo o del servicio.
- Tarjetas con soluciones por tipo de espacio.
- Contenido tipo blog o consejos.
- Testimonios y llamada a contacto.
Todo eso hace que la web no se vea como una simple landing vacía. Tiene densidad suficiente como para sentirse como una propuesta completa.
Y ese es otro punto importante cuando se trabaja con IA para vender servicios web. No basta con un hero bonito. Si quieres que el cliente diga “esto sí”, la propuesta tiene que sugerir profundidad. Tiene que parecer una web real, no una portada sin contenido.
🎨 El papel de las imágenes generadas con IA
Uno de los aspectos que más acelera todo el flujo es no depender de bancos de imágenes para la primera versión. Las imágenes generadas por IA, cuando están bien integradas, te permiten construir una identidad visual consistente desde el minuto uno.
En la barbería eso se notó en escenas de cortes de pelo, interiores y retratos con una atmósfera muy cuidada. En la empresa de limpieza, las imágenes reforzaban la idea de profesionalidad y orden en entornos corporativos o domésticos.
No se trata de decir que siempre van a ser definitivas. Muchas veces luego conviene reemplazarlas por fotos reales del negocio. Pero para una propuesta inicial funcionan de maravilla.
Sirven para:
- Dar contexto visual inmediato.
- Hacer que el cliente se imagine su marca allí.
- Evitar el vacío visual típico de los prototipos rápidos.
- Ahorrar mucho tiempo en curación de recursos.
En otras palabras, las imágenes generadas por IA no son un adorno. Son parte del mecanismo que te permite pasar de cero a una demo convincente en minutos.
🚦Cuándo parar el proceso automático
Hay un momento del flujo en el que la herramienta puede seguir ejecutando comprobaciones automáticas, pruebas o pasos de ajuste adicional. Y aquí conviene tener criterio.
Si estás construyendo un producto serio que va directo a producción, tiene sentido dejar correr más validaciones. Pero si tu objetivo inmediato es preparar una propuesta comercial o un prototipo funcional rápido, muchas veces no compensa.
Parar ahí tiene varias ventajas:
- Gastas menos tokens.
- Vas más rápido.
- Tienes control manual sobre los últimos detalles.
- Evitas esperar procesos que quizá ni necesitas todavía.
Este enfoque es especialmente útil cuando estás trabajando varias propuestas al mismo tiempo. En lugar de buscar perfección prematura, buscas velocidad con un nivel alto de presentación.
🔗 Cómo pasar el proyecto a GitHub sin depender del hosting interno
Aquí viene la parte que a mucha gente le interesa más. Una vez tienes la web lista en Emergent, ¿qué pasa si no quieres alojarla allí? Pues que el proceso es bastante simple.
La clave está en exportar el proyecto a GitHub.
Dentro de la herramienta hay un botón específico para transferir el código. La primera vez hay que conectar la cuenta de GitHub. Normalmente eso implica autorizar el acceso y, en algunos casos, introducir un código de verificación que llega al correo.
Cuando la conexión queda hecha, aparece la señal de que todo está vinculado correctamente. A partir de ahí ya puedes crear un repositorio nuevo y empujar el proyecto.
El flujo básico sería este:
- Conectar Emergent con GitHub una sola vez.
- Crear un repositorio nuevo con el nombre del proyecto.
- Guardar el código en GitHub desde la propia plataforma.
- Usar ese repositorio para desplegar donde quieras.
Eso significa que Emergent puede funcionar como herramienta de creación y edición, pero no necesariamente como el lugar donde termina viviendo el proyecto.
Y eso abre muchas posibilidades, porque puedes trabajar con el flujo de IA y después alojar en la infraestructura que ya usas con tus clientes.
🌐 Publicar en Hostinger paso a paso
Para el despliegue se usó Hostinger, que es una opción cómoda si ya trabajas con su panel y quieres publicar sin complicarte demasiado. El proceso mostrado fue con una app web Node.js importada desde GitHub.
En términos generales, el camino dentro del panel es este:
- Entrar en el panel de Hostinger.
- Ir a la sección de sitios web.
- Elegir la opción para añadir un nuevo sitio.
- Seleccionar una aplicación web Node.js.
- Usar un dominio temporal si solo quieres probar rápido.
- Conectar con GitHub e importar el repositorio recién creado.
- Desplegar.
Eso fue exactamente lo que se hizo primero con la web de la empresa de limpieza y luego con la de la barbería. En ambos casos, tras elegir el repositorio correcto y pulsar desplegar, la web quedó publicada en un dominio temporal.
Lo bueno de este enfoque es que no hace falta complicarse con un pipeline raro ni con exportaciones manuales archivo por archivo. Si el proyecto ya está en GitHub, Hostinger lo toma desde allí y lo levanta.
Y si trabajas con clientes, esto es comodísimo porque puedes enseñarles una URL real muy rápido, incluso antes de conectar el dominio final.
Además, si te interesa usar exactamente ese hosting, puedes hacerlo desde este enlace de Hostinger.
🔁 Qué pasa cuando haces cambios después de publicar
Aquí está una de las partes más prácticas de todo el sistema. Publicar no significa congelar el proyecto. Puedes seguir editando en Emergent con normalidad.
Por ejemplo, en la web de la barbería había una imagen principal que se veía demasiado oscura. En lugar de tocarla manualmente en un editor externo, se pidió un ajuste simple: reducir un poco el overlay y aclarar la parte derecha para que la foto se apreciara mejor.
Ese tipo de cambio es ideal para este flujo porque no rompe nada. Solo le das una instrucción concreta, la IA actualiza la propuesta y luego vuelves a guardar en GitHub.
Lo importante es esto: la conexión con GitHub se hace una sola vez. Después, cada vez que guardas los cambios en el mismo repositorio, el despliegue puede actualizarse sin repetir toda la configuración.
En la práctica, el ciclo queda así:
- Editas el proyecto dentro de Emergent.
- Guardas de nuevo en GitHub.
- El hosting toma los cambios y actualiza la web publicada.
Eso simplifica muchísimo el trabajo. Puedes mantener la comodidad del entorno de IA para iterar, pero con la tranquilidad de que el proyecto vive fuera y se puede desplegar donde decidas.
📦 Por qué este sistema funciona tan bien para propuestas comerciales
Si trabajas ofreciendo webs, landings o prototipos, este flujo tiene muchísimo sentido porque encaja con la realidad comercial. Muchas veces necesitas convencer antes de construir el producto final.
Y para convencer, lo que mejor funciona es una demo concreta.
Con esta forma de trabajar puedes:
- Preparar propuestas personalizadas en poco tiempo.
- Mostrar algo funcional en lugar de explicar ideas abstractas.
- Adaptar rápidamente estilo, estructura y copy.
- Publicar la demo en una URL real.
- Iterar sin rehacer todo desde cero.
Esto es muy útil tanto si haces prospección como si ya estás hablando con un cliente que quiere ver una dirección creativa antes de comprometerse.
También te ayuda a diferenciarte. La mayoría sigue mandando PDFs, capturas sueltas o referencias de otras webs. Si tú llegas con una propuesta navegable hecha a medida, el impacto es otro.
🛠️ Cosas que conviene tener claras antes de usarlo con clientes
Aunque el flujo es rápido, no significa que todo deba enviarse sin revisión. Hay algunas buenas prácticas que merece la pena mantener:
- Revisa el texto. La estructura puede estar muy bien, pero siempre conviene pulir titulares y mensajes.
- Comprueba las imágenes. Aunque sean buenas, verifica que tengan sentido para ese negocio.
- Valida los enlaces y botones. Sobre todo si vas a enseñar una demo publicada.
- No te enamores de la primera versión. Lo valioso aquí es la velocidad de iteración.
- Usa nombres limpios en GitHub. Luego te ahorra líos al desplegar varios proyectos.
La IA acelera mucho, sí, pero el criterio humano sigue marcando la diferencia entre una propuesta correcta y una que realmente cierra un cliente.
🚀 Herramientas usadas en este flujo
Estas son las herramientas mencionadas y para qué sirven dentro del proceso:
- Emergent para generar la web, el prototipo, el código y hacer iteraciones rápidas con IA.
- Primera App para construir prompts más profesionales y bien estructurados.
- Hostinger para publicar el proyecto desde GitHub con un flujo sencillo.
- La comunidad de Vibe Coding para seguir aprendiendo a crear apps y webs con IA.
Las cuatro encajan bastante bien entre sí. Una te ayuda a pensar mejor la instrucción, otra genera la solución, otra la publica y la comunidad te da contexto para seguir mejorando el proceso.
💬 La conclusión: menos tiempo maquetando, más tiempo cerrando proyectos
Lo mejor de este método no es solo que ahorra tiempo. Es que cambia el tipo de trabajo que haces.
En vez de gastar una tarde entera montando una demo básica desde cero, puedes tener una propuesta seria en minutos. En vez de depender de un hosting cerrado, puedes sacar el proyecto a GitHub y desplegarlo donde quieras. En vez de pelearte con recursos visuales desde el inicio, puedes apoyarte en imágenes generadas por IA para dar forma a la idea.
Y sobre todo, puedes iterar muy rápido.
Eso es lo que hace que Claude Opus 4.8, combinado con una herramienta como Emergent, sea tan interesante para crear webs para clientes. No porque haga magia, sino porque reduce muchísimo la fricción entre idea, propuesta y publicación.
Si te dedicas a crear webs, hacer prototipos o presentar propuestas comerciales, este flujo merece mucho la pena. Te permite moverte rápido sin renunciar a enseñar algo que realmente se sienta profesional.
Y cuando puedes pasar de concepto a URL publicada con esa velocidad, empiezas a trabajar de otra manera.
