Site Logo
Published on

Cómo construí una app en 10 días con IA, especificaciones y diseño técnico

Authors

“No estás usando mal la IA. Estás subestimando lo que realmente puede hacer.”

En este artículo quiero mostrarte cómo fue el proceso de desarrollo de Walletfy, una app de control de gastos personales construida en tan solo 10 días de trabajo intensivo.

🧠 ¿Qué es Walletfy?

Es una app moderna de finanzas personales. En ella, cada mes podés cargar ingresos, gastos, categorías, y ver tus movimientos mes a mes en una UI limpia y clara. También permite visualizar gráficos de evolución, detalles de cada movimiento y agruparlos por categoría.

⚙️ El stack técnico

  • Frontend: Next.js 14 + TypeScript + TailwindCSS + ShadCN (Radix UI)
  • Backend: Next.js (Node.js, App Router, Server Actions)
  • Base de datos: Supabase (PostgreSQL adaptable)
  • Auth: Supabase + Google OAuth provider
  • Gráficos: Chart.js
  • Diseño UX: Figma (aunque podría automatizarse con IA)
  • AI Assistants: Claude 4 (Opus & Code) + SubAgentes
  • Deploy: Vercel
  • Monitoreo y analítica: Sentry + Vercel Analytics

👉 Proyecto online: https://walletfy.app
📎 Otros posts y proyectos: https://sandyveliz.vercel.app

🛠️ Metodología: Especificación y diseño técnico primero

Antes de escribir una sola línea de código, utilicé el concepto de "Especificaciones contextuales" (o Spec Programming). Cada funcionalidad fue documentada, analizada y descompuesta en tareas pequeñas, dejando a los agentes AI ejecutar la mayor parte del código basado en esos specs.

Todo el proyecto fue llevado desde diseño → specs → implementación → testing → documentación, siguiendo este flujo:

  1. Diseño de experiencia e interfaz en Figma
  2. Especificaciones detalladas por feature
  3. Arquitectura de carpetas, diseño de base de datos y endpoints REST
  4. Generación de código usando Claude Code + revisión manual
  5. Testing funcional con QA manual
  6. Documentación final y UI deploy

🤖 Uso de agentes

Los agentes son piezas de software que actúan, no solo responden. En Walletfy usé agentes para:

  • Crear estructuras de carpetas del frontend y backend
  • Generar modelos de datos y relaciones
  • Automatizar documentación de endpoints
  • Migraciones de base de datos
  • Crear documentación técnica

Agentes utilizados (sub agentes de Claude Code):

agents/
├── angular-firebase-developer.md
├── devops-deployment-specialist.md
├── documentation-maintainer.md
├── qa-test-strategist.md
├── software-architect.md
└── technical-coordinator.md

Todos estos agentes fueron creados con instrucciones específicas utilizando la estructura de SubAgentes.

🎨 Diseño UX: ¿Figma o IA?

En este caso decidí diseñar la UI en Figma, por gusto personal y experiencia previa. Aunque también podría automatizar esta parte con IA, disfruto ese proceso visual y detallado. Además, guardé cada pantalla como imagen, referenciada desde los specs para que los agentes comprendan mejor cada flujo visual.

👨‍💻 ¿Qué rol cumplo en este proyecto?

Hoy mi rol está más cerca de un Technical PM mas que de un developer puro. Superviso el proceso completo:

  • Diseño del producto
  • Arquitectura del sistema
  • Infraestructura y ambientes
  • QA y testing
  • Coordinación de tareas y flujos

Actúo como nexo entre visión, ejecución y tecnología. Aunque sigo programando y resolviendo trabas técnicas, la mayor parte del tiempo estoy supervisando el proceso.

✨ Cómo trabajo hoy con IA: un equipo completo a disposición

Aunque Walletfy fue construido por una sola persona (yo), la realidad es que trabajé como si tuviera un equipo completo a mi disposición. ¿La clave? Usar IA no solo como una herramienta, sino como una estructura organizada de roles, flujos y responsabilidades. Hoy, mi rol es más parecido a un Project Manager / Product Owner que a un desarrollador “puro”.

🛠️ Mi workflow actual con IA:

