Recorrido completo por las capacidades de Open Design: diapositivas, prototipos, imágenes, vídeo y una mascota de escritorio

Esta guía es un recorrido a vista de pájaro por Open Design: no una única construcción en profundidad, sino un repaso a todo lo que el espacio de trabajo puede crear: presentaciones, pósteres, imágenes a partir de un boceto, prototipos de apps a partir de un boceto, motion graphics generados con código, vídeo e incluso una mascota de escritorio. Sigue el recorrido de capacidades que 硅基麻辣拌 realiza en su tutorial, reescrito en español y actualizado a la versión actual. Mira el vídeo de arriba para ver la ejecución en directo, o sigue leyendo para la versión escrita.

El espacio de trabajo de Open Design: prototipos, presentaciones, imágenes y vídeo en un mismo lienzo 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 utilizas. Todo el proyecto es una aplicación web desplegada localmente con una capa de modelo que da soporte completo a tu propio agente de programación, ya sea que te conectes mediante una clave de API, una suscripción OAuth o directamente tu CLI existente.

硅基麻辣拌 destaca una cosa como un verdadero punto fuerte: nunca tienes que exponer una clave de API ni un token de autenticación. Apuntar Open Design hacia tu Codex o Claude Code local mediante la CLI significa que la generación se ejecuta con credenciales que nunca salen de tu máquina, una propiedad de seguridad que ojalá más proyectos de agentes de código abierto copiaran. En el vídeo lo controlan todo con una suscripción a OpenAI Codex sobre GPT-5.5.

Paso 1: Instala y conecta tu agente

La vía más rápida es la aplicación de escritorio de open-design.ai/download: cero configuración y detecta automáticamente las CLI de agentes que tengas instaladas. Para ejecutarlo desde el código fuente:

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 a uno concreto). Como señala 硅基麻辣拌, incluso puedes saltarte la lectura de la documentación por completo: pásale el enlace del repositorio a tu agente y dile que instale Open Design usando la configuración en modo de desarrollo. En el primer arranque, apúntalo a tu CLI local (Codex, Claude Code, Cursor u OpenCode) y ya estás listo.

Lo que realmente puedes crear

La pantalla de inicio está llena de ejemplos: páginas web, pósteres, iconos de apps, motion graphics, imágenes de portada para artículos, animaciones estilo píxel, presentaciones, informes financieros, pósteres tipo revista. Cada ejemplo es algo que los prompts y skills integrados de Open Design pueden producir directamente, y cada uno muestra el prompt y el sistema de diseño que hay detrás.

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.

Repasemos las capacidades una por una.

Presentaciones (PPT)

Haz clic en Slideshow, dale un nombre y elige un sistema de diseño (硅基麻辣拌 usa un sistema al estilo de Anthropic/Claude). Open Design hace entonces lo que lo distingue de simplemente pedirle diapositivas a un agente: genera un formulario de descubrimiento dinámico basado en tu prompt (relación de aspecto del lienzo, público objetivo, número de diapositivas, posicionamiento de la investigación, dirección visual) y confirma lo que quieres antes de construirlo. El formulario no está predefinido; se genera a partir de tu prompt y se adapta a sus carencias. El resultado es una presentación horizontal limpia con el estilo de marca que elegiste.

Imágenes a partir de un boceto hecho a mano

Open Design admite la entrada dibujada a mano. Dibuja algo a grandes rasgos (en el vídeo, un "dragón" deliberadamente abstracto) y luego pídele que genere una imagen real a partir de ese boceto. Hace preguntas sobre orientación y fondo, genera la imagen y la deja de vuelta en tus archivos de diseño. El mensaje cala: no necesitas saber dibujar, solo una idea.

Prototipos de apps a partir de un boceto

El mismo truco, otra salida. Dibuja un wireframe rudimentario (un círculo aquí, un cuadrado allá), guarda el archivo del boceto, luego refiérelo y pide una pantalla de app móvil. Open Design usa el mismo bucle de formulario-confirmación-generación y convierte el boceto abstracto en una pantalla de aspecto maduro.

Motion graphics, en código

Usando el skill de movimiento integrado, 硅基麻辣拌 genera una animación de dos iPhones antropomórficos que se encuentran y conversan. Está hecho íntegramente con animación SVG y CSS: cada elemento visual es código, así que se integra limpiamente en una presentación o una página cuando necesitas que algo se mueva.

La biblioteca de plantillas: puntos de partida de prototipos, presentaciones, imágenes y vídeo que puedes filtrar por tipo y bifurcar para empezar.

Generación de imágenes y vídeo

La biblioteca de imágenes cubre casos comunes como GPT Image, con los prompts ya empaquetados: elige uno y genera. También se admite el vídeo, incluidos clips generados por modelo y efectos de producto o presentaciones dinámicas. El trabajo de vídeo con mucho movimiento se realiza en colaboración con el proyecto hyperframes, que usa código para impulsar prototipos de producto y animaciones de visualización de datos.

Una mascota de escritorio

La función más entrañable: cría una mascota. Elige una (incluye personajes aportados por la comunidad), pulsa guardar y aparecerá en tu escritorio para interactuar con ella. Es algo pequeño, pero indica un proyecto que se preocupa por la textura emocional de la herramienta, no solo por el resultado.

La valoración honesta

硅基麻辣拌 es justo respecto a las contrapartidas. Por dentro, Open Design incluye un conjunto de skills componibles (usables dentro de Open Design o extraídos hacia tu propio Codex/Claude Code) y una amplia biblioteca de sistemas de diseño que cubre marcas conocidas, y todo el framework al estilo de Claude Design es de código abierto en el repositorio, así que puedes añadir nuevos tipos de diseño tú mismo.

La carencia actual: todavía faltan algunas funciones de pulido, en particular el modo de comentarios a nivel de píxel para anotar y corregir una página renderizada. Pero la fortaleza que compensa es real: amplio soporte de agentes (Codex, Claude Code, Cursor, OpenCode) sin exponer claves de API, y un proyecto que itera rápido. Si quieres una plataforma escalable y extensible a la que puedas contribuir, es un excelente punto de entrada.

Consejos

• Contrólalo con tu CLI local: ninguna clave de API sale de tu máquina, y la generación se apoya en una suscripción que ya pagas.
• Deja que el formulario de descubrimiento haga su trabajo: responder a sus preguntas por adelantado es lo que hace que las presentaciones y los prototipos salgan bien al primer intento.
• Dibuja, no describas, cuando la forma importa: la entrada hecha a mano funciona tanto para imágenes como para prototipos de apps.
• Recurre al skill de movimiento cuando una presentación o página necesite algo animado; es código, así que es portable.
• Extrae skills hacia tu propio agente cuando quieras una capacidad fuera de la interfaz gráfica.

Preguntas frecuentes

¿Tengo que exponer una clave de API? No, ese es un punto fuerte destacado. Controla Open Design con tu Codex, Claude Code, Cursor u OpenCode local mediante la CLI y las credenciales nunca saldrán de tu máquina.

¿De verdad puede hacer vídeo y animación, no solo diseño estático? Sí. Hace motion graphics basados en código (SVG + CSS), generación de imágenes y vídeo, y trabajo con mucho movimiento en colaboración con el proyecto hyperframes.

¿Qué falta todavía? En el momento del tutorial, el modo de comentarios a nivel de píxel para anotar una página renderizada aún no estaba disponible. El proyecto avanza rápido, así que consulta la versión actual.

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

---

Esta guía escrita se basa en el recorrido de capacidades de 硅基麻辣拌. Mira el vídeo completo arriba y suscríbete a 硅基麻辣拌 para más tutoriales de herramientas de IA.