Saltar al contenido
Lección 3 de 12

El Flujo de Trabajo AI-First

8 min read

El Flujo de Trabajo Tradicional Es un Cuello de Botella

Todo desarrollador conoce el flujo de trabajo tradicional: pensar en lo que quieres construir, escribir el codigo, ejecutarlo, encontrar bugs, depurar, escribir mas codigo, repetir. Este ciclo ha sido el predeterminado durante decadas, y tiene un problema fundamental -- eres tanto el arquitecto como el obrero de construccion. Tomas las decisiones de alto nivel y luego pasas la mayor parte de tu tiempo en la ejecucion de bajo nivel.

El ciclo tradicional:

Pensar -> Codificar -> Ejecutar -> Depurar -> Codificar -> Probar -> Codificar -> Commit
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
           Esta parte es el 80% de tu tiempo

El flujo de trabajo AI-first invierte esta proporcion:

Pensar -> Describir -> Revisar -> Ajustar -> Verificar -> Commit
^^^^^^    ^^^^^^^^^^   ^^^^^^^^^
Esta parte es el 80% de tu tiempo (y asi debe ser)

En el flujo de trabajo AI-first, pasas la mayor parte de tu tiempo en las partes que mas importan: definir lo que quieres, revisar lo que se construyo y tomar decisiones sobre calidad y direccion. El trabajo mecanico de escribir codigo, gestionar importaciones, manejar boilerplate y corregir errores de sintaxis lo maneja la IA.

El Ciclo AI-First de Cinco Pasos

Aqui esta el flujo de trabajo completo que usan los desarrolladores 5.7x:

Paso 1: Define el Resultado Claramente

Antes de tocar cualquier herramienta, ten total claridad sobre lo que quieres. No "agregar una funcionalidad" sino "agregar preferencias de usuario con una pagina de configuracion, endpoint de API para GET/PUT, almacenamiento en PostgreSQL y una migracion." Cuanto mas precisa sea tu definicion del resultado, menos iteraciones necesitas.

Escribelo. En serio. Incluso una nota rapida fuerza la claridad:

## Funcionalidad: Preferencias de Usuario
- Pagina de configuracion en /settings con interruptores toggle
- Endpoint de API en /api/preferences (GET, PUT)
- Almacenar en PostgreSQL, nueva tabla preferences
- Campos: theme (light/dark), language (en/es), notifications (boolean)
- Migracion con soporte de rollback
- Tests de integracion para la API

Paso 2: Deja que la IA Proponga el Enfoque

En lugar de saltar a la implementacion, pide a la IA que planifique primero. Esto captura problemas arquitectonicos antes de que se escriba cualquier codigo:

claude "/plan Agrega un sistema de preferencias de usuario. Pagina de
       configuracion en /settings, API en /api/preferences con GET/PUT,
       almacenamiento PostgreSQL con nueva tabla preferences. Campos:
       theme, language, notifications. Incluir migracion y tests."

Revisa el plan. Tiene sentido la estructura de archivos? Son las convenciones de nombres consistentes con tu proyecto? Esta el enfoque de acceso a base de datos alineado con tus patrones existentes? Aqui es donde tu experiencia importa mas -- no en escribir el codigo, sino en evaluar la arquitectura.

Paso 3: Revisa y Ajusta

Despues de revisar el plan, proporciona retroalimentacion antes de que comience la ejecucion:

  • "Usa el pool de conexiones de base de datos existente, no crees uno nuevo"
  • "Sigue el mismo patron que el endpoint /api/users"
  • "Agrega rate limiting al endpoint PUT"
  • "Usa zod para validacion de entrada, siguiendo nuestros patrones de esquema existentes"

Este paso de ajuste es critico. Es donde tu conocimiento del dominio y el contexto especifico del proyecto dan forma a la implementacion. La IA puede escribir codigo excelente, pero necesita tu guia sobre las convenciones del proyecto y los requisitos de negocio.

Paso 4: Deja que la IA Ejecute

Una vez que el plan esta aprobado y ajustado, deja que la IA maneje la implementacion completa. Este es el paso donde la mayoria de los desarrolladores luchan -- quieren intervenir, escribir algo del codigo ellos mismos, mantener una sensacion de control. Resiste esta urgencia.

claude "Ejecuta el plan. Crea todos los archivos, ejecuta la migracion
       y verifica que los tests pasen."

Mientras la IA ejecuta, puedes revisar la salida mientras se transmite. Observa:

  • Archivos siendo creados en las ubicaciones correctas
  • Patrones de importacion que coincidan con tus convenciones
  • Estructura de tests que siga los estandares de tu proyecto

Pero no interrumpas a menos que algo este claramente mal a nivel arquitectonico. Problemas menores de estilo pueden corregirse en la siguiente iteracion.

Paso 5: Verifica los Resultados

Despues de la ejecucion, verifica los resultados:

# Ejecutar los tests que creo la IA
npm test -- --filter preferences

# Verificar la migracion
npx prisma migrate status

# Iniciar el servidor de desarrollo y probar manualmente
npm run dev

Si todo funciona, haz commit. Si se necesitan ajustes, describelos claramente y vuelve al Paso 3. Cada iteracion se acerca mas al resultado final sin que escribas una sola linea de codigo manualmente.

