Lovable
Agente, vista previa y hosting en un solo lugar. Describo lo que quiero en lenguaje simple, la página se actualiza frente a mí, y sigo así hasta que se ve bien. Publicar es un botón en lugar de una tarde entera.
meta
Cómo construí esto
Este sitio se construyó con Lovable, Claude Code y Codex. Yo escribí el brief y los textos, los agentes escribieron la mayor parte del código, y le dije que no a mucho de lo que me ofrecieron. Así fue en realidad.
LovableClaude CodeCodex
Las herramientas
Claude Code
Para el trabajo que tiene que llegar a los archivos mismos: sacar cada pieza de texto de los componentes y llevarla a un solo archivo de contenido, conectar la búsqueda de Calendly para que la clave de la API nunca toque el navegador, y rastrear la única regla de estilo detrás de una línea brillante en el borde de una tarjeta.
Codex
Se usa para intentar de nuevo el mismo problema. Modelo distinto, instintos distintos. Cuando ambos agentes llegan al mismo enfoque, avanzo rápido. Cuando no, ese desacuerdo suele ser la verdadera pregunta de diseño.
Cómo se fue armando
El brief va antes que el código
Escribí para quién es el sitio, qué debería entender un reclutador en los primeros diez segundos, y a qué me niego a sonar. Ese documento es la razón por la que la construcción avanzó rápido. Un prompt vago te da un sitio genérico en la mitad del tiempo.
Un solo archivo de contenido, cada componente lee de ahí
Todos los textos, enlaces y referencias de imágenes viven en un solo archivo. Los componentes solo leen de ahí. Cambiar un titular, una cifra de un caso de estudio o una reseña de un libro nunca significa tocar el diseño, y un agente no puede reescribir una cifra en silencio mientras refactoriza otra cosa.
Contenido estructurado, no decoración
Los casos de estudio son pasos de entrega, grupos de resultados y lecciones. Las fotos son pies de foto con lugares asociados. Cada edición de noticias es una lista de historias con fuentes. Esa estructura es la razón por la que una página puede verse completamente distinta sin tener que reconstruirse.
Automatizaciones que no cuestan nada mantener
La calculadora de ahorros, la tarjeta de ajuste al rol, la conversión de zona horaria en los horarios de café, y el código QR corren todos en el navegador del visitante. Sin llamadas a modelos, sin servicio medido, sin factura mensual. El único dato externo es mi disponibilidad de Calendly, que se obtiene en el servidor y se guarda en caché por un minuto.
Dónde deliberadamente no se usa IA
La coincidencia de habilidades es comparación de palabras clave basada en reglas, no IA. La calculadora de ahorros es matemática simple. Puedes ver exactamente por qué obtuviste un resultado. Nada de caja negra cuando lo que está en juego es tu tiempo.
La parte lenta es el criterio
Nada de esto fue difícil de construir. Lo que tomó tiempo fue decidir: qué pie de foto estaba mal, qué cifra de impacto era un resultado de equipo y tenía que decirlo así, y el encabezado de noticias que llegó con letras ornamentadas y volvió a salir de inmediato. Ese criterio es el trabajo, y ningún agente te lo entrega.
Por qué está armado así
Un buen criterio de producto significa elegir la herramienta más simple que funcione. A veces es un modelo. Muchas veces es una tabla de búsqueda. Este sitio es pequeño, rápido, barato de operar y fácil de cambiar, que es la misma prueba que le aplico a cualquier producto.