Open Design — un primer vistazo honesto (errores, soluciones y configuración con cualquier modelo)

Esta guía es una primera mirada deliberadamente honesta a Open Design: lo que funciona sin más y las asperezas con las que te toparás, mostradas en vivo en lugar de recortadas. También cubre un truco realmente útil: conectar cualquier modelo de forma económica a través de un proveedor compatible con OpenAI. Sigue la prueba práctica que Sasha (ИИШНЫЙ) graba en su recorrido, adaptada para esta guía escrita y actualizada con la versión actual. Mira el video de arriba para ver la ejecución en vivo, o sigue leyendo para la versión escrita.

El espacio de trabajo de Open Design: describe lo que quieres construir, elige un modo y tu agent hace el resto.

¿Qué es Open Design?

Open Design es una plataforma de diseño de código abierto y local-first, una alternativa agent-native a Claude Design. El problema de la «papilla púrpura de la IA» (que toda interfaz generada se vea igual) es justo lo que herramientas como esta intentan resolver, y la respuesta de Open Design es funcionar sobre el agent de programación que ya usas en lugar de lanzar su propio modelo. Detecta Claude Code, Codex, Cursor, Gemini, OpenCode y más en tu máquina y lo usa como motor. El planteamiento de Sasha: reunió decenas de miles de estrellas en GitHub en su primera semana porque es gratuito, abierto y no está atado a un solo proveedor.

• Código abierto, Apache-2.0: clónalo, léelo, autohospédalo.
• Funciona en local: tus proyectos son carpetas en tu propia máquina.
• Cualquier agent, cualquier modelo: incluida tu propia API key mediante cualquier proveedor compatible con OpenAI.
• Una amplia biblioteca de habilidades de diseño y sistemas de diseño integrada.
• Más que prototipos: presentaciones, imágenes e incluso video.

Paso 1 — Instalar y configurar

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run web

Abre la URL local que imprime (un puerto dinámico: no lo fijes en el código). ¿Prefieres cero configuración? Consigue la aplicación de escritorio en open-design.ai/download. En el primer arranque, la página de ajustes detecta las CLI de agent en tu máquina —Sasha usa Codex— y te deja establecer un modelo por defecto, añadir proveedores de medios (MiniMax, OpenAI GPT Image y más), conectar fuentes de datos, cambiar de idioma y elegir un tema.

Paso 2 — Usa cualquier modelo a través de un proveedor compatible con OpenAI

Esta es la perla más útil de la reseña de Sasha. Más allá de las CLI detectadas, Open Design te permite traer tu propia key para cualquier API compatible con OpenAI, lo que significa que puedes enrutar a través de un agregador como OpenRouter y usar casi cualquier modelo, a menudo más barato:

1. En tu proveedor, crea una API key y cópiala.
2. En los ajustes de Open Design, elige el tipo de proveedor OpenAI (OpenRouter y agregadores similares hablan la API de OpenAI).
3. Pega la key y, fundamental, cambia la base URL al endpoint de tu proveedor (p. ej., la base URL de OpenRouter), luego elige el modelo que quieras.
4. Guarda: la generación ahora se enruta a través de ese proveedor.

Un escollo con el que se topa Sasha: la selección de modelo cambia de forma global, no por proyecto, así que si la generación de medios se rompe tras el cambio, es porque el proveedor de imágenes siguió al cambio de modelo. Define las keys de tus proveedores de medios de forma explícita.

Paso 3 — Construye un prototipo (con asperezas y todo)

Crea un proyecto, escribe tu brief, elige alta fidelidad y envía. Open Design ejecuta primero un formulario de descubrimiento —adapta las preguntas a tu prompt (plataforma objetivo, para quién es, tono, animación, restricciones)—, luego un selector de dirección visual (tipografía + paleta) y después construye. La salida es un prototipo vivo e interactivo con controles integrados: la app generada por Sasha te permite alternar las animaciones y cambiar el color de acento directamente en la página.

Un prototipo real generado, renderizado en la vista previa: una landing de agencia oscura y cinematográfica.

Advertencias honestas que Sasha muestra frente a la cámara (y cómo manejarlas):

• Puede elegir por defecto la habilidad equivocada. Si empieza a construir un «checkpoint/blog» cuando querías una app móvil, díselo explícitamente: «usa la habilidad mobile-app / front-end». Define la habilidad antes de generar.
• Inspect necesita etiquetas data-oid. La herramienta Inspect del lienzo necesita que el artefacto esté etiquetado; si dice que no puede seleccionar elementos, pídele al agent que «reconstruya el prototipo con etiquetas data-oid» y luego recarga.
• Es joven y publica rápido. Espera fallos ocasionales (la navegación que desaparece tras una edición, etc.): el proyecto se actualiza casi a diario, así que vuelve a hacer pull con frecuencia.

Paso 4 — Las herramientas sobre el lienzo (el verdadero atractivo)

Una vez etiquetado, el ciclo de edición es lo más destacado. Inspect te permite pasar el cursor sobre cualquier elemento y ajustar color, tamaño y estilo directamente. Edit te permite reescribir texto en línea (sin idas y vueltas al chat para cambiar una sola palabra). Comment/picker te permite seleccionar un área, dibujar y enviar una nota al agent («convierte este menú en un carrusel con desplazamiento y barra de progreso»). Es ese ciclo de retroalimentación rápido y visual que resulta incómodo de reproducir con un agent simple en una terminal.

El hub de plugins: explora el registro, importa plugins y prepáralos para tu equipo.

Cuando termines, Share exporta a PDF, PPTX, HTML independiente o markdown, o despliega en Vercel con un clic. El veredicto honesto de Sasha: para presentaciones y páginas de captación de leads ya es un práctico mini constructor; para prototipado de apps/sitios complejos, espera una iteración real. Dado que solo tiene una semana y se actualiza constantemente, los cimientos son sólidos.

Consejos

• Conecta OpenRouter (o cualquier proveedor compatible con OpenAI) para usar modelos más baratos o distintos: recuerda cambiar la base URL.
• Define la habilidad explícitamente antes de generar para que no elija por defecto la plantilla equivocada.
• Pide etiquetas data-oid si Inspect no puede seleccionar elementos, y luego recarga.
• Apóyate en Inspect/Edit/Comment para ajustes visuales rápidos en lugar de volver a hacer prompt en el chat.
• Vuelve a hacer pull con frecuencia: el proyecto publica correcciones casi a diario.

Preguntas frecuentes

¿Puedo usar un modelo distinto de Claude y pagar menos? Sí. Apunta Open Design a cualquier CLI detectada, o trae tu propia key para cualquier proveedor compatible con OpenAI (p. ej., OpenRouter) configurando la key y la base URL: eso abre casi cualquier modelo.

Inspect/edit no selecciona elementos, ¿por qué? El artefacto necesita etiquetas data-oid. Pídele al agent que reconstruya el prototipo con ellas y luego recarga la vista previa.

¿Está listo para producción? Es temprano y está iterando rápido. Ya es estupendo para decks y páginas de captación de leads; para apps complejas, trata la salida como un borrador sólido que vas refinando.

¿Es gratis? La app es de código abierto bajo Apache-2.0 y gratuita para ejecutarse en local. Solo pagas por el uso de modelo y de medios del agent y proveedor que conectes.

---

Esta guía escrita se basa en la reseña práctica de Sasha (ИИШНЫЙ). Mira el video completo de arriba y suscríbete a ИИШНЫЙ para más pruebas honestas y sin editar de herramientas de IA.