El Principio "Describe, No Codifiques"

El principio central del desarrollo AI-first es enganosamente simple: describe lo que quieres en lugar de escribirlo tu mismo. Pero "describir" hace mucho trabajo en esa oracion. Las buenas descripciones son:

Especificas sobre resultados:

Malo:  "Agrega modo oscuro"
Bueno: "Agrega modo oscuro/claro con next-themes, variante dark: de Tailwind,
        ThemeProvider envolviendo el layout raiz, toggle en navbar, fondos
        oscuros slate-900, persistencia en localStorage, preferencia del
        sistema por defecto"

Claras sobre restricciones:

Malo:  "Haz la API rapida"
Bueno: "Agrega cache de Redis al endpoint /api/products con TTL de 5 minutos,
        invalidacion de cache en actualizaciones de productos, y fallback
        a base de datos si Redis no esta disponible"

Explicitas sobre patrones a seguir:

Malo:  "Crea una nueva pagina"
Bueno: "Crea una nueva pagina en /dashboard siguiendo el mismo patron de
        layout que /settings — server component, export de metadata,
        navegacion con breadcrumb y grid responsivo"

La inversion en escribir una descripcion clara se paga sola inmediatamente. Una descripcion de 60 segundos ahorra 60 minutos de implementacion e iteracion.

Ejemplo Real: Modo Oscuro en Una Sesion

Asi se desarrollo el flujo de trabajo AI-first para una implementacion real de modo oscuro en un sitio en produccion:

1. Definir resultado: "Modo oscuro/claro completo en los 19 archivos de
   componentes, con deteccion de preferencia del sistema y toggle manual"

2. Describir a la IA: Especificacion completa incluyendo next-themes,
   variante dark: de Tailwind, paleta de colores, estrategia de persistencia

3. La IA propone: Plan tocando 19 archivos — ThemeProvider, wrapper de layout,
   componente toggle, y variantes dark: para cada componente

4. Revisar: Se ajustaron las elecciones de color para mejor contraste,
   se solicito slate-900 en lugar de gray-900

5. Ejecutar: La IA implementa en los 19 archivos en una pasada

6. Verificar: Probar en navegador, verificar modos claro/oscuro/sistema

7. Resultado: Implementacion completa de modo oscuro en 25 minutos.
   Estimacion manual: 3-4 horas.

Ejemplo Real: Tres Cursos en Una Sesion

La creacion de contenido sigue el mismo flujo de trabajo:

1. Definir resultado: "3 cursos nuevos con contenido completo de lecciones,
   bilingue EN/ES, frontmatter correcto y formato MDX"

2. Describir: Esquemas de cursos, temas de lecciones, profundidad de contenido,
   requisitos de formato, enfoque de traduccion

3. La IA propone: Estructura de archivos, orden de lecciones, taxonomia de tags

4. Revisar: Se ajustaron titulos de lecciones, se reordeno temas para
   mejor progresion de aprendizaje

5. Ejecutar: La IA crea 38 archivos de lecciones con contenido completo

6. Verificar: Revisar frontmatter, calidad de contenido, traducciones

7. Resultado: 3 cursos completos en una sesion.
   Enfoque manual: 2-3 semanas.

Trabaja en Lenguaje Natural Primero

Un cambio sutil pero importante: empieza a pensar en tu trabajo en lenguaje natural antes de pensar en codigo. Cuando recibes un nuevo requisito, tu primer instinto no deberia ser "que archivos necesito cambiar?" sino mas bien "cual es el resultado que necesito describir?"

Esto cambia como abordas los problemas:

  • Enfoque antiguo: "Necesito modificar el modelo User, agregar una migracion, actualizar el manejador de ruta de API, cambiar el formulario del frontend y agregar validacion."
  • Enfoque nuevo: "Los usuarios necesitan poder establecer un nombre para mostrar. Debe aparecer en la barra de navegacion y en su perfil. Validar que sea de 2-50 caracteres, alfanumerico con espacios."

La segunda descripcion es mas corta, mas clara y le da a la IA todo lo que necesita para tomar las decisiones de implementacion correctas. Estas trabajando al nivel de valor para el usuario, no de mecanica de implementacion.

La Ventaja de Velocidad de Iteracion

El flujo de trabajo AI-first no es solo mas rapido en la implementacion inicial. Es dramaticamente mas rapido en la iteracion. Cuando necesitas cambiar algo, describes el cambio:

claude "La pagina de preferencias necesita un boton de reinicio que
       restaure todas las configuraciones a sus valores predeterminados.
       Agregalo debajo del boton de guardar, con un dialogo de
       confirmacion antes de reiniciar."

La IA hace el cambio en todos los archivos relevantes en segundos. En un flujo de trabajo manual, este cambio "pequeno" podria tocar el componente de UI, el endpoint de API, los valores predeterminados de la base de datos y los tests. Cada cambio de archivo requiere cambio de contexto y coordinacion cuidadosa. En el flujo de trabajo AI-first, es una descripcion y un ciclo de ejecucion.

Esta velocidad de iteracion se acumula. A lo largo de un dia de desarrollo, la diferencia entre iteraciones de 5 minutos e iteraciones de 45 minutos es la diferencia entre 12 ciclos de refinamiento y 1 o 2. Y mas iteraciones significa mejor calidad final.