OpenCode para diseño.
OpenCode es el agente de codificación con IA de terminal y open-source. Los diseñadores le acoplan skills de diseño y archivos DESIGN.md para generar UI real. Open Design lo convierte en un flujo de trabajo estructurado y open-source — usa tus claves de proveedor y mantén todo en local.
Open Design convierte a OpenCode en un agente de diseño open-source y local-first — cualquier modelo que elijas con tu propia clave de proveedor, tus archivos y una biblioteca curada de skills y sistemas de diseño a su alrededor.
OpenCode es un agente de codificación con IA, open-source y orientado a la terminal, que es deliberadamente agnóstico respecto al modelo: traes tu propia clave de proveedor y ejecutas el modelo que quieras detrás del mismo flujo de trabajo. Esa apertura lo convierte en una base natural para el trabajo de diseño — pero, como todo agente, solo produce buena UI cuando le das las referencias, skills y un bucle de verificación adecuados. Esta es una guía práctica y de extremo a extremo para usar OpenCode en trabajo de UI, frontend y sistemas de diseño, y para integrarlo en un flujo de trabajo de diseño estructurado con Open Design.
Cubre qué es realmente OpenCode, por qué un agente abierto y agnóstico respecto al modelo encaja bien con el diseño, cómo configurarlo desde cero, el bucle de captura a UI, cómo AGENTS.md y MCP lo extienden, cómo se compara con Codex, Claude Code y Cursor, los escollos que hacen que el resultado de la IA parezca genérico y cómo Open Design cierra esa brecha como una capa de diseño abierta y local-first — un emparejamiento natural, ya que ambos proyectos son open-source y se ejecutan en tu propia máquina.
Qué es realmente OpenCode
OpenCode es un agente de codificación con IA open-source construido para la terminal, mantenido por el equipo detrás de SST (Anomaly Innovations). Lee tu repositorio, ejecuta comandos, edita archivos y se comunica con un modelo de lenguaje grande — pero, a diferencia de los agentes atados a un proveedor, no incluye su propio modelo. Lo apuntas a cualquier proveedor y modelo que quieras y traes tu propia clave.
Se ejecuta como una UI de terminal (TUI), con una aplicación de escritorio y extensiones de IDE sobre el mismo motor. Por debajo usa una arquitectura cliente/servidor, así que el agente que hace el trabajo está desacoplado de la superficie desde la que lo controlas. Dos agentes integrados — build y plan — se alternan con la tecla Tab.
- Agnóstico respecto al modelo: Los modelos y proveedores provienen de models.dev, un catálogo abierto. Los configuras en opencode.json con una cadena provider/model-id y puedes deshabilitar los proveedores que no quieras cargar — así el mismo flujo de trabajo de diseño se ejecuta sobre Anthropic, OpenAI, Google, OpenRouter, modelos locales y más.
- Archivo de instrucciones: OpenCode lee un archivo AGENTS.md en tu proyecto (el estándar entre herramientas, también compatible con CLAUDE.md) para las reglas del proyecto — el lugar natural para codificar tus convenciones de diseño. Ejecuta /init para generar uno.
- Extensible: Admite integración con LSP, servidores MCP, temas, atajos de teclado y comandos personalizados, además de enlaces de sesión compartibles para la colaboración.
- Mantenedor: SST / Anomaly Innovations (proyecto open-source)
- Credencial: tu(s) propia(s) clave(s) de API de proveedor de modelos — BYOK, sin atadura a un proveedor
- Licencia: MIT, open source
Por qué un agente abierto y de cualquier modelo encaja con el trabajo de diseño
OpenCode no tiene un único “modelo de diseño” como sí lo tiene un agente de proveedor — y ese es el punto. Como es agnóstico respecto al modelo y abierto, puedes ejecutar el mismo flujo de trabajo de diseño sobre el modelo que actualmente sea mejor en frontend, cambiarlo después o recurrir a un modelo local, todo sin cambiar tu configuración.
Pero la elección del modelo por sí sola no compra gusto. Como todo agente de codificación, OpenCode produce UI genérica a menos que le des restricciones. El buen resultado de diseño proviene de tres insumos que tú aportas.
- Un sistema de diseño: Tokens, primitivas y convenciones reales que el agente reutiliza, para que el resultado coincida con una marca en lugar de recaer en un aspecto genérico.
- Una skill estética: Una skill curada que impone gusto real — movimiento contenido, jerarquía centrada en la marca, como máximo dos tipografías y un color de acento — y hace que el agente se comprometa con una dirección antes de construir.
- Referencias concretas: Imágenes de referencia reales y varios estados (escritorio y móvil, hover, vacío, cargando), no una única toma principal.
La lección: OpenCode te da libertad de modelo, pero el gusto sigue proviniendo de un contexto de diseño curado. Open Design empaqueta exactamente esos insumos, y por eso ambos encajan — los dos son open-source y local-first (más abajo).
Configura OpenCode para trabajo de diseño, desde cero
Este es el camino completo desde una máquina limpia hasta un OpenCode capaz de construir y verificar UI.
# 1. Install OpenCode
curl -fsSL https://opencode.ai/install | bash
# or: npm i -g opencode-ai@latest
# or: brew install sst/tap/opencode
# 2. Start the TUI in your project, then authenticate your provider
opencode # then run /login and pick your provider + paste your key
# 3. Generate project context
opencode # inside your project, run /init to create AGENTS.md
# 4. Pick your model (any provider, via models.dev)
# set "provider/model-id" in opencode.json or switch in the TUI
# 5. Add an MCP server (optional, e.g. for design handoff)
# configure it under the "mcp" key in opencode.json
- Codifica tus reglas de diseño: Coloca tus tokens, primitivas y convenciones en AGENTS.md (o en un DESIGN.md referenciado desde él) para que el resultado coincida con una marca en lugar de recaer en un aspecto genérico. La opción instructions de opencode.json puede apuntar a archivos de reglas adicionales mediante globs.
- Elige un modelo capaz: Como OpenCode es agnóstico respecto al modelo, elige el proveedor/modelo que actualmente sea más fuerte en frontend para la pasada de diseño — y mantén el resto de tu flujo de trabajo sin cambios.
El flujo de trabajo de captura a UI
El bucle de diseño de mayor apalancamiento con cualquier agente es convertir una imagen de referencia en una UI funcional y responsive e iterar hasta que coincida. La misma forma de cinco pasos aplica en OpenCode.
- Parte de las referencias visuales más claras que tengas — e incluye varios estados (escritorio y móvil, hover, vacío, cargando), no solo una única toma principal.
- Sé específico en el prompt; los prompts vagos producen UI genérica.
- Prepara un sistema de diseño e indícale a OpenCode dónde viven los tokens y las primitivas canónicas (en AGENTS.md).
- Ejecuta un servidor de desarrollo y haz que el agente renderice en un navegador real, redimensionando a los breakpoints para comprobar el resultado.
- Itera haciendo que OpenCode compare su implementación con las capturas — no solo que confirme que compila.
Referencia archivos con @ en la TUI para una búsqueda difusa de tu directorio de trabajo, ejecuta comandos de shell en línea con un ! inicial, y dirige las acciones con comandos /. Luego formula el prompt con restricciones concretas:
opencode
# in the TUI:
> @reference-desktop.png @reference-mobile.png
Implement this design in React + Vite + Tailwind + TypeScript.
Reuse my existing design-system components and tokens from AGENTS.md.
Match spacing, layout, and hierarchy; make it responsive.
Run the dev server, open it in a browser, and iterate until the
UI matches the references across breakpoints.Mantén los prompts pequeños y enfocados, confirma las buenas iteraciones y revierte las malas (diciéndole a OpenCode cuándo reviertes), para que cada pasada parta de una base limpia.
AGENTS.md, MCP y sesiones compartibles
Tres puntos de extensión hacen a OpenCode práctico para el trabajo de diseño sostenido, y los tres se mapean limpiamente sobre un flujo de trabajo de diseño abierto.
- Reglas de AGENTS.md: Las reglas del proyecto viven en un AGENTS.md en la raíz del repositorio (o reglas globales en ~/.config/opencode/AGENTS.md). Es el hogar duradero de tus convenciones de diseño, leído en cada ejecución, y es compatible con los archivos CLAUDE.md que usan otros agentes.
- Servidores MCP: OpenCode admite servidores MCP tanto locales (command) como remotos (URL), configurados bajo la clave mcp — la forma portátil de incorporar contexto de diseño y herramientas externas que funcionan en todos los agentes, no solo en OpenCode.
- Sesiones compartibles: El comando /share crea un enlace público a una conversación para colaboración o revisión, y /unshare lo revoca — útil para obtener feedback sobre una pasada de diseño.
Estas son capacidades portátiles y multiagente — exactamente el tipo de cosa que Open Design está hecho para orquestar, en lugar de recrear en cada proyecto.
OpenCode vs Codex vs Claude Code vs Cursor para diseño
No hay un único ganador para el trabajo de diseño — cada agente tiene una fortaleza distinta, y los equipos con experiencia los combinan. Un resumen justo:
| Agente | Fortaleza de diseño | Mejor para |
|---|---|---|
| OpenCode | Open-source y agnóstico respecto al modelo; ejecuta cualquier proveedor detrás de un único flujo de trabajo de terminal | Libertad BYOK, cambio de modelo, configuraciones totalmente abiertas y local-first |
| Codex | Fuerte pulido visual con una skill de frontend; comprensión de imágenes | Async delegado, compilaciones en sandbox, reglas portátiles de AGENTS.md |
| Claude Code | Decisiones de diseño específicas (hex, espaciado, tipografía) y UX consciente de la base de código | Razonamiento de frontend y refactorizaciones de gran contexto |
| Cursor | Bucle visual de construir y ver con vista previa en vivo y ediciones en línea | Trabajo de UI ajustado de iterar y observar dentro de un IDE |
El veredicto recurrente de la comunidad es que el gusto proviene de las personas: todos recaen en una estética genérica sin skills, referencias y restricciones. Ese es el verdadero problema a resolver — y tiene forma de herramienta de diseño, no de modelo, que es precisamente por lo que un agente abierto como OpenCode encaja tan bien con una capa de diseño abierta.
Escollos y cómo evitar el aspecto de “bazofia de IA”
La queja más común sobre el diseño generado por IA es que parece genérico — degradados suaves, paneles flotantes, esquinas redondeadas excesivas, sombras dramáticas, un aire de Inter-y-morado que “grita que esto lo hizo una IA”. Otros problemas reportados incluyen diseños móviles rotos e instrucciones que se filtran en el texto de la UI. Ninguno de estos es exclusivo de OpenCode; son lo que ocurre cuando cualquier agente se ejecuta sin un contexto de diseño curado.
- Añade una skill estética: Una skill de diseño curada obliga al agente a comprometerse con una dirección real en lugar del aspecto por defecto.
- Verifica en un navegador real: Renderiza y autoverifica en distintos breakpoints para que los diseños no se rompan en silencio en móvil.
- Aporta tokens y referencias: Los tokens de diseño reales y las capturas de referencia son la mayor palanca sobre la calidad del resultado.
- Codifica reglas en AGENTS.md: Pon reglas de estilo como “sin tarjetas hero, máximo dos tipografías, jerarquía centrada en la marca” donde el agente las lea en cada ejecución.
Observa que cada mitigación consiste en dar al agente un contexto de diseño curado — sin importar qué modelo ejecutes. Mantener ese contexto a mano, proyecto a proyecto, es el trabajo pesado que Open Design elimina.
Diseñar con OpenCode dentro de Open Design
Open Design es la capa de diseño open-source que el flujo de trabajo anterior no deja de pedir. Trata a OpenCode como un adaptador de primera parte y lo envuelve en una biblioteca curada de skills y sistemas de diseño, una canalización de render estructurada y una UI de escritorio local — para que el contexto de diseño que hace bueno a cualquier agente esté ahí desde la primera ejecución, no se ensamble a mano cada vez. Ambos proyectos son open-source y local-first, lo que hace que el emparejamiento sea un encaje natural.
- Instala Open Design y selecciona OpenCode como tu agente.
- Autentícate con tu propia clave de API de proveedor de modelos (BYOK) — las credenciales permanecen en tu máquina y nunca pasan por nuestros servidores.
- Elige cualquier proveedor y modelo, además de un sistema de diseño y una skill, y luego genera presentaciones, prototipos y landing pages con un gusto consistente.
- Cada artefacto y archivo DESIGN.md vive en tu propio repositorio, no en una nube alojada.
El mismo agente OpenCode, la misma libertad de modelo — más un flujo de trabajo de diseño real, portátil y open-source a su alrededor. Es local-first y Apache-2.0, así que nada de tu trabajo ni de tus credenciales sale de tu máquina.
Preguntas frecuentes
-
01 ¿Puede OpenCode realmente hacer trabajo de diseño?
Sí — con una skill estética, un sistema de diseño e imágenes de referencia reales en contexto, OpenCode produce UI responsive de calidad de producción y puede verificarla en un navegador. Como es agnóstico respecto al modelo, ejecutas el modelo que actualmente sea mejor en frontend. Sin ese contexto curado tiende a recaer en un aspecto genérico, que es la brecha que Open Design cubre.
-
02 ¿Qué modelo debería usar con OpenCode para diseño?
El que prefieras — OpenCode es agnóstico respecto al proveedor a través de models.dev, así que puedes ejecutar Anthropic, OpenAI, Google, OpenRouter o modelos locales detrás del mismo flujo de trabajo y cambiar en cualquier momento. La calidad del resultado de diseño depende mucho más de tu skill, tu sistema de diseño y tus referencias que del modelo por sí solo.
-
03 ¿Open Design está hecho por el equipo de OpenCode (SST)?
No. Open Design es un proyecto open-source independiente que integra a OpenCode como agente. Complementa a OpenCode con una biblioteca de skills y sistemas de diseño abierta y local-first.
-
04 ¿Necesito una suscripción especial para diseñar con OpenCode?
No — OpenCode es BYOK. Traes tu propia clave de API de proveedor de modelos, y Open Design nunca actúa como proxy de tus credenciales. No hay atadura a un proveedor.
-
05 ¿OpenCode, Codex o Claude Code para diseño de frontend?
Todos son fuertes, y muchos equipos los combinan. La ventaja de OpenCode es ser totalmente open-source y agnóstico respecto al modelo; Codex destaca en compilaciones delegadas en sandbox; Claude Code es conocido por decisiones de diseño específicas y conscientes de la base de código. Open Design te permite cambiar de agente sin cambiar tu flujo de trabajo de diseño.
-
06 ¿Cómo extiendo OpenCode para el contexto de diseño?
Codifica reglas en AGENTS.md, añade servidores MCP bajo la clave mcp para herramientas portátiles y contexto de diseño, y usa sesiones compartibles para la revisión. Open Design incluye una biblioteca curada de skills y sistemas de diseño para que te saltes la configuración por proyecto.
-
07 ¿Está Open Design afiliado a OpenCode o SST?
No. OpenCode es un proyecto open-source mantenido por SST (Anomaly Innovations); Open Design es un proyecto open-source independiente que lo soporta como adaptador de primera parte.
-
08 ¿Están seguros mis archivos y credenciales?
Sí — Open Design es local-first. Tus archivos, artefactos y DESIGN.md permanecen en tu propio repositorio, y tus credenciales de proveedor de modelos las usa directamente tu agente, sin enrutarse nunca a través de los servidores de Open Design.
Diseña con OpenCode, a la manera abierta.
Usa tu propia clave de proveedor de modelos, mantén cada archivo en local y obtén una biblioteca de diseño curada alrededor del agente abierto que ya usas.