Crear una web para un negocio con IA no consiste en pedir una página y cruzar los dedos. El resultado mejora muchísimo cuando separas el trabajo en dos partes: primero pensar bien la propuesta y preparar los recursos visuales, y después convertir todo eso en una web real, responsive y funcional.
Este es el flujo que uso para crear propuestas web rápidas para negocios. En este caso, una clínica dental infantil, pero el sistema se puede aplicar a restaurantes, estudios de fitness, despachos, peluquerías, inmobiliarias o casi cualquier servicio local.
La idea es sencilla: utilizo ChatGPT como director creativo y de planificación, y Antigravity como el agente que construye, programa y ajusta la página. Ambos trabajan sobre la misma carpeta del proyecto. Así no tengo que ir descargando y subiendo imágenes continuamente ni repetir todo el contexto cada vez que cambio de herramienta.
Tabla de contenido
- 🤝 Por qué usar dos herramientas de IA como equipo
- 🦷 El punto de partida: una referencia visual concreta
- 🎨 Diseñar primero evita programar a ciegas
- 🧩 Convertir la propuesta en assets utilizables
- 📁 La carpeta compartida es el centro del proyecto
- 📝 Preparar un prompt de entrega para Antigravity
- 💻 Construir una landing real y no solo una imagen
- 📱 Revisar móvil no es opcional
- ✨ Animar con intención, no por decorar
- 🎨 Crear una variante sin perder el original
- 🚀 Publicar la propuesta en Hostinger
- 🧠 Qué hace que este flujo sea tan práctico
- 🛠️ Recursos para seguir creando con IA
- ✅ La clave: usar la IA para decidir y ejecutar mejor
🤝 Por qué usar dos herramientas de IA como equipo
No todos los modelos son igual de buenos haciendo exactamente lo mismo. Algunos destacan más al plantear una propuesta visual, entender referencias, definir una estructura y tomar decisiones creativas. Otros son más prácticos para ejecutar: escribir código, revisar archivos, aplicar cambios y probar una landing page.
Por eso me interesa repartir las tareas.
- ChatGPT se encarga de pensar el diseño, transformar una referencia en una propuesta, generar los recursos gráficos y preparar instrucciones claras.
- Antigravity recibe ese material ya organizado y lo convierte en una web funcional, responsive y lista para seguir iterando.
Este enfoque también ayuda a usar mejor los tokens. Reservo el modelo más potente para las decisiones que realmente importan: definir una dirección visual sólida, una jerarquía clara y una propuesta atractiva. Después, uso otro agente para la implementación y los pequeños ajustes, sin gastar el contexto creativo en cada corrección de márgenes, tipografías o tamaños.
Además, las herramientas cambian constantemente. Un modelo puede mejorar, otro puede bajar de precio o aparecer una alternativa más conveniente. Si el proceso está basado en una carpeta de proyecto bien organizada, puedes sustituir la herramienta sin tener que rehacer todo desde cero.
Lo importante no es casarte con una plataforma. Lo importante es construir un flujo donde cada agente tenga una responsabilidad clara.
🦷 El punto de partida: una referencia visual concreta
Para la clínica dental infantil necesitaba una página amable, moderna y nada intimidante. Una clínica para niños debe transmitir cuidado, confianza y cercanía desde el primer bloque. Si el diseño parece demasiado clínico, frío o corporativo, no encaja con la emoción que queremos provocar.
En lugar de intentar explicar toda esa idea con un texto larguísimo, partí de una imagen de referencia encontrada en Pinterest. Tenía personajes simpáticos y un estilo suave que encajaba muy bien con la identidad de una clínica infantil.
Esta es una de las cosas más útiles al trabajar con IA creativa: mostrar algo suele ser más efectivo que describirlo todo. Puedes escribir que quieres personajes tridimensionales, expresiones amables, tonos pastel, ilustraciones blandas y una composición editorial. Pero una imagen ya comunica el estilo, la energía y la intención de una forma mucho más directa.
La referencia no estaba ahí para copiarla literalmente. Su función era marcar una dirección. Le indiqué a ChatGPT que quería convertir esa inspiración en una landing page completa para una clínica odontológica infantil, con personajes que no resultaran amenazantes, textos cortos en español, secciones amplias y una estética de buena calidad.
No hace falta dejar resuelto cada detalle en el primer mensaje. De hecho, muchas veces es mejor no hacerlo. En esta etapa quería aportar:
- El tipo de negocio.
- La referencia estética.
- La sensación que debía transmitir.
- Algunas condiciones de contenido y composición.
El resto lo dejé abierto para que el modelo propusiera soluciones. Esa es la parte interesante de trabajar con un modelo capaz: tienes una idea inicial, pero también quieres descubrir una respuesta visual que quizá no habías planteado tú.
La propuesta resultante utilizaba tonos aguamarina y crema, un personaje principal con forma de diente y cepillo, y distintas ilustraciones para las secciones de la página. Tener la landing completa en una sola imagen permitió tomar una decisión importante antes de pedir código: comprobar si la dirección visual tenía sentido.
Siempre me resulta más fácil mirar una propuesta y decir “esto me gusta, esto lo cambiaría y esto sobra” que intentar escribir una especificación perfecta sin tener ninguna imagen delante. La propuesta funciona como una decisión visual compartida que después se puede entregar al siguiente agente.
🎨 Diseñar primero evita programar a ciegas
Una imagen bonita no es todavía un sitio web. Pero sí es una base excelente para construirlo. Antes de pasar a la programación, conviene usar esa propuesta para validar cuestiones que después resultan costosas de corregir:
- ¿La jerarquía del hero deja claro qué ofrece el negocio?
- ¿El personaje principal transmite la personalidad adecuada?
- ¿La paleta de color tiene suficiente contraste?
- ¿Hay aire entre secciones o todo se siente demasiado cargado?
- ¿Los bloques de contenido siguen un orden lógico?
- ¿La propuesta parece creíble para el tipo de cliente?
En esta landing, el inicio mostraba un mensaje corto y positivo, una llamada a la acción y la mascota del diente. Después aparecían motivos de confianza, tratamientos organizados en tarjetas, una sección sobre el espacio físico de la clínica y un bloque final para agendar una visita.
No es una estructura complicada, pero sí tiene una narrativa. Primero se busca reducir la incertidumbre. Después se explica el servicio. Más adelante se transmite que el lugar es agradable y, finalmente, se invita a contactar.
La IA puede producir muchas pantallas rápido. Lo que marca la diferencia es que cada sección tenga un trabajo concreto. Una landing para negocio no necesita veinte bloques distintos. Necesita una propuesta clara, una buena lectura visual y una acción principal fácil de encontrar.
🧩 Convertir la propuesta en assets utilizables
Una vez aprobada la dirección creativa, el siguiente paso fue separar los elementos visuales. No quería una única imagen enorme de la página. Necesitaba cada ilustración como un asset independiente para poder posicionarla, redimensionarla en móvil y animarla más adelante.
Los textos, botones, fondos y tarjetas se construyen en código. Las ilustraciones son piezas visuales que deben estar disponibles por separado. En este caso, eso incluía al personaje principal, las ilustraciones de confianza, los personajes de tratamientos y otros recursos de la composición.
Separar assets da mucho más control:
- Puedes adaptar la escala de cada personaje a pantallas pequeñas.
- Puedes reutilizar una ilustración en más de una sección.
- Puedes crear animaciones suaves sobre elementos concretos.
- Puedes corregir una imagen sin tener que rehacer toda la página.
- Puedes probar fondos alternativos y comprobar los bordes reales de cada archivo.
En este proceso apareció un problema muy habitual con la generación de imágenes: algunas ilustraciones parecían tener fondo transparente porque mostraban el patrón de cuadrícula, pero esa cuadrícula estaba dibujada dentro de la imagen. Si se colocaban sobre el fondo de la web, aparecía un rectángulo que no debía estar ahí.
Por eso no hay que asumir que un recurso es correcto solo porque tiene aspecto de PNG transparente. Hay que comprobarlo sobre el fondo final. Pedí que se regeneraran las piezas problemáticas utilizando una herramienta de generación que permitiera transparencia real.
El resultado fue un catálogo con las ilustraciones revisadas. Algunas podían variar ligeramente respecto a la primera propuesta y podían quedar bordes claros en ciertos assets. Eso no es necesariamente un problema, pero sí una razón para probarlos dentro de la interfaz antes de dar el trabajo por terminado.
También es útil que la carpeta incluya archivos explicativos. Un documento con los recursos disponibles, las versiones correctas y las instrucciones del proyecto reduce mucho la fricción cuando otro agente entra a trabajar. El siguiente modelo no tiene que adivinar qué imagen corresponde a cada sección ni cuál es la versión que debe evitar.
📁 La carpeta compartida es el centro del proyecto
El gran truco de este flujo no es simplemente usar dos IAs. Es conseguir que las dos operen sobre el mismo proyecto.
En la carpeta estaban la propuesta visual, los assets, el catálogo, los archivos de apoyo y, después, el código de la landing. Al abrir esa misma carpeta en Antigravity, todo estaba ya disponible. No hizo falta importar los elementos uno por uno, volver a enviar cada imagen ni reconstruir el contexto creativo desde cero.
Esto permite cambiar de herramienta sin interrumpir el proyecto. Si más adelante necesito volver a ChatGPT para pensar una sección adicional o resolver una decisión de diseño, puedo abrir la misma carpeta y continuar desde el punto donde se quedó el trabajo. Las modificaciones hechas por Antigravity estarán guardadas en los archivos.
Una carpeta ordenada transforma la IA de una conversación aislada a un proceso de producción real.
Qué conviene guardar dentro del proyecto
- La imagen de la propuesta general de la landing.
- Los assets finales con nombres descriptivos.
- Las versiones que deben usarse y las que deben evitarse.
- Notas sobre colores, secciones y tono de la marca.
- Un documento de instrucciones para construir la web.
- El código y cualquier variante que quieras comparar.
El orden parece un detalle pequeño, pero ahorra errores. También facilita que un agente lea el proyecto y trabaje con más autonomía.
📝 Preparar un prompt de entrega para Antigravity
Antes de pasar a Antigravity, pedí a ChatGPT que preparara el prompt de continuación. La instrucción era clara: otro agente iba a construir la web usando todo lo que ya estaba dentro de la carpeta.
El prompt de entrega incluía la ubicación del proyecto, los archivos que debía revisar, los assets que tenía disponibles, las secciones que debía construir y el resultado esperado. En vez de pasar solo una imagen bonita y pedir “haz una web parecida”, la instrucción explicaba una propuesta concreta.
La web debía ser una landing page real, responsive y funcional para una clínica odontológica infantil. También debía respetar la paleta, el espacio y el estilo de la propuesta.
Una especificación útil para este tipo de proyecto puede incluir:
- Estructura: qué aparece en el hero y cuáles son las secciones posteriores.
- Assets: qué ilustración se usa en cada bloque y cuáles no deben utilizarse.
- Contenido: textos previstos y llamadas a la acción.
- Estilo: colores, ritmo visual, nivel de espacio en blanco y tono de marca.
- Responsive: criterios concretos para móvil, como asegurar que los personajes se vean completos.
- Funcionalidad: navegación, botones y formulario de visita.
- Límites: no inventar teléfonos, direcciones, testimonios ni datos que el negocio no haya proporcionado.
Este último punto es especialmente importante. Cuando se hacen propuestas para negocios, es muy fácil que una IA rellene huecos con información ficticia. Un teléfono falso, una dirección inventada o testimonios genéricos pueden hacer que una propuesta parezca terminada, pero no es una práctica adecuada. Es mejor dejar esos datos como campos pendientes o pedirlos al cliente.
Tener todos estos detalles definidos permite que Antigravity se concentre en lo que debe hacer bien: convertir la intención visual en una interfaz de verdad.
💻 Construir una landing real y no solo una imagen
Con el prompt listo, abrí la carpeta en Antigravity, le pedí que revisara el proyecto y pegué las instrucciones completas. A partir de ahí empezó a construir la página.
Una buena landing no se mide solo por cómo se ve en una captura. Debe permitir navegar, pulsar botones, abrir el formulario y adaptarse correctamente a distintos tamaños de pantalla. Esta es la diferencia entre enseñar una propuesta estática y poder compartir un enlace real con un cliente.
Durante la construcción, fui abriendo el enlace local para comprobar el resultado. Es importante entender que mientras el agente todavía está trabajando, puedes encontrarte con un estado intermedio. No todo lo que ves en ese momento es necesariamente la versión final.
En la primera revisión, el logotipo aparecía dividido en dos líneas. Como quería que se mantuviera en una sola línea tanto en el encabezado como en el pie de página, esperé a que terminara el trabajo y después pedí una corrección específica.
El mensaje no tenía que explicar cómo modificar el CSS. Bastaba con indicar el resultado:
- Corregir el logotipo en el header y en el footer.
- Mantenerlo en una sola línea.
- No iniciar una revisión general no solicitada.
Esta forma de trabajar es muy cómoda. No tengo que decidir cada detalle técnico antes de tener algo delante. Primero veo el resultado, identifico el problema y describo con claridad el cambio que necesito.
📱 Revisar móvil no es opcional
Una web puede verse bien en escritorio y desordenarse completamente en móvil. En este proyecto, al estrechar la ventana, las dos primeras secciones se veían demasiado apretadas y la composición perdía orden. El resto de la página funcionaba bien, así que la corrección debía ser precisa.
Pedí que se arreglaran la primera y la segunda sección en móvil y que también se redujeran los textos del encabezado. Esa última indicación es importante porque muchas veces el problema no es solo el ancho de los elementos. También es la cantidad de texto, el tamaño de los titulares y la competición entre imagen y copy.
Después de aplicar los cambios, el hero tenía una lectura más cómoda y la mascota estaba mejor acomodada. Ya no parecía que el contenido estuviera intentando encajar a la fuerza en la pantalla.
Para revisar una landing en móvil, normalmente compruebo al menos estas cuestiones:
- Que el titular conserve legibilidad sin ocupar media pantalla.
- Que el botón principal siga siendo fácil de encontrar y pulsar.
- Que las ilustraciones no queden cortadas de forma extraña.
- Que las tarjetas tengan suficiente espacio entre sí.
- Que la navegación no se rompa.
- Que el formulario se pueda completar sin fricción.
- Que el pie de página mantenga una jerarquía clara.
En una propuesta para un negocio local, el móvil no es una versión secundaria. Muchas personas llegarán desde el teléfono, abrirán el enlace rápidamente y decidirán en pocos segundos si la web transmite profesionalidad.
✨ Animar con intención, no por decorar
Una vez que la estructura y el responsive estaban en orden, quise añadir movimiento a los personajes. Pero la instrucción fue deliberadamente simple: animar el diente principal y otros elementos relevantes de manera suave, sin que molestara, pero aportando a la experiencia.
No quería elementos saltando todo el tiempo mientras alguien intenta leer. La animación debe acompañar a la interfaz, no competir con ella. Para una clínica infantil, un pequeño movimiento del personaje puede ayudar a dar vida a la página y reforzar el tono amable del diseño.
De nuevo, no hizo falta dictar la solución técnica. No era necesario entrar en detalles de keyframes, duración o propiedades CSS. El objetivo era describir la sensación buscada y después comprobar el resultado.
Cuando la mascota principal quedó animada, pedí extender esa lógica a los personajes de la segunda y tercera sección. El diseño empezó a sentirse más vivo, pero sin convertirse en una página ruidosa.
Una regla simple para este tipo de animaciones es esta: si al quitarla el diseño se entiende igual, está bien. Si al añadirla cuesta más leer o encontrar el botón principal, sobra.
🎨 Crear una variante sin perder el original
Una de las ventajas de trabajar con agentes de código es que puedes probar alternativas sin destruir una versión que ya funciona. En este caso, quise explorar una variación con más contraste.
Pedí clonar la landing y ajustar los fondos: usar un azul celeste claro y otro algo más oscuro, sustituyendo el blanco por el tono celeste más suave. La idea era comprobar cómo respondían las ilustraciones y las secciones cuando el fondo tenía más presencia.
La condición importante era mantener la versión original. Así se podían abrir las dos páginas, compararlas y decidir con calma cuál funcionaba mejor. No se trata de cambiar por cambiar, sino de tener una alternativa concreta para evaluar.
Este hábito es muy útil en proyectos para clientes. En vez de debatir de forma abstracta si un fondo “podría quedar mejor”, puedes presentar dos enlaces y revisar cómo se siente cada opción con el mismo contenido, los mismos assets y la misma estructura.
Las variantes sirven para tomar decisiones, no para multiplicar trabajo sin control. Define qué estás comparando: contraste, tono de color, estilo de botones, densidad de contenido o jerarquía del hero. Después, cambia solo esa variable.
🚀 Publicar la propuesta en Hostinger
Cuando la web ya estaba lista para enseñar, el siguiente paso fue publicarla. Una URL funcional es mucho más práctica que enviar una captura. Permite recorrer la landing, abrir el formulario, probar los botones y comprobar cómo responde desde móvil.
Para alojar el proyecto utilicé Hostinger. Si quieres usar la misma plataforma, puedes acceder desde este enlace de Hostinger.
El proceso de publicación fue directo:
- Entrar en el panel de sitios y añadir un nuevo sitio.
- Elegir la opción de sitio PHP o HTML personalizado.
- Usar un dominio temporal para mostrar la propuesta.
- Abrir el gestor de archivos.
- Entrar en la carpeta public_html.
- Eliminar el archivo predeterminado del hosting.
- Subir los archivos de la landing y la carpeta de imágenes.
- Subir también la variante azul celeste para comparar ambas versiones publicadas.
Con esto, las dos versiones quedaron disponibles mediante enlace. A partir de ahí, los ajustes del logo, el responsive, las ilustraciones o los colores podían seguir haciéndose desde Antigravity sobre el proyecto, para después actualizar los archivos publicados.
Un dominio temporal es suficiente cuando estás preparando una propuesta. No necesitas esperar a tener el dominio definitivo de un cliente para mostrar una experiencia navegable. Primero valida la dirección, consigue feedback y después conecta el dominio final cuando corresponda.
🧠 Qué hace que este flujo sea tan práctico
La parte potente de este sistema no es que una IA haga todo sin supervisión. Es que puedes avanzar más rápido sin perder el control de las decisiones importantes.
El flujo completo queda así:
- Buscar una referencia visual que marque la dirección.
- Usar ChatGPT para proponer una landing completa.
- Revisar la propuesta antes de pasar a código.
- Generar y organizar los assets por separado.
- Comprobar que las transparencias sean reales.
- Guardar materiales y notas en una misma carpeta.
- Preparar un prompt de entrega detallado.
- Usar Antigravity para construir una landing responsive y funcional.
- Revisar escritorio, móvil, navegación y formulario.
- Aplicar ajustes concretos según lo que ves.
- Crear variantes sin perder el original.
- Publicar la propuesta y compartir un enlace real.
El resultado no depende de acertar un prompt perfecto a la primera. Depende de trabajar por etapas. Cada fase reduce incertidumbre para la siguiente: la referencia reduce ambigüedad visual, la propuesta reduce ambigüedad de diseño, los assets reducen ambigüedad de implementación y el prompt de entrega reduce ambigüedad técnica.
Eso es lo que permite crear webs para negocios de forma rápida sin que todas parezcan una plantilla genérica.
🛠️ Recursos para seguir creando con IA
Todos los prompts utilizados para este flujo están reunidos en un documento de prompts. Puedes utilizarlos como base y adaptarlos al tipo de negocio, al estilo visual y a la estructura que necesites.
Si quieres crear propuestas web más rápido, también puedes conocer Dínamo Sites, una herramienta orientada a crear webs increíbles con este tipo de enfoque.
Para quienes quieran trabajar en productos más allá de las landing pages, en Primera App encontrarás prompts profesionales para crear una app con IA.
Comparto código, recursos y procesos de creación de sitios dentro de la comunidad de vibe coding y apps con IA. Es un espacio para seguir experimentando con flujos de trabajo, herramientas y proyectos reales.
Y si tienes una idea concreta y quieres que trabajemos en ella, puedes enviar los detalles de tu proyecto desde el formulario de solicitud.
✅ La clave: usar la IA para decidir y ejecutar mejor
Crear una web con IA puede ser rápido, pero eso no significa improvisar. Una buena referencia, una propuesta clara, assets organizados, una carpeta compartida y revisiones específicas producen mejores resultados que intentar pedir todo en una sola conversación.
ChatGPT puede ayudarte a pensar como director creativo. Antigravity puede ayudarte a convertir esa dirección en una web funcional. Pero el criterio sigue siendo tuyo: decidir qué sensación debe transmitir el negocio, qué se queda, qué se corrige y qué versión merece publicarse.
Cuando trabajas así, la IA deja de ser un generador de páginas genéricas. Se convierte en un equipo que te permite pasar de una idea a una propuesta navegable, presentable y lista para enseñar.
Aviso: este artículo puede incluir enlaces promocionales. Si realizas una compra, puedo recibir una comisión sin costo adicional para ti.
