Del prompt a la URL en vivo — Editar, inspeccionar y desplegar con un clic con Open Design

Esta guía lleva un prototipo desde un prompt hasta una URL en vivo: elige un sistema de diseño, genera, ajusta con las herramientas Edit e Inspect en el lienzo y luego despliega directamente en Vercel o Cloudflare Pages, sin salir de Open Design. Sigue la demo que 01Coder realiza 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 agente hace el resto.

¿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 codificación que ya usas — Claude Code, Codex, Gemini, Hermes y más — o tu propia API key. Se distribuye como una app de escritorio (sin necesidad de compilar) y combina una profunda biblioteca de skills con una profunda biblioteca de sistemas de diseño de calidad de marca, para que partas de una estética real en lugar de un lienzo en blanco.

• Código abierto, Apache-2.0 — clónalo, autoalójalo o simplemente descarga la app.
• Funciona en local — tus proyectos viven en tu propia máquina.
• Agente intercambiable — cambia el agente en la esquina inferior izquierda en cualquier momento.
• Sistemas de diseño de marcas reales — Apple, Airbnb, ElevenLabs y muchos más.

Paso 1 — Instala y elige un sistema de diseño

El camino más fácil es la app de escritorio desde open-design.ai/download (macOS y Windows; Docker o pnpm si prefieres ejecutarlo desde el código fuente). Al iniciar, la esquina inferior izquierda muestra el agente activo (01Coder usa Codex) — haz clic en él para cambiarlo.

Crea un Prototype, ponle un nombre y elige un sistema de diseño en el desplegable — cada entrada reviste la salida con el look de esa marca. Si ya construiste algo en Claude Design, importa su ZIP aquí.

La biblioteca de plugins: instala skills directamente desde el registro — incluidos skills de diseño anti-slop.

Paso 2 — Genera con descubrimiento + una dirección visual

Escribe tu brief y envíalo. Open Design hace una breve serie de preguntas de descubrimiento (para quién es, el tono del diseño, el contexto de marca, el idioma) y luego ofrece un selector de dirección visual — 01Coder elige una dirección editorial «FT Magazine». Elige una y construirá la primera versión a la derecha.

Paso 3 — Ajusta con Edit e Inspect

Aquí es donde pules sin volver a hacer prompts:

• Edit — haz clic en cualquier elemento y cambia su contenido directamente. 01Coder acorta una etiqueta de «GitHub» a «GH» y reescribe una palabra de un titular, luego pulsa apply content. Puedes ajustar los enlaces de la misma forma, y el panel izquierdo muestra el artefacto organizado por capas.
• Inspect — para el estilo visual. La primera vez, advierte que el artefacto no tiene etiquetas data-oid; deja que el agente las añada (así es como Open Design apunta a los elementos de forma fiable), luego recarga. Ahora, al hacer clic en cualquier elemento (digamos el h1 del hero), puedes ajustar color, fondo y tamaño de fuente, con un reset si te pasas.

Para cambios mayores, vuelve al chat para una edición conversacional directa — Edit/Inspect son para los ajustes rápidos y quirúrgicos.

Paso 4 — Despliega a una URL en vivo con un clic

Cuando esté listo, el menú Share (arriba a la derecha) exporta a PDF, PPTX, ZIP o HTML autónomo — o despliega en Vercel o Cloudflare Pages con un clic. Usando Cloudflare como hace 01Coder:

1. Haz clic en deploy → Cloudflare, luego en get / create an API token.
2. Crea un token personalizado con el permiso de Cloudflare Pages, continúa al resumen y créalo.
3. Pega el token en Open Design, añade tu account ID (cópialo desde el dashboard de Cloudflare) y despliega.
4. Abre el enlace que te da — si la primera carga se ve mal, refresca una o dos veces mientras se propaga.

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

¿No te convence el resultado en vivo? Vuelve al chat, itera y vuelve a desplegar.

Consejos

• Empieza desde un sistema de diseño para que la primera pasada ya esté alineada con la marca.
• Deja que el agente añada las etiquetas data-oid antes de usar Inspect, luego recarga la vista previa.
• Usa Edit para el texto, Inspect para el estilo, el chat para la estructura — elige la herramienta adecuada para cada cambio.
• Para desplegar en Cloudflare necesitas ambos: un token de API (con permiso de Pages) y tu account ID.
• Refresca tras el primer despliegue si la página aún no se ha propagado.

Preguntas frecuentes

¿De verdad puedo desplegar a una URL pública desde dentro de Open Design? Sí — el menú Share despliega en Vercel o Cloudflare Pages con un clic (tú aportas el token del proveedor; Cloudflare también necesita tu account ID).

¿Qué es data-oid y por qué lo pide Inspect? Es un atributo que Open Design añade a los elementos para poder apuntar a ellos de forma fiable. Deja que el agente lo añada, recarga e Inspect funciona.

¿Tengo que ejecutarlo desde el código fuente? No — descarga la app de escritorio para macOS o Windows. Docker y pnpm desde el código fuente son opciones si lo prefieres.

¿Es gratis? La app 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 se basa en la demo práctica de 01Coder. Mira el video completo arriba y suscríbete a 01Coder para más análisis a fondo de productos de IA.