Impulsa tu productividad con IA creando un MVP de finanzas personales en minutos. Con Windsurf, Next.js, componentes ChatCien, íconos Lucid y despliegue en Vercel, se demostró cómo pasar de una idea a producción sin fricciones, usando data moqueada, un flujo guiado por plan mode y ajustes visuales con Open Preview. Además, se habló de créditos, modelos de Anthropic (Opus 4.6) y buenas prácticas para estimar costos.
¿Qué se construyó y por qué importa para tu MVP?
Se desarrolló una app básica de finanzas personales para mostrar el potencial de la IA en desarrollo front-end: rápida, visual y lista para iterar. El enfoque priorizó la experiencia y el aprendizaje: poco código manual, prompts claros y un despliegue inmediato.
¿Qué funciones incluye la app de finanzas personales?
- Lista de transacciones con ingresos y gastos.
- Balance total visible y limpio.
- Formulario para agregar transacción con monto, categoría y fecha.
- Filtros rápidos por tipo de movimiento.
- Data moqueada para avanzar sin backend.
¿Cómo se resolvió el estilo y la interacción?
- Estilo minimalista con emojis grandes (48 px) para identidad visual.
- Componentes ChatCien instalados desde el CLI: button, card, dialog, input, label y select.
- Íconos Lucid para reforzar semántica visual.
- Dark mode con Next Themes y toggle entre modos.
- Ajustes visuales con Open Preview: selección del elemento y corrección por prompt (p.ej., número que salía del contenedor y alturas de botones desalineadas).
¿Qué mejoras se propusieron a futuro?
- Gráficas de tendencias por fecha y categorías.
- Nueva categoría desde la UI: nombre e ícono seleccionables.
- Login y multicuenta para datos por usuario.
- Conectar Supabase: auth, storage y base de datos.
- Importar Excel con gastos existentes para poblar la app.
¿Cómo se usó Windsurf para generar código con IA?
El flujo combinó chat y ejecución guiada. Se eligió Next.js (app router, TypeScript, Tailwind con ChatCien) y se trabajó con modo plan para definir alcance antes de generar. Se resaltó que el plan inicial sugería Next 14, pero el enfoque moderno es app router.
¿Qué aportan plan, ask y code en Windsurf?
- Plan mode: crea un plan editable con stack, UI y tareas. Evita ejecutar a ciegas y da trazabilidad.
- Ask mode: preguntas rápidas sin cambiar archivos.
- Code mode: implementa el plan con checkpoints y comandos.
- Open Preview: corrige UI con selección visual, sin tocar código manualmente.
- Skills: reglas y herramientas persistentes para mantener consistencia (analogía tipo Matrix): el editor “sabe” cómo usar tus librerías y patrones sin reexplicarlos.
- Múltiples conversaciones: puedes abrir otra pestaña sin perder contexto. Cada una muestra su consumo de tokens.
¿Qué modelos y créditos se usaron en la sesión?
- Se recomendó Anthropic Opus 4.6: en Windsurf cuesta 2 créditos por prompt.
- Planes de Windsurf: gratuito con 25 créditos y pro con 500 créditos por 15 dólares.
- Algunos modelos avanzados pueden costar 10–12 créditos por prompt.
- Sugerencia para precios a clientes: mide créditos usados por día y combínalo con tu tarifa por hora para calcular costos.
- Comparativa de editores: con el mismo prompt y modelo, Cursor resultó más costoso que Cloud Code y Windsurf.
¿Cómo fue el flujo técnico dentro del IDE?
- Crear el plan: Next.js + TypeScript + Tailwind + ChatCien + Lucid + data moqueada.
- Implementar en code mode y ejecutar comandos en terminal.
- Decidir sobre React Compiler: no se usó en esta demo.
- Instalar ChatCien y sus componentes desde el CLI.
- Añadir Next Themes para dark/light.
- Correr en desarrollo con bond dev/bone dev (según se mencionó en el flujo).
- Corregir detalles visuales con Open Preview usando prompts en lenguaje natural.
- Agregar nueva categoría y dark mode por prompt.
¿Cómo se desplegó en Vercel y qué sigue?
El despliegue fue directo: GitHub → Vercel en un par de clics, ideal para MVPs. Se renombró el dominio del proyecto y se mostró el autodeploy en cada push a main. El build inicial tardó ~36 s y el segundo, con un pequeño cambio de footer, fue 12 s más rápido.
¿Cuál fue el proceso de deploy concreto?
- Inicializar repo: git init y primer commit.
- Subir a GitHub y verificar archivos.
- En Vercel: importar proyecto, detectar Next.js y desplegar.
- Si hubiese backend/keys: configurar variables de entorno en Vercel.
- Confirmar build exitoso y probar dominio.
- Hacer un cambio mínimo (footer “Hecho con mucho amor…”) y ver autodeploy al push.
¿Qué límites y escalabilidad considerar?
- Vercel es excelente para MVP y proyectos pequeños: rapidez y simplicidad.
- Para mayor escala: podrías necesitar AWS/Azure/DigitalOcean, con más tiempo y experiencia.
- Supabase cubre auth, storage y base de datos: buena pareja para este front.
- Estrategia: a veces conviene front-end primero con data moqueada para validar; en otros casos, el modelo de datos guía el proyecto. Depende del objetivo y del cliente.
¿Qué eventos y recursos se anunciaron?
- Encuentros presenciales: Bogotá 24, Barranquilla 27, y visita previa a Lima 20.
- Reto en Platzi: platzi.com/reto con cursos de Windsurf, Supabase y prompt engineering.
- Posibles créditos de Windsurf para los mejores proyectos y regalos en eventos (camisetas, stickers).
¿Te animas a mejorar este MVP? Comenta qué categoría, gráfica o integración con Supabase agregarías y cómo usarías las skills de Windsurf para mantener la consistencia del proyecto.
