Diseña con la calidad de Claude Design sin quemar tokens

Esta guía aborda el ángulo del costo de frente: si has usado una herramienta de diseño en la nube cerrada, conoces la magia, y sabes que los tokens se agotan rápido. Open Design te permite diseñar con una calidad similar ejecutando el trabajo a través de cualquier modelo que quieras: el agente que ya pagas, o tu propia clave, de modo que no tengas que racionar un presupuesto de diseño aparte. Sigue la construcción que Roy Shavit realiza en su recorrido, reescrita en inglés y puesta al día con la versión actual. Mira el video de arriba para verlo en vivo, o sigue leyendo para la versión escrita.

La galería HyperFrames: piezas de motion y vídeo impulsadas por código que puedes forkear y remezclar.

¿Qué es Open Design?

Open Design es una plataforma de diseño de código abierto y local-first. Como la herramienta en la nube cerrada, le das un prompt y te devuelve un artefacto real —una landing page, una app o un deck— como HTML editable con el que puedes seguir trabajando en VS Code o tu editor. Tres cosas lo distinguen, y las dos primeras son la razón de que sea más barato de operar:

• Es de código abierto (Apache-2.0): lee el código, haz un fork, hospédalo tú mismo.
• Se ejecuta en tu computadora: los archivos se quedan en tu máquina; nada va a una nube de terceros.
• Usa cualquier modelo que quieras: Codex, Claude o más de 15 modelos más a través de tu CLI existente, o tu propia clave de API (BYOK).

La cuestión del costo: deja de racionar tokens

El planteamiento de Roy es directo y es justo el punto: una herramienta de diseño en la nube cerrada agota su asignación de tokens muy rápido, así que terminas racionando tu trabajo de diseño. Open Design elimina ese techo porque la generación corre a través del agente/suscripción que ya tienes, o una clave que controlas. Tú decides el compromiso costo/calidad por proyecto —un modelo barato para borradores, un modelo de primer nivel para la pasada final— en lugar de que te mida un tope de diseño aparte de otra persona. El autohospedaje también significa que el trabajo ocurre en tu máquina, lo que mantiene todo ligero.

Paso 1: Instala y detecta tus modelos

El camino más simple es la app de escritorio: ve a open-design.ai/download, elige tu sistema operativo, descárgala y arrástrala. ¿Prefieres 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 mano). En la configuración, Open Design reconoce de inmediato los modelos instalados localmente: Roy tiene Codex y Claude, y también detectaría OpenCode u otros. Establece uno por defecto, o trae tu propia clave de cualquier proveedor para no necesitar siquiera una CLI instalada. Esa es la singularidad: no te obligan a un único proveedor.

Modo de presentación: elige una categoría de presentación y haz un fork de un ejemplo como punto de partida.

Paso 2: Construye una landing page, itera barato

Roy construye una landing page para un servicio de streaming de juegos. Envía el brief, Open Design devuelve un formulario de descubrimiento (tipo de salida, audiencia, dirección de marca, alcance, nivel de movimiento), él responde y la construye, ejecutándose aquí en Claude Opus porque es lo que tiene configurado su CLI. El resultado es una primera versión sólida: hero, cifras de demo, soporte de plataformas, una página de precios, testimonios, FAQ, responsive en escritorio, tablet y teléfono.

Las herramientas de iteración mantienen bajo el costo de los cambios: selecciona un área y añade una nota, deja un comentario o haz edición en línea para cambiar el texto directamente. Cambia a la vista de código para ver el HTML generado y los archivos de diseño. Cuando estés satisfecho, el botón Compartir exporta a PDF o despliega directo a Vercel o Cloudflare Pages (pega tu token y el sitio queda en vivo), o haces clic hacia el código y sigues trabajando en VS Code, Cursor o tu editor.

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

Paso 3: Más allá de las páginas: genera un video

Open Design no se limita al diseño estático. Roy usa la habilidad de movimiento hyperframes para generar un gráfico de barras animado al estilo del New York Times: tarda unos minutos y produce un MP4 real que puedes insertar en un video más largo o usar como un fragmento de marca. También hay más de 170 plugins de sistemas de diseño para elegir (Apple, PlayStation y más), y como la biblioteca es abierta, la comunidad sigue ampliándola.

Cuándo usar cada uno (la valoración honesta)

Roy es justo al respecto. Recurre a Open Design cuando quieras flexibilidad de modelos, menor costo o autohospedaje: el trabajo se queda en tu máquina y corre en el modelo que elijas, incluido uno de terceros. Recurre a la herramienta en la nube cerrada cuando quieras una configuración mínima, sin instalación, y el menor esfuerzo para empezar; y ten en cuenta que de fábrica todavía está un poco más pulida. Mismo contenido, un acabado ligeramente mayor allá; bastante más control y menor costo de operación aquí.

Consejos

• Ejecuta en el agente que ya pagas (o BYOK) para escapar de un tope de tokens aparte.
• Haz el borrador en un modelo barato, termina en uno potente: tú controlas el dial de costo/calidad por proyecto.
• Usa la edición en línea y los comentarios por área para cambios baratos y quirúrgicos en lugar de regeneraciones completas.
• Exporta a código o despliega en Vercel/Cloudflare directo desde Compartir cuando termines.
• Prueba la habilidad hyperframes cuando necesites movimiento/video, no solo páginas estáticas.

Preguntas frecuentes

¿Cómo ahorra tokens esto frente a una herramienta en la nube cerrada? La generación corre a través de tu propio agente/suscripción o tu propia clave de API, así que no hay un presupuesto de diseño aparte medido que agotar: tú eliges el modelo y el costo.

¿Puedo seguir trabajando la salida en mi editor? Sí: la salida es HTML/archivos editables. Haz clic hacia el código y continúa en VS Code, Cursor o cualquier editor, o despliega en Vercel/Cloudflare Pages.

¿Puede hacer algo más que páginas web? Sí: prototipos, decks, imágenes y video (mediante la habilidad de movimiento hyperframes), además de una gran biblioteca de sistemas de diseño.

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

---

Esta guía escrita se basa en el recorrido de Roy Shavit. Mira el video completo arriba y suscríbete a Roy Shavit para más contenido práctico de construcción con IA.