Open Design frente a Figma y Claude Design — Un recorrido completo

Esta guía es un recorrido completo por Open Design planteado en torno a una sola pregunta: ¿qué lugar ocupa un espacio de trabajo de diseño agent-native junto a Figma y Claude Design? Instala la aplicación, configura un agente, trabaja con los sistemas de diseño integrados, construye una landing page real de principio a fin, itera con las herramientas sobre el lienzo y exporta el resultado. Sigue el camino que tomó Anton Larichev (PurpleSchool) en su recorrido práctico, reescrito y actualizado con la versión actual. Mira el vídeo de arriba para ver la ejecución en vivo, o sigue leyendo para la versión escrita.

El espacio de trabajo de Open Design — prototipos, presentaciones, imágenes y vídeo en un lienzo único, sereno y familiar.

¿Qué es Open Design?

Open Design es una plataforma de diseño de código abierto y local-first que funciona sobre el agente de programación que ya usas. En lugar de estar atado a un único modelo, detecta los CLIs que ya tienes en tu máquina — Claude Code, Codex, Cursor, Gemini, Copilot, OpenCode y un par de docenas más — y deja que ese agente impulse la generación. La descripción de Anton es exacta: en la superficie se parece mucho a Claude Design, pero por dentro es “solo una interfaz adicional que impulsa los mismos agentes que ya tienes instalados”. No pagas una segunda suscripción encima de tu plan de programación.

Lo que lo hace digno de una mirada seria:

• Código abierto, Apache-2.0 — clónalo, alójalo tú mismo, úsalo en trabajos para clientes.
• Funciona en local — nada se sube; tus proyectos viven en carpetas de tu propia máquina.
• Agente intercambiable — apúntalo a cualquier CLI compatible, o usa tu propia clave de API para otro harness.
• Una amplia biblioteca de sistemas de diseño y skills integrada, para que no empieces desde un lienzo en blanco.
• Más que diseño estático — prototipos, presentaciones, generación de imágenes y vídeo, todo desde un mismo espacio de trabajo.

En qué se diferencia de Figma

Esta es la comparación que la mayoría de la gente realmente quiere, así que vamos a ser directos.

Figma es un editor vectorial manual y colaborativo. Mueves cada frame, dibujas cada componente, y su fuerza está en la precisión y el trabajo en equipo en tiempo real. Aquí nada genera el diseño por ti — tú eres el diseñador que hace el trabajo.

Open Design invierte eso. Describes lo que quieres, eliges un sistema de diseño y el agente genera un artefacto HTML real e interactivo que luego refinas. La salida es código, no un archivo vectorial — lo que significa que todo lo que construyes está de inmediato más cerca de tu proyecto real.

Un punto en el que Anton es honesto: Open Design es actualmente débil a la hora de extraer un sistema de diseño de un archivo de Figma. Si hoy le entregas una exportación de Figma, el sistema extraído tiende a volver desordenado. Así que si tu fuente de verdad vive en Figma, la ruta más limpia es hacer que tu agente convierta primero ese diseño de Figma en código, y luego traer el código a Open Design (más sobre esto abajo). Trata a Open Design como una superficie de generación e iteración, no como un importador de Figma.

En qué se diferencia de Claude Design

Si has usado Claude Design, la interfaz te resultará familiar al instante — la misma estética serena, el mismo bucle centrado en artefactos. Las diferencias que importan:

• Cualquier modelo, no solo uno. Claude Design te ata a Opus 4.7. Open Design impulsa el agente que elijas — y puedes cambiarlo a mitad del proyecto.
• Generación de medios integrada. Añade claves de proveedores (OpenAI GPT Image, MiniMax, ElevenLabs y más) y Open Design generará imágenes, audio y vídeo de forma integrada. Esta es la diferencia destacada que señala Anton — una herramienta de diseño de un solo proveedor no te ofrece esto.
• Local y seguro para uso comercial. Apache-2.0 más local-first significa que el trabajo para clientes nunca sale de tu máquina ni necesita el permiso de nadie.

Paso 1 — Instalar Open Design

Tienes tres formas de entrar. Elige la que mejor te encaje:

Vía	Ideal para	Requisitos
Aplicación de escritorio	La mayoría de la gente — cero configuración	Ninguno. Solo descarga y abre.
Ejecutar desde el código fuente	Desarrolladores que quieren leer o modificar el código	Node ~24, pnpm 10.33.x
Instalar en tu agente	Quienes viven en la terminal	Un CLI de agente de programación existente

Opción A — Aplicación de escritorio (recomendada, cero configuración)

Ve a open-design.ai/download y descarga la versión para tu sistema operativo. Tras instalarla, la aplicación detecta automáticamente todos los CLIs de agentes de programación que ya tienes en tu PATH y carga por ti las skills y los sistemas de diseño integrados. Esta es la forma más rápida de llegar a un espacio de trabajo funcional.

Opción B — Ejecutar desde el código fuente

Si prefieres ejecutarlo desde el repositorio — como hace Anton en el vídeo — son un puñado de comandos:

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. Resuelve un puerto dinámico, así que no lo fijes en duro — solo haz clic en la dirección que muestre. Necesitas Node ~24 y pnpm 10.33.x; Corepack selecciona por ti la versión fijada de pnpm.

Opción C — Instalar en tu agente de programación

Para llamar a Open Design como una skill dentro de tu agente, sin abrir nunca la GUI:

od mcp install <agent>
# <agent> = claude | codex | cursor | copilot | gemini | opencode | …

