Flujo de Trabajo OpenCode: Cómo Usar Plan Mode y Build Mode para Desarrollar Features
El verdadero poder de OpenCode reside en su flujo de trabajo dual: Plan Mode para diseñar estrategias y Build Mode para ejecutarlas. Este enfoque separa la "pensación" de la "acción", reduciendo errores y permitiendo iteración antes de tocar código.
Este tutorial asume que ya tienes OpenCode instalado y configurado. Si dominas este flujo, podrás escalar a las configuraciones avanzadas para equipos profesionales con AGENTS.md y providers personalizados.
Plan Mode: Diseño sin Consecuencias
El Plan Mode es el espacio seguro donde OpenCode analiza, diseña y propone sin modificar archivos. Actívalo presionando Tab — verás un indicador en la esquina inferior derecha.
Cuándo usar Plan Mode
- Features que afectan múltiples archivos
- Refactors de arquitectura
- Implementaciones donde no estás seguro del enfoque
- Cambios en código crítico que no puedes romper
Estructura de un buen prompt de planificación
Un prompt efectivo incluye contexto, objetivo y restricciones:
Contexto: Tenemos un sistema de notas con soft-delete básico.
Objetivo: Implementar una papelera de reciclaje donde:
- Las notas eliminadas se marcan como 'deleted' en BD
- Nueva pantalla '/trash' que lista notas eliminadas recientemente
- Desde '/trash' se puede restaurar o eliminar permanentemente
Restricciones:
- Usar el mismo patrón de diseño que @src/components/NoteCard.tsx
- Las notas restauradas vuelven a su ubicación original
- Eliminar permanentemente requiere confirmación
💡 Principio: Habla a OpenCode como a un desarrollador junior talentoso pero que no conoce tu proyecto. Contexto abundante = mejores resultados.
Iteración en el Plan
OpenCode generará un plan estructurado. No tienes que aceptarlo al primer intento:
Añadiendo referencias visuales
Puedes arrastrar y soltar imágenes directamente en la terminal:
Quiero que el diseño de la papelera siga este estilo:
[Imagen #1] Captura de pantalla de la UI de Notion
OpenCode escaneará la imagen y adaptará el plan al diseño visual.
Refinando el enfoque
Si el plan inicial no te convence:
El plan está bien pero prefiero que la papelera sea un modal
en lugar de una pantalla separada. También, usa el hook
useNotes de @src/hooks/useNotes.ts para la lógica de datos.
Itera hasta que estés satisfecho con la estrategia.
Build Mode: Ejecución Precisa
Cuando el plan está listo, alterna a Build Mode (Tab de nuevo) y ejecuta:
Perfecto, ejecuta el plan.
OpenCode implementará los cambios paso a paso:
- Modifica archivos con diferencias claras
- Ejecuta comandos (instalaciones, migraciones, etc.)
- Muestra progreso en tiempo real
Monitoreando cambios
Durante la ejecución, OpenCode mostrará:
✓ Creado src/components/TrashModal.tsx
✓ Modificado src/hooks/useNotes.ts (+45 líneas, -12 líneas)
✓ Creado src/app/trash/page.tsx
✗ Error en src/lib/db.ts: columna 'deleted_at' no existe
Los errores se muestran inmediatamente para corrección.
Referencias Contextuales con @
El símbolo @ es tu superpoder para dar contexto preciso:
Implementa el mismo patrón de validación que usamos en
@src/services/AuthService.ts para el nuevo endpoint de notas.
Combinando múltiples referencias
Toma como referencia:
- La estructura de @src/components/UserForm.tsx
- La lógica de API de @src/api/users.ts
- Los estilos de @src/styles/forms.css
Undo y Recuperación
Si algo sale mal, OpenCode permite deshacer cambios:
/undo
Esto revertirá las modificaciones del último prompt. Para ver historial:
/history
Caso Práctico: Feature Real
Vamos a implementar un sistema de búsqueda en un proyecto existente:
Paso 1: Planificación
[Plan Mode ON]
Necesito añadir búsqueda de notas por título y contenido.
Contexto:
- Las notas están en SQLite con campos title, content, created_at
- Usamos React Query para data fetching
- El diseño debe seguir @src/components/NoteList.tsx
Requisitos:
- Barra de búsqueda en el header
- Resultados en tiempo real con debounce de 300ms
- Empty state cuando no hay coincidencias
- Búsqueda case-insensitive
OpenCode propone:
Plan propuesto:
1. Crear hook useNoteSearch en @src/hooks/useNoteSearch.ts
2. Añadir endpoint /api/notes/search en @src/api/notes.ts
3. Crear componente SearchBar siguiendo estilos de NoteList
4. Modificar NoteList para mostrar resultados de búsqueda
5. Tests unitarios para el hook de búsqueda
Paso 2: Iteración
Ajustes:
- El debounce debe ser configurable via props
- Añade loading state con el spinner de @src/components/Spinner.tsx
- La búsqueda debe ser opt-in, no reemplazar la lista por defecto
Paso 3: Ejecución
[Build Mode ON]
Ejecuta el plan ajustado.
Flujos Directos para Cambios Simples
No todo requiere Plan Mode. Para cambios directos:
Añade validación de email al formulario de registro,
usando la misma lógica que en @src/components/LoginForm.tsx
La regla práctica:
| Complejidad | Modo recomendado |
|---|---|
| 1-2 archivos, lógica simple | Build directo |
| 3+ archivos, cambios de UI | Plan → Build |
| Refactor arquitectural | Plan → iterar → Build |
| Código crítico (pagos, auth) | Plan → revisión humana → Build |
Integración con tu Workflow Git
OpenCode respeta tu control de versiones:
Dame un resumen de los cambios para el commit message.
O genera el diff para revisión:
Muéstrame el diff de los archivos modificados.
Errores Comunes y Soluciones
| Error | Causa | Solución |
|---|---|---|
| Plan muy genérico | Falta de contexto | Añade más detalles y referencias @ |
| Cambios inesperados | Modo Build sin plan | Usa Plan primero para features complejos |
| No encuentra archivos | Path incorrecto | Usa @ para búsqueda fuzzy |
| Resultados inconsistentes | Contexto ambiguo | Especifica tecnología y versión |
De Novato a Profesional
El flujo Plan/Build separa a los usuarios casuales de los profesionales. Domina esta técnica y estarás listo para:
- Configurar AGENTS.md personalizados para tu stack tecnológico
- Usar providers alternativos (OpenAI, Anthropic, Ollama local)
- Implementar flujos de equipo con convenciones estandarizadas
En Binary Core, el Plan Mode es obligatorio para cualquier cambio que afecte más de 500 líneas o código financiero crítico. La inversión de 5 minutos en planificación ahorra horas de debugging.
¿Listo para configurar OpenCode como una herramienta de equipo profesional? Continúa con la guía de configuración avanzada.
Binary Core
Equipo Binary Core