Creación de issues Todo arranca conversando con la IA principal (mi "main thread"). Le describo el problema, bug o nueva feature. Luego, usando un servidor MCP configurado, esta IA crea el issue automáticamente en GitHub. Esto se hace en una ejecución paralela para no interrumpir los subagentes que ya están trabajando.

Planificación con SubAgentes

Cada subagente tiene su especialidad: desarrollo, arquitectura, documentación, QA, etc. Para cada issue:

Se genera documentación o especificación técnica si es un feature nuevo o enhancement.

Luego, el subagente “dev” empieza a escribir el código basado en esa spec.

QA & Cierre

Una vez finalizada la implementación:

Se actualiza la documentación.

El subagente de QA genera los tests automatizados correspondientes.

Finalmente, se cierra el ticket.

🧠 Memoria a corto y largo plazo

Una parte fundamental de este flujo es cómo manejo el contexto:

  • El main thread (la conversación central con Claude) actúa como memoria de corto plazo. Ahí se coordina, se crean issues y se monitorea el progreso.
  • Las especificaciones (specs) y la documentación generada funcionan como memoria de largo plazo, permitiendo que los subagentes trabajen con información precisa sin cargar el contexto innecesariamente.

Una vez que una tarea se completa, limpio el main thread y continúo con la siguiente, así:

  • Evito acumulación innecesaria de tokens (más contexto = más latencia y más costo).
  • Mantengo las conversaciones enfocadas y livianas.
  • Garantizo que cada tarea tenga su propio scope, sin "arrastrar" ruido de tickets anteriores.

Claude Opus 4, por ejemplo, tiene un límite de uso. Si lo superás, pasás automáticamente a Sonnet 4, que es bueno pero menos preciso para tareas complejas de código. Por eso optimizar contexto es clave para rendimiento y estabilidad.

🧨 ¿Todo es perfecto? Calro que no.

Aunque este flujo acelera muchísimo el desarrollo, tiene sus desafíos:

  • Si no somos claros y concisos en los specs, el modelo puede:

    • Generar código innecesario
    • Confundirse de objetivo
    • Derrochar tokens con pruebas que no van al punto

  • Si una tarea no sale después de 3 intentos, el problema no suele ser la IA — el problema es que no fuimos lo suficientemente claros.

  • La solución es tratar a la IA como trataríamos a un equipo real:

    • Proporcionar contexto completo
    • Dividir tareas
    • Revisar avances regularmente

📐 ¿Cómo mejoré esto?

Para evitar ambigüedades:

  • Documenté cada pantalla con su correspondiente diseño en Figma
  • Guardé capturas e imágenes en carpetas referenciadas desde la documentación
  • Especifico cada flujo con entradas, salidas, casos límite y pasos esperados

Así, cuando un agente toma una tarea, sabe exactamente qué hacer, cómo debe verse y qué validar.

🧪 Próximas features

  • Soporte PWA (instalable, offline-ready)
  • Notificaciones (push web)
  • Integración con otras APIs de finanzas
  • Mejoras en la UI/UX (animaciones, transiciones)
  • Más estadísticas y gráficos avanzados
  • Mejoras en la seguridad (encriptación de datos sensibles)
  • Integración con más proveedores de pago (Stripe, PayPal, etc.)
  • Mejora de la experiencia de onboarding para nuevos usuarios

🚀 El resultado

En solo 10 días:

  • App funcional moderna
  • Multi idioma
  • Frontend y Backend conectado y deployado
  • Base de datos PostgreSQL con relaciones
  • UI/UX diseñada y documentada
  • Gráficos y filtros funcionales
  • Auth integrada
  • Integración con MercadoPago
  • Documentación técnica completa
  • Testing manual + errores monitoreados
  • Deploy en Vercel

📌 Reflexión final

La combinación de herramientas modernas (Next.js, Supabase, Tailwind) con un flujo de desarrollo impulsado por IA cambió completamente mi productividad.

Pero más allá de Claude o Walletfy, este proyecto demuestra que:

  • Si sabés darle buen contexto a la IA, podés convertirla en un copiloto real.
  • La modularidad y planeamiento previo son clave para trabajar bien con agentes.
  • No se trata solo de escribir código más rápido, sino de diseñar mejor y construir con propósito.

La diferencia está en cómo pensás el desarrollo. Y eso, sigue siendo 100% humano.