Crear una web desde cero ya no tiene por qué significar pasar horas saltando entre documentos, bloques de notas, herramientas de diseño, código y pruebas manuales. Con un buen flujo entre ChatGPT y Codex, gran parte del trabajo repetitivo se acelera muchísimo. Pero hay una condición importante: la inteligencia artificial no reemplaza el criterio.
En esta sesión construimos una web Rank & Rent para instalación de cámaras de seguridad en Fortaleza, Brasil. El proyecto partió como una planificación en una conversación de ChatGPT y terminó como una web local en PHP, con páginas de servicio, fotografías optimizadas, componentes reutilizables, rutas limpias, logo generado con IA y una estructura lista para avanzar hacia producción.
No se trató de pedir una web gigantesca, desaparecer durante una hora y aceptar lo primero que entregara un agente. Fuimos tomando decisiones durante el proceso: corregimos el estilo de las fotografías, añadimos imágenes donde faltaba contexto, instalamos PHP cuando tenía sentido hacerlo, creamos páginas individuales para cada intención de búsqueda y adaptamos el logo al espacio real donde debía aparecer.
Ese es el cambio más interesante de este flujo: Codex acelera la ejecución, pero la dirección sigue siendo humana.
Tabla de contenido
- 🎯 El modelo Rank & Rent y por qué empezamos por la oportunidad
- 🧠 Planificar antes de pedir código
- 🏗️ De una instrucción breve a la primera versión funcional
- 📸 Fotografías realistas: una corrección pequeña que cambia todo
- ⚡ Rendimiento y optimización de imágenes desde el principio
- 🔧 Pasar a PHP para construir una web mantenible
- 🗂️ Una página por servicio para capturar mejor la intención local
- 🛡️ Crear un logo con IA sin obligar a una sola herramienta a hacerlo todo
- 🤝 Human in the loop: la IA trabaja rápido, pero el criterio sigue siendo tuyo
- ✅ Qué quedó terminado y qué falta antes de publicar
- 🚀 Un flujo más rápido no significa trabajar sin pensar
🎯 El modelo Rank & Rent y por qué empezamos por la oportunidad
Rank & Rent consiste en crear una web propia enfocada en un servicio específico dentro de una ubicación concreta. El objetivo es posicionarla para búsquedas locales, convertir las visitas en consultas reales y, cuando el sitio empieza a generar contactos, arrendar esos contactos o la propia web a una empresa que pueda atenderlos.
En este caso, el nicho elegido fue la instalación de cámaras de seguridad en Fortaleza. La ciudad era conocida, lo que ayudaba a entender el mercado y la forma en que se contratan estos servicios. Sin embargo, no es necesario vivir en la ubicación elegida para construir una web Rank & Rent.
El criterio principal debe ser la oportunidad. Antes de abrir cualquier herramienta, conviene revisar tres cosas:
- Demanda: que existan personas buscando ese servicio en la ciudad o zona objetivo.
- Competencia: cuántos resultados aparecen en Google y qué tan bien resuelven la intención de búsqueda.
- Capacidad de atención: que existan negocios reales que puedan recibir y atender los contactos generados.
La ciudad más grande no siempre es la mejor elección, ni tampoco la palabra clave más evidente. Muchas veces hay oportunidades muy interesantes en mercados donde ya existe necesidad y hay proveedores activos, pero esos negocios tienen webs débiles, escaso contenido, poca claridad comercial o una presencia casi inexistente en Google.
Una página sencilla, rápida, enfocada y útil puede encontrar espacio para competir cuando otros sitios no están resolviendo bien lo básico. Para profundizar en cómo elegir una temática con opciones reales de negocio, recomiendo revisar esta guía sobre nichos rentables en internet y esta otra sobre cómo elegir nichos y dominios con ChatGPT.
🧠 Planificar antes de pedir código
El gran error al trabajar con herramientas de IA es empezar escribiendo código con una idea poco definida. Puede producir algo funcional, sí, pero después aparecen los cambios caros: la arquitectura no encaja, el contenido no responde a la intención de búsqueda, las URLs cambian, el estilo visual queda fuera de rumbo o el sitio termina lleno de elementos que no aportan.
Por eso el proyecto se preparó primero en una conversación de ChatGPT. Ahí se consolidaron las decisiones necesarias para construir con más claridad:
- El nicho y la ubicación: cámaras de seguridad en Fortaleza.
- El idioma visible de la web: portugués de Brasil.
- La propuesta comercial: instalación para viviendas, comercios y condominios.
- La estructura de URLs y los slugs de cada servicio.
- La tecnología base: PHP para una arquitectura sencilla y mantenible.
- La estrategia visual, la paleta de color y los llamados a la acción.
- La necesidad de preparar una entrega clara que otro agente pudiera ejecutar.
Una vez que existe ese contexto, el prompt de inicio puede ser sorprendentemente corto. En vez de volver a explicar toda la tecnología, las restricciones, el idioma, el público y la estructura de páginas, se utiliza una referencia directa a la conversación de planificación y se le pide a Codex comenzar el diseño.
Este puente entre ChatGPT y Codex elimina una fricción que antes era bastante incómoda. Un espacio sirve para pensar, investigar y definir decisiones. El otro sirve para trabajar directamente con una carpeta, crear archivos, ejecutar comandos y abrir el resultado en el navegador.
La diferencia no está solamente en ahorrar tiempo escribiendo. Está en evitar que el contexto se pierda entre una herramienta y otra.
El handoff: la pieza que evita improvisar
Un handoff es una entrega de contexto organizada. No tiene que ser un documento eterno, pero sí debe contener lo suficiente para que la implementación no dependa de adivinar intenciones.
Para una web local de servicios, un handoff útil puede contemplar:
- Servicio principal y ciudad objetivo.
- Tipo de cliente al que se quiere llegar.
- Jerarquía de páginas y nombres de las rutas.
- Mensajes principales y tono del contenido.
- Paleta, tipografía y referencias visuales.
- Elementos de conversión, como formulario, botón de WhatsApp y CTA.
- Limitaciones importantes, por ejemplo no presentar imágenes ilustrativas como instalaciones reales.
- Requisitos técnicos de rendimiento, SEO y mantenimiento.
Cuando esto está resuelto antes de construir, el agente puede empezar a ejecutar en vez de gastar tiempo intentando definir el proyecto por cuenta propia.
🏗️ De una instrucción breve a la primera versión funcional
El primer mensaje para Codex fue corto porque las decisiones grandes ya existían en la planificación. A partir de ahí, comenzó a inspeccionar la carpeta de trabajo, recuperar el contexto compartido y crear la primera versión de la web.
Durante esta etapa aparecieron la estructura general, los componentes iniciales y los primeros recursos visuales. La primera homepage se construyó alrededor de una idea simple: una persona que busca instalación de cámaras de seguridad en Fortaleza debe entender inmediatamente qué se ofrece, dónde se presta el servicio y cómo solicitar un presupuesto.
La página principal abrió con un H1 claro en portugués: instalación de cámaras de seguridad en Fortaleza. Junto al mensaje principal se incorporó una fotografía de una vivienda y dos llamados a la acción visibles. Luego aparecieron los servicios principales:
- Cámaras residenciales.
- Cámaras para comercios.
- Cámaras para condominios.
Más abajo se añadieron beneficios, un resumen del proceso, áreas atendidas, preguntas frecuentes y un formulario de contacto. No hacía falta que cada detalle estuviera terminado en la primera revisión. Lo importante era comprobar tres aspectos:
- Que el mensaje principal se entendiera rápido.
- Que la jerarquía visual guiara bien la lectura.
- Que siempre existiera una forma clara de solicitar una cotización.
La base visual funcionaba. En ese punto no tenía sentido botar el diseño y empezar desde cero. Era mejor conservar la dirección y mejorar los elementos que todavía se sentían vacíos.
📸 Fotografías realistas: una corrección pequeña que cambia todo
Mientras se generaba la imagen principal, apareció una decisión importante. La dirección visual inicial corría el riesgo de verse como un render demasiado perfecto, algo que suele delatar rápidamente una imagen generada.
La corrección no fue pedir simplemente una imagen “más bonita”. El objetivo fue mucho más concreto: pedir una fotografía arquitectónica realista, con luz natural, materiales creíbles y una cámara instalada de una forma que pudiera existir en una vivienda real.
Palabras como “fotografía” ayudaron a orientar el resultado. También fue importante definir el contexto: una fachada, un acceso, un garaje o una zona exterior que realmente se sintiera habitable.
Este tipo de ajustes conviene hacerlos temprano. Si se espera a que toda la página se construya alrededor de una dirección visual equivocada, después hay que reemplazar imágenes, proporciones, recortes y elementos de diseño asociados.
La paleta quedó definida de forma coherente con el servicio:
- Azul oscuro para transmitir seguridad y estabilidad.
- Azul más vivo para reforzar el componente tecnológico.
- Amarillo para destacar los llamados a la acción.
- Verde reservado para WhatsApp como canal de contacto.
La tipografía elegida fue DM Sans. Todo el contenido visible se escribió en portugués brasileño porque el sitio está dirigido a Fortaleza, aunque las instrucciones de trabajo hacia Codex siguieron siendo en español.
Más fotos, pero con propósito
El siguiente ajuste fue casi ridículamente breve: agregar más fotos. Pero una instrucción corta no tiene por qué producir una solución superficial cuando el contexto anterior está bien construido.
La idea no era repetir la misma imagen ni llenar la página con una galería decorativa. Cada servicio necesitaba una fotografía que ayudara a entender la situación concreta:
- En cámaras residenciales, una entrada, garaje o exterior que transmitiera contexto de vivienda.
- En cámaras para comercios, un local donde tuvieran sentido los accesos, la caja, los productos y el inventario.
- En cámaras para condominios, una portería, áreas comunes, circulación interna o zonas de acceso.
Además de encajar visualmente en las tarjetas, estas imágenes debían responder bien cuando cambiaba el ancho de la pantalla. Una web de servicios locales no se puede pensar únicamente en escritorio. Gran parte de las consultas llega desde móvil, y si el diseño se rompe en ese formato, la conversión se pierde antes de empezar.
También había un límite ético claro: las fotografías eran ilustrativas. No se presentaron como instalaciones reales de una empresa todavía inexistente. Se usaron para explicar el servicio y transmitir profesionalismo, no para fabricar un portafolio falso.
⚡ Rendimiento y optimización de imágenes desde el principio
Una web visual no tiene por qué ser lenta. Después de incorporar nuevas fotografías, se optimizaron los recursos para evitar que el sitio se volviera pesado.
Las imágenes se convirtieron a WebP, un formato que ayuda a reducir el peso frente a alternativas más tradicionales. También se definieron dimensiones y textos alternativos para mejorar la estabilidad visual y la accesibilidad.
Las imágenes situadas más abajo en la página usan carga diferida. Esto significa que el navegador puede priorizar el contenido que aparece primero y posponer la descarga de imágenes que todavía no son necesarias. La fotografía principal, en cambio, conserva prioridad porque forma parte de la primera pantalla.
Es una combinación simple, pero relevante:
- Imagen principal prioritaria.
- Imágenes secundarias con carga diferida.
- Formato WebP.
- Dimensiones declaradas.
- Textos alternativos descriptivos.
El rendimiento no es una fase decorativa que se deja para el final. Afecta la experiencia, el consumo de datos, la claridad de carga y, por supuesto, la capacidad de una página de competir en buscadores. Para seguir mejorando este aspecto en otros proyectos, puede servir esta guía sobre optimización automática de imágenes en WordPress.
🔧 Pasar a PHP para construir una web mantenible
La primera versión podía abrirse en una previsualización temporal, pero el proyecto ya había alcanzado un punto donde convenía probar la arquitectura que usaríamos después en hosting. Por eso se instaló PHP y se levantó un servidor local en el puerto 8080.
MySQL quedó fuera de esta etapa. No tenía sentido añadir una base de datos antes de definir qué datos de los contactos se guardarían, cómo se gestionarían y cuál sería el flujo real de atención. Añadir tecnología sin una necesidad concreta sólo complica el mantenimiento.
Con PHP funcionando, el proyecto se volvió más ordenado. Los datos editables se centralizaron en un archivo de configuración, config/site.php. Desde ahí es posible modificar nombre, dominio, correo, teléfono, WhatsApp y zonas atendidas sin buscar manualmente esos valores página por página.
También se prepararon helpers para tareas repetitivas:
- Escapar contenido de forma segura.
- Limpiar y normalizar el número de WhatsApp.
- Construir enlaces de contacto.
- Preparar la URL canónica de cada página.
El header, footer, botones, tarjetas y preguntas frecuentes quedaron en archivos compartidos. La ventaja es muy concreta: si mañana cambia el menú, el logo, un CTA o el pie de página, la modificación se hace una vez y se refleja en todo el sitio.
Esta estructura no busca ser compleja. Busca ser práctica. Una web Rank & Rent necesita poder evolucionar rápido, cambiar datos provisionales, incorporar un negocio arrendatario y adaptarse sin romper diez páginas diferentes.
Formulario preparado para WhatsApp
El formulario se dejó preparado para dos estados. Mientras no existe un número configurado, valida los campos y comunica que el canal no está activo. Cuando se agregue el WhatsApp definitivo, JavaScript podrá tomar los datos escritos y abrir un mensaje de consulta ya preparado.
Esto permite diseñar la experiencia antes de tener todos los datos comerciales definitivos, sin fingir que el sitio ya está listo para recibir clientes.
Pruebas que no se deberían omitir
Una web puede verse bien y, aun así, fallar en cosas básicas. Por eso se revisaron escritorio, móvil, menú, formulario, navegación y rutas inexistentes.
La página 404 recibió el mismo tratamiento visual que el resto del sitio. En lugar de una pantalla genérica, vacía o rota, una URL inexistente devuelve una página coherente con la marca y permite recuperar la navegación.
Estas comprobaciones son especialmente importantes antes de publicar una web local de servicios. No basta con mirar la homepage y asumir que todo funciona.
🗂️ Una página por servicio para capturar mejor la intención local
En la homepage ya existían tarjetas para los tres servicios, pero una web Rank & Rent necesita dar suficiente espacio a las intenciones importantes. Por eso se crearon páginas independientes para:
- Cámaras residenciales.
- Cámaras para comercios.
- Cámaras para condominios.
Una página específica permite explicar mejor la situación de cada cliente, utilizar un mensaje comercial más relevante, incorporar preguntas frecuentes particulares y ofrecer una ruta más directa desde una búsqueda concreta hacia una consulta.
Alguien que busca cámaras para una tienda no tiene exactamente las mismas preocupaciones que una persona que quiere proteger una vivienda o una administración que necesita gestionar zonas comunes de un condominio.
Esta separación también ayuda a organizar una estrategia SEO más limpia. Cada URL puede estar asociada a una necesidad y a un conjunto de términos relevantes sin obligar a que una sola página intente responder todo a la vez.
La misma lógica es útil para prácticamente cualquier servicio local: cerrajería, control de plagas, climatización, abogados, dentistas, entrenadores, diseño web o reparación técnica. La clave es que la división responda a necesidades reales, no a una lista artificial de páginas casi idénticas.
Si quieres profundizar en estructura SEO y señales de relevancia dentro de un sitio, revisa esta guía sobre cómo usar ChatGPT para crear enlaces internos SEO.
🛡️ Crear un logo con IA sin obligar a una sola herramienta a hacerlo todo
Mientras Codex avanzaba con las páginas de servicio, se abrió un chat lateral para una tarea paralela: preparar prompts para crear el logo. Esto evitó llenar el hilo principal con una exploración que no era parte directa de la implementación.
Se propusieron tres direcciones creativas y se eligió una basada en un escudo combinado con una cámara. La intención era comunicar seguridad, pero sin caer en el logo genérico de una empresa de alarmas.
Para explorar esa parte visual se utilizó Genspark, mediante su agente de imágenes. El prompt se trasladó desde el espacio de trabajo, pero se eliminaron algunas indicaciones demasiado rígidas para permitir que el modelo aportara propuestas visuales propias.
La primera versión que funcionó tenía formato cuadrado: escudo y cámara arriba, texto debajo. Como imagen aislada se veía bien. Sin embargo, el contexto real importaba más que la imagen en grande.
En un header horizontal, un logo cuadrado ocupa demasiada altura y obliga a que el texto se vea pequeño. Por eso se utilizó la misma idea como referencia y se pidió una adaptación horizontal, cercana a una proporción 2 a 1.
La versión final combinó un escudo azul, un lente, un detalle amarillo similar a un sol y el texto “Câmeras Fortaleza” al costado. Luego se guardó dentro de la carpeta del proyecto para integrarlo en el sitio.
La lección es simple: no todo debe resolverse con la misma herramienta. Codex puede organizar procesos, preparar prompts, escribir código y probar la web. Una herramienta visual puede ser mejor para explorar identidad de marca. El flujo gana cuando cada herramienta se utiliza donde aporta más valor.
La variante blanca para el footer
El logo a color funcionaba correctamente sobre el header claro, pero perdía contraste dentro del footer azul oscuro. La última corrección visual fue crear una versión completamente blanca con transparencia, destinada sólo al pie de página.
Parece un detalle menor, pero este tipo de consistencia marca una diferencia enorme entre una primera maqueta y una web que se siente terminada.
🤝 Human in the loop: la IA trabaja rápido, pero el criterio sigue siendo tuyo
A esto se le llama muchas veces human in the loop, pero en la práctica es algo bastante sencillo: mirar, decidir y corregir a tiempo.
La IA puede investigar, redactar, generar imágenes, escribir código, ordenar archivos y probar rutas a una velocidad enorme. Pero no sabe automáticamente cuál es el resultado que realmente quieres conseguir. Puede tomar una dirección técnicamente válida y visualmente equivocada. Puede llenar una sección que debía mantenerse simple. Puede elegir una imagen bonita, pero poco creíble. Puede crear algo funcional que no encaja con el modelo de negocio.
Por eso no recomiendo dejar a un agente trabajando demasiado tiempo sin revisar nada. Un prompt excelente ayuda, pero no elimina la necesidad de controlar decisiones importantes.
En esta sesión, las intervenciones ocurrieron justo en los momentos donde podían cambiar el resultado:
- Se corrigió el realismo de la fotografía antes de construir toda la página alrededor de ella.
- Se agregaron más imágenes cuando la homepage todavía se sentía vacía.
- Se pasó a PHP cuando ya tenía sentido validar la arquitectura final.
- Se crearon páginas individuales al confirmar que cada servicio necesitaba más espacio.
- Se adaptó el logo a formato horizontal y luego a blanco para el footer.
Corregir temprano ahorra tokens, tiempo y trabajo descartable. Evita construir diez piezas sobre una decisión que no convencía desde el inicio.
✅ Qué quedó terminado y qué falta antes de publicar
Al cerrar esta sesión, la web ya tenía una base real de trabajo:
- Homepage completa en portugués brasileño.
- Tres páginas de servicios.
- Fotografías optimizadas en WebP.
- Componentes reutilizables.
- Rutas limpias.
- Header y footer compartidos.
- Formulario preparado para integración con WhatsApp.
- Página 404 coherente con la identidad visual.
- Logo horizontal y variante blanca para el footer.
- Estructura PHP funcionando localmente en el puerto 8080.
Pero una web local funcionando no es lo mismo que una web publicada y lista para captar contactos. Antes de salir a producción todavía quedan varios pasos:
- Elegir el dominio definitivo.
- Reemplazar todos los datos provisionales.
- Configurar el número de WhatsApp y validar el flujo del formulario.
- Subir los archivos al hosting.
- Comprobar el funcionamiento de .htaccess dentro de Apache.
- Activar HTTPS.
- Repetir pruebas de navegación, móvil, formulario y rutas en producción.
- Definir qué datos se almacenarán antes de incorporar MySQL.
- Registrar el dominio en Google Search Console para facilitar el descubrimiento e indexación de las páginas.
Para la parte de publicación, alojamiento y creación de una base sólida, pueden complementar este proceso con el tutorial de cómo crear un sitio web desde cero, la guía sobre qué revisar antes de contratar hosting y este contenido sobre cómo conectar Analytics y Search Console.
🚀 Un flujo más rápido no significa trabajar sin pensar
ChatGPT y Codex permiten avanzar mucho más rápido porque conectan planificación, implementación, pruebas y correcciones dentro de un proceso más continuo. La velocidad viene de no repetir contexto, de reutilizar componentes, de convertir decisiones en instrucciones claras y de iterar sobre una base funcional.
Pero la herramienta no elige por ti un nicho rentable, no define sola una propuesta comercial convincente, no sabe cuándo una imagen se siente falsa y no puede decidir qué detalles son importantes para el negocio. Esa parte sigue siendo responsabilidad de quien construye el proyecto.
La mejor forma de trabajar con IA no es entregar todo el control. Es usarla para reducir fricción, ejecutar más rápido y dedicar más energía a las decisiones que realmente importan.
Si estás construyendo webs de nicho, páginas locales o proyectos de afiliación, vale la pena seguir explorando estos recursos: cómo crear una web de nicho con WordPress y ChatGPT, cómo hacer sitios web de nicho automáticamente con IA y cómo crear un negocio online.
La web de cámaras de seguridad en Fortaleza todavía tiene camino por recorrer, pero la estructura ya está lista para la siguiente fase. Y ese es el punto: avanzar rápido, sin sacrificar criterio, con una base que se pueda mantener, publicar y convertir en un activo digital real.
