Vibe coding con OpenCode.ai: cómo empezar gratis

En el último directo en YouTube usamos Cursor para hacer vibe coding y algunas personas del chat me preguntaron si estaba usando una cuenta de pago. Les respondí que sí. Llevamos semanas usando Google Antigravity para desarrollar los diseños que hacemos con la Comunidad UX fomo, así que la pregunta no me sorprendió.

Antigravity es «gratis» hasta que llegas al final de los créditos que te dan o de los que tienes asociados a tu cuenta de Google Workspace, pero lo puedes usar bastante más que Cursor.

Ok, lo pillo…

Al mismo tiempo, llevo semanas viendo hilos en X y vídeos de YouTube sobre OpenCode.ai, el agente de codificación de IA de código abierto del que se está hablando por todos lados.

Y entonces me senté en la máquina que tengo para hacer pruebas…

Qué es OpenCode.ai?

OpenCode es una app pensada para trabajar con agentes y modelos de lenguaje desde un entorno de escritorio. Puedes usarla vía terminal, con consola, pero también tiene una aplicación nativa (ahora mismo en fase beta) que te permite empezar gratis, sin meter tarjeta, usando su modelo Big Pickle.

Ojito, OpenCode no va de “hazme una app mágica”. Va de sentarte, pensar, decidir y usar la IA como compañero de trabajo.

Vibe coding del bueno.

Cómo instalar OpenCode?

El proceso es bastante directo. Lee todos los pasos, incluyendo el final de este bloque.

• Entras en la web de www.opencode.ai y vas a la sección de descarga.
• Descargas el instalador para tu sistema operativo. Hay versión para macOS, Windows y Linux.
• Instalas la app como cualquier otra aplicación nativa: abrir instalador, aceptar permisos y lanzar.
• Tendrás que crear una cuenta o iniciar sesión. No hace falta pagar nada para empezar a usar el plan gratuito. Para crear la cuenta entra en el apartado Zen, lo tienes en el menú principal de la web.

Listo, ya puedes empezar a hacer vibe coding con Big Pickle.

Cómo hacer vibe coding con OpenCode?

Una vez dentro de la app, el flujo es muy natural.

Creas un proyecto o workspace nuevo. Puedes empezar desde cero o desde un prompt.

El modelo Big Pickle viene disponible por defecto y, como dije, es gratuito. No hay que configurar nada especial para usarlo.

Lo decimos mil veces: aquí es donde tiene sentido escribir un prompt bien pensado.

Para probar OpenCode me propuse montar la típica aplicación de notas en React con Tailwind.

La app utiliza localStorage como sistema de persistencia durante la fase de diseño y validación, pero está pensada desde el inicio para poder conectarse posteriormente a Supabase, con autenticación mediante Google, sin necesidad de rehacer la arquitectura ni la interfaz.

No es un prompt gigante, pero está bien estructurado. Te lo dejo aquí debajo:

Actúa como un designer engineer senior especializado en React, Tailwind CSS y arquitectura preparada para Supabase.

Quiero crear una aplicación web pequeña para guardar notas, con foco inicial en diseño y funcionalidad local, pero preparada desde la base para escalar a producción.

OBJETIVO DE LA APP
Una app de notas donde el usuario pueda:

* Crear notas con título y texto
* Editar notas existentes
* Borrar notas
* Persistir los datos en localStorage durante la fase de diseño y validación

Más adelante, sin rehacer la app, deberá poder conectarse a:

* Supabase como base de datos
* Autenticación con Google vía Supabase Auth

REQUISITOS TÉCNICOS OBLIGATORIOS

* Framework: React
* Estilos: Tailwind CSS
* Uso de tokens de Tailwind (spacing, colores, tipografía)
* Colores: paleta neutral de Tailwind (grises, sin colores de marca)
* Tamaño base de texto de la app: 18px
* Componentes UI basados en Catalyst
* Estado y lógica inicial usando localStorage
* Código organizado para que la capa de persistencia pueda sustituirse fácilmente por Supabase

ENFOQUE DE ARQUITECTURA
Diseña la app con una separación clara de capas:

* UI y componentes
* Lógica de estado
* Capa de persistencia (localStorage ahora, Supabase después)

La capa de persistencia debe estar abstraída (por ejemplo, mediante un servicio o hook), de forma que:

* Hoy use localStorage
* Mañana pueda usar Supabase sin tocar la UI

ESTRUCTURA FUNCIONAL MÍNIMA
La app debe incluir:

* Vista principal con listado de notas
* Botón para crear nueva nota
* Vista o modal para editar una nota
* Acción clara para borrar
* Estados vacíos bien tratados
* Feedback visual mínimo (hover, focus, disabled)

PREPARACIÓN PARA SUPABASE (SIN CONECTAR TODAVÍA)
Deja preparado en el código:

* Un servicio de datos con funciones tipo:

  * getNotes()
  * createNote()
  * updateNote()
  * deleteNote()
* Comentarios claros indicando:

  * Qué partes cambiarán al usar Supabase
  * Dónde entrará la autenticación con Google
* Estructura pensada para trabajar con:

  * user_id
  * timestamps
  * control de acceso por usuario

No conectes todavía Supabase, pero diseña como si fuera a entrar mañana.

DISEÑO Y UX

* UI simple, clara, sin ruido
* Jerarquía visual evidente
* Tipografía legible con base 18px
* Uso correcto de spacing y ritmo vertical
* Componentes Catalyst bien integrados
* Diseño funcional antes que decorativo

ENTREGABLE
Genera:

* Estructura de carpetas
* Componentes principales
* Lógica de estado
* Ejemplo completo funcionando con localStorage
* Comentarios claros orientados a iterar diseño y pasar a Supabase más adelante

No generes documentación extensa fuera del código.
Prioriza claridad, criterio y código fácil de evolucionar.

Una vez metido el prompt, el modelo empieza a trabajar escribiendo: estructura, arquitectura, componentes, decisiones de UX, ajustes finos. Conversación y código, ida y vuelta constante.

Se tiró un buen rato, pero lo completó todo en varios minutos.

Podría seguir iterando con OpenCode, pero lo que hice fue cerrarlo y abrir el proyecto con Google Antigravity.

Arrancó sin ningún problema.

Lo único que hice con Antigravity fue darle más cariño al README.md y subirlo a GitHub. Lo puse como privado, pero si lo quieres ver, dímelo y te doy acceso.

Aquí te he contado uno de los usos de OpenCode, pero es mucho más que esto.

Si eres UX o Product Designer, recuerda que con el modelo gratuito Big Pickle puedes prototipar producto real, diseñar bien desde el principio y dejar la arquitectura lista para crecer, sin montar nada provisional que luego tengas que rehacer.

Yo seguiré usándolo con la gente de UX fomo, combinando mis sesiones de vibe coding con Cursor y Google Antigravity.