Luego, dentro del agente: Use open-design to generate a landing page with the Stripe design system.

Paso 2 — Configurar tu agente

En el primer arranque, Open Design escanea tu máquina y muestra todos los CLIs que encontró, y luego te guía por una breve configuración:

• Elige el agente y el modelo. Anton usa Claude Code en Opus 4.7 (“uno de los mejores para diseño”), pero puedes apuntar a Codex, Gemini CLI o cualquier otro agente detectado. Hay un botón Test para confirmar la conexión.
• O usa una clave de API. ¿Prefieres no usar un CLI local? Configura en su lugar una URL base, una clave y un modelo.
• Añade proveedores de medios. Este es el diferenciador — añade claves para OpenAI GPT Image, MiniMax, ElevenLabs y otros para generar imágenes, audio y vídeo al instante.
• Activa skills. Habilita las skills de diseño que necesites (diseño de sistemas, prototipo, guías de marca y más); deja el resto desactivadas.

Puedes cambiar todo esto más tarde, así que mantén simple la primera pasada.

Paso 3 — Trabajar con sistemas de diseño

La biblioteca de sistemas de diseño es el corazón de la herramienta. Cada entrada toma una marca real y codifica su paleta, tipografía, componentes y atmósfera general en un sistema reutilizable.

La biblioteca de sistemas de diseño: cada entrada descompone una marca real en paleta, tipografía, componentes y atmósfera visual que puedes reutilizar.

Hay dos formas de traer tu propia marca, y Anton prueba ambas:

1. Importar un ZIP de Claude Design (lo más limpio hoy). ¿Construiste un sistema en Claude Design? Ábrelo allí, elige Share → Download project as .zip y arrastra ese ZIP a Open Design. Todos tus tokens y componentes se trasladan directamente.
2. Extraer un sistema de código existente. Crea un archivo de alta fidelidad sin ningún sistema de diseño asociado, apunta su importación a una carpeta con tu código real y pídele al agente que derive de él un sistema de diseño — colores, tipografía, espaciado y un kit de componentes JSX. No será perfecto, pero es un punto de partida sólido que puedes ajustar.

Puedes explorar la biblioteca completa de plugins en la web en open-design.ai/plugins antes de instalar nada.

Paso 4 — Construir una página real e iterar

El flujo de trabajo real es construir prototipos y presentaciones. En el vídeo, Anton construye una página de precios/landing para PurpleSchool con un sistema de diseño importado:

1. Crea un proyecto, elige web/escritorio/móvil y selecciona wireframe o alta fidelidad.
2. Adjunta el sistema de diseño y pega tu brief (Anton usa una especificación breve: hero, precios, características, FAQ, pie de página).
3. Elige tu modelo en el proyecto (aquí, Claude Code en Opus) y envía.
4. Responde a las preguntas aclaratorias que Open Design hace antes de escribir una sola línea — superficie, audiencia, tono — y luego observa cómo recorre una lista de tareas.

La biblioteca de plantillas: puntos de partida de prototipo, presentación, imagen y vídeo que puedes filtrar por tipo y bifurcar para empezar.

Donde Open Design se gana su lugar es en la iteración sobre el lienzo: selecciona cualquier bloque y coméntalo, dibuja directamente sobre la vista previa para señalar lo que quieres cambiar, edita fuentes y tamaños en línea, y revisa el diseño en anchos de escritorio/tableta/móvil. Es el bucle de retroalimentación rápido que resulta incómodo de reproducir con un agente simple en una terminal.

Cuando estés satisfecho, exporta el resultado como HTML independiente o como un ZIP y entrégalo a tu equipo — o lleva el código directamente a tu proyecto.

Consejos

• No le entregues archivos de Figma sin procesar. La extracción desde Figma es la ruta más débil hoy; convierte primero Figma a código y luego importa el código.
• Importa un ZIP de Claude Design cuando necesites tu propia marca — es la vía de entrada más fluida.
• Usa un CLI local para que la generación se apoye en una suscripción que ya pagas, en lugar de tarifas de API por llamada.
• Apóyate en las herramientas de comentario y dibujo sobre el lienzo — seleccionar un bloque y dibujar sobre él es mucho más rápido que describir el cambio con palabras.
• Espera un borrador sólido y luego pule. Exporta pronto para detectar pequeñas desviaciones de espaciado y formato.

Preguntas frecuentes

¿Debería reemplazar Figma por Open Design? No — hacen trabajos diferentes. Figma es un editor manual, preciso y colaborativo; Open Design es una superficie de generación e iteración agent-native que produce código. Usa Open Design para pasar rápido del brief a un borrador real y fiel a la marca, y conserva Figma para el trabajo que necesita precisión manual y colaboración en vivo.

¿Puede importar mis diseños de Figma? De forma indirecta. La extracción directa desde Figma es tosca hoy. La ruta fiable es convertir el diseño de Figma a código con tu agente y luego importar ese código (o importar un ZIP de Claude Design) a Open Design.

¿Tengo que usar Claude? No. Open Design impulsa cualquier agente compatible — Codex, Gemini CLI, Cursor, OpenCode y más — y puedes cambiar de modelo a mitad del proyecto, o usar tu propia clave de API.

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

---

Esta guía escrita está basada en el recorrido práctico de Anton Larichev. Mira el vídeo completo arriba y suscríbete a PurpleSchool | Anton Larichev para más análisis a fondo sobre desarrollo y herramientas de IA.