Ingeniería 80/20: Cómo Reconstruí Mi Sitio en un Fin de Semana

Déjame contarte un secreto: no reescribí mi sitio personal en un fin de semana porque sea particularmente rápido codificando. Lo hice porque casi no escribí código en absoluto.

En cambio, pasé la mayor parte del tiempo haciendo lo que la mayoría de los desarrolladores evita como si fuera la peste: preparar. Documentar. Anotar. Y cuando finalmente abrí el editor y empecé a trabajar con Codex de OpenAI, la implementación real fue rápida como un truco de magia bien ensayado.

Esta es la historia de hacer el 80% del trabajo antes de escribir una sola línea de código, y cómo eso lo cambió todo.

¿Por Qué Reescribir el Sitio?

Mi sitio estaba funcionando con Qwik v3. Buena tecnología, buenas vibras, pero quería más flexibilidad, especialmente en el enrutamiento. Hice el cambio a React Router en modo framework. Una reconstrucción completa, no una refactorización. Nueva arquitectura, estructura de archivos limpia, estilos actualizados (hola Tailwind v4), y una pizarra en blanco.

Pero esto fue lo que me sorprendió: la codificación real me tomó unas 2–3 horas. De principio a fin. Y funcionó a la primera.

Entonces, ¿qué pasó con las otras 5 horas?

El 80%: Preparando a Codex Como un Consultor Prepara una Presentación

La mayor parte del esfuerzo se dedicó a construir un "mega sistema de prompts" — no en una interfaz elegante, sino directamente en la carpeta de mi proyecto. Esto es lo que hice antes de pedirle a Codex que escribiera un solo componente:

• Descargué toda la documentación de React Router y la guardé en un directorio /guides.

• Hice lo mismo para Tailwind CSS v4, convirtiendo las páginas más relevantes a Markdown usando Firecrawl.

• Escribí un archivo PROMPT.md que contiene un resumen del proyecto:

  • "El código legado vive en /, el código nuevo va en /app."
  • "Solo UI mínima, enfócate en la lógica de negocio."
  • "Usa Tailwind v4. Mantén React Router en modo framework."
  • Y así sucesivamente.

Esto no fue relleno. Fue contexto operativo — el tipo de briefing detallado que le das a un nuevo miembro del equipo el primer día. Codex no estaba adivinando lo que quería. Tenía la documentación en el repositorio. Tenía reglas exactas en lenguaje claro. Tenía restricciones.

Cuando finalmente escribí:

"Lee PROMPT.md. Primero, migra todas las rutas a la nueva app."

Codex respondió como si hubiera estado esperando esta tarea toda su vida.

Mega Prompts, Alucinaciones Mínimas

Los resultados fueron increíbles. Codex siguió las instrucciones al pie de la letra. No alucinó. No intentó inventar cosas. Respetó la directiva de "no enfocarse en la UI". La lógica del servidor se migró con precisión. La configuración de rutas parecía escrita por mí, si tuviera la paciencia de un compilador.

No se trataba solo de "ingeniería de prompts". Se trataba de anclar a Codex en las especificaciones reales y actuales. No una lista vaga de tareas. No una lista de deseos de características. Sino una entrada estructurada, ejemplos claros y acceso local a la documentación que necesitaba.

¿Qué Tomó Tiempo? No el Código

Una vez sentadas las bases, el trabajo se dividió en dos fases distintas:

1. Modo Codex – ejecución rápida, estructurada y repetible. Trabajó con la migración, lógica e incluso algo de esqueleto de diseño con precisión casi perfecta.
2. Modo exploración de diseño – lento, manual y abierto. Esta fue la parte humana: elegir un aspecto, probar layouts, experimentar con componentes. Cuando tuve un estilo visual funcional, Codex retomó para propagar los patrones de diseño.

La única verdadera demora vino de no saber cómo quería que se viera algo, no de cómo debería funcionar.

La Verdadera Lección: Codex Solo es Tan Bueno Como Tu Preparación

Este fin de semana reforzó un cambio que he estado notando en mi trabajo:

Programar se está volviendo la parte fácil. Planificar es lo difícil y lo más importante.

Para proyectos pequeños y medianos, ahora trato la implementación como una tarea del 20%. El 80% se anticipa: recolectar documentación, escribir tareas acotadas, crear prompts contextuales.

Codex prospera con este tipo de estructura. Si le das ambigüedad, te dará ambigüedad. Pero si construyes tu entorno con intención — documentos, restricciones, descripciones claras — actúa como un desarrollador senior con memoria perfecta y sin ego.

Mirando Hacia Adelante: Trata la IA Como un Compañero, No Como un Genio

La conclusión es sencilla: trata tus herramientas de codificación IA como colaboradores. Dales el mismo material que darías a un ingeniero real. Prepara el contexto. Sé específico. Sé exhaustivo.

La próxima vez, para un proyecto más grande, iré aún más lejos:

• Un documento maestro para definir todo el alcance del proyecto.
• Especificaciones individuales para cada subsistema o componente.
• Un conjunto funcional de documentos markdown y archivos de ejemplo como base local de referencia.

Codex no necesita palabras mágicas — necesita estructura.

¿Quieres desarrollar más rápido? Empieza por no construir. Planifica primero. Luego promptéalo como en serio.

La Evolución del Diseño: Un Viaje Visual

Con el tiempo, mi sitio ha pasado por varias transformaciones, cada una reflejo de nuevas ideas, herramientas y lecciones aprendidas. Aquí tienes un recorrido visual rápido de cómo fue evolucionando:

Versión 1: El Punto de Partida

Versión 2: Una Voz Más Definida

Versión 2.1: Ajustes y Refinamientos

Versión 3: La Era Qwik

Versión 4: Simplicidad Enfocada con Remix

Cada versión aportó nuevos aprendizajes sobre lo que hace efectivo un sitio—no solo en estética, sino en claridad, usabilidad y mantenibilidad. El camino del diseño ha reflejado el de desarrollo: deliberado, iterativo y siempre mirando hacia adelante.