🏃 Construyendo una app de Running

En esta clase vamos a poner OpenCode a trabajar sobre un caso real.

El objetivo será generar un dashboard de analíticas de running a partir de un único prompt y observar cómo distintos modelos afrontan exactamente la misma tarea.

Además, veremos cómo interpretar el proceso de razonamiento, cómo comparar resultados y cómo analizar el coste real de ejecución.

🚀 Creando una aplicación desde un prompt

Para acelerar el proceso, el proyecto se genera utilizando únicamente:

• HTML
• CSS
• JavaScript

La decisión no se toma por limitaciones técnicas, sino por velocidad.

Al evitar dependencias, frameworks e instalaciones adicionales, el agente puede centrarse directamente en generar la aplicación y obtener resultados mucho más rápido.

La idea principal es comprobar cómo trabaja el modelo y qué es capaz de construir con instrucciones relativamente simples.

🧠 Observando el proceso de pensamiento

Mientras OpenCode trabaja, es posible visualizar el razonamiento que sigue el modelo.

Existe un comando para ocultarlo:

/thinking

Sin embargo, mantenerlo visible suele ser una buena práctica.

Las ventajas son claras:

• Saber si el modelo sigue trabajando
• Detectar bloqueos o errores
• Entender qué decisiones está tomando
• Tener feedback continuo durante la ejecución

Cuando el modelo termina, la respuesta final aparece automáticamente.

📂 Cómo se generan los archivos

Durante la ejecución pueden ocurrir diferentes estrategias dependiendo del modelo utilizado.

Algunos modelos:

• Piensan toda la solución antes de escribir archivos
• Generan todos los ficheros al final
• Consumen más tiempo analizando

Otros modelos:

• Crean archivos progresivamente
• Van completando tareas paso a paso
• Permiten ver resultados antes

Por ejemplo, durante la generación del dashboard se crean elementos como:

• index.html
• estilos CSS
• lógica JavaScript
• incluso un servidor básico en Node.js

Todo ello generado automáticamente por el agente.

🔄 Comparando varios modelos al mismo tiempo

Una característica muy útil es que OpenCode permite abrir varias sesiones simultáneas.

Esto hace posible comparar cómo diferentes modelos resuelven exactamente la misma tarea.

Para reutilizar un prompt anterior no es necesario copiarlo nuevamente.

Desde el cuadro de entrada puedes navegar por el historial utilizando:

↑ Flecha arriba

Esto recupera mensajes enviados anteriormente y facilita repetir pruebas con distintos modelos.

📋 Los modelos que trabajan mediante tareas

Durante la demostración se observa una diferencia importante entre modelos.

Algunos generan una lista de tareas internas antes de empezar:

• Crear el proyecto
• Generar package.json
• Construir index.html
• Crear estilos
• Implementar interactividad
• Validar el resultado

Este enfoque suele ofrecer varias ventajas:

• Mejor organización
• Menos bloqueos
• Mayor control del progreso
• Resultados más consistentes

Dividir el problema en tareas pequeñas suele funcionar mejor que intentar resolver todo de una sola vez.

💰 Entendiendo el coste real

OpenCode muestra de forma transparente cuánto cuesta cada ejecución.

Durante la creación del dashboard aparecen costes como:

• 4 céntimos de dólar
• 6 céntimos de dólar
• 10 céntimos de dólar
• 13 céntimos de dólar

Estos valores representan el coste real de los modelos utilizados.

Sin embargo, es importante entender que no equivalen directamente al precio de la suscripción.

🎁 El concepto de subsidio

Una de las ventajas explicadas en la clase es que la suscripción ofrece mucho más valor computacional del que realmente cuesta.

Por ejemplo:

• El usuario paga una cuota fija
• Los modelos consumen un valor superior
• OpenCode absorbe parte de ese coste gracias a acuerdos con proveedores

Por tanto:

El coste mostrado representa el valor consumido por los modelos, no el saldo restante de tu suscripción.

🏃 El resultado: un dashboard funcional

Tras finalizar la generación, OpenCode crea un dashboard de running completamente funcional.

La aplicación incluye elementos como:

• Métricas deportivas
• Estadísticas de actividad
• Gráficas
• Diseño responsive
• Diferentes tipos de entrenamiento

Entre ellos:

• Easy
• Tempo
• Long Run
• Interval

Aunque los datos utilizados son ficticios, el resultado demuestra que el agente puede construir una interfaz completa a partir de una simple descripción.

⚖️ Comparando estrategias de resolución

Durante la prueba se observa una diferencia clara entre los modelos evaluados.

Un modelo:

• Divide el problema en tareas
• Genera archivos progresivamente
• Finaliza antes
• Consume menos recursos

Mientras que otro:

• Dedica más tiempo al razonamiento
• Acumula más contexto
• Puede quedarse bloqueado
• Tarda más en completar la tarea

La conclusión es que la estrategia de ejecución puede ser tan importante como la capacidad del modelo.

🤖 Próximo paso: agentes y skills

Una vez comprendido cómo generar aplicaciones completas con OpenCode, el siguiente paso será profundizar en características más avanzadas.

Entre ellas:

• Agents
• Agent Skills
• Automatización de tareas complejas
• División inteligente del trabajo

Estas herramientas permiten llevar la generación de proyectos mucho más lejos y aprovechar todo el potencial de OpenCode.

📌 Ideas clave de esta clase

Quédate con estos conceptos:

• OpenCode puede generar aplicaciones completas desde un único prompt
• Es posible visualizar el razonamiento del modelo
• Cada modelo sigue estrategias diferentes
• Algunos trabajan mediante listas de tareas internas
• Puedes ejecutar varias sesiones simultáneamente
• El historial permite reutilizar prompts fácilmente
• OpenCode muestra el coste real de cada ejecución
• El coste mostrado no equivale al precio de la suscripción
• Los dashboards y prototipos pueden generarse en pocos minutos
• La estrategia del modelo influye directamente en los resultados

🚀 Lo siguiente: Agents y Agent Skills

Ya has visto cómo OpenCode puede construir una aplicación completa prácticamente desde cero.

Ahora es momento de descubrir cómo funcionan los agentes especializados, cómo dividir tareas complejas y cómo sacar todavía más partido a la automatización mediante Agent Skills.

---

💡 Tip: Cuando compares modelos, no te fijes únicamente en la velocidad. Observa también cómo organizan las tareas, cuánto contexto consumen y la calidad del resultado final.