Convierte una imagen de referencia en una página real con Open Design (gratis vía Gemini)
Un flujo de trabajo basado en imagen de referencia para Open Design: toma un diseño que te guste (un shot de Dribbble, la captura de cualquier sitio), suéltalo y deja que Open Design construya una página real en ese lenguaje visual, todo gratis en el nivel gratuito de Gemini CLI. Basado en el recorrido de Compile Future.
Esta guía trata sobre un flujo de trabajo de Open Design concreto e infrautilizado: partir de una imagen de referencia. Encuentra un diseño que te guste — un shot de Dribbble, la captura de cualquier sitio — suéltalo, y Open Design construye una página real en ese lenguaje visual. Y puedes ejecutar todo el proceso gratis en el nivel gratuito de un agente de código. Sigue el recorrido que Compile Future ofrece en su vídeo, reescrito y actualizado con la versión actual. Mira el vídeo de arriba o sigue leyendo 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 open source y local-first — una alternativa a Claude Design que se ejecuta en tu propia máquina. La diferencia clave: en lugar de quedar atado a un solo modelo, impulsa el agente de código que ya usas — Claude Code, Codex, Cursor, Gemini, OpenCode y más. Viene con una amplia biblioteca de skills y sistemas de diseño de marcas (Airbnb, Apple, Cursor, Ferrari, Figma y muchas más), de modo que la generación parte de una estética real en lugar de un prompt genérico.
- Open source, Apache-2.0 — clónalo, autoalójalo o simplemente descarga la app.
- Se ejecuta en local — tus proyectos viven en tu propia máquina.
- Cualquier modelo — incluidos los niveles gratuitos; no se requiere GPU (el modelo se ejecuta en la nube a través de tu CLI, no en tu hardware).
Paso 1 — Instala y conecta un modelo gratuito
Descarga el instalador desde open-design.ai/download (DMG de macOS o .exe de Windows), o ejecútalo desde el código fuente. En el primer arranque, elige tu agente. Compile Future usa Gemini CLI porque su nivel gratuito es generoso (muchas solicitudes gratuitas al día) — así todo el flujo de trabajo no cuesta nada:
- Elige Gemini en la configuración. Si no se detecta, instala Gemini CLI (un comando desde su sitio) e inicia sesión con una cuenta de Google.
- ¿Prefieres otra cosa? Cualquier CLI detectada funciona, o trae tu propia API key.
Por eso «sin GPU»: el modelo se ejecuta en la nube a través de tu CLI, así que incluso un portátil modesto basta.
Paso 2 — Construir desde un prompt de texto (la base)
Define un sistema de diseño por defecto (a Compile Future le gusta uno atrevido), elige Prototype, nómbralo y selecciona high fidelity para el mejor resultado. Envía tu brief. Open Design hace unas cuantas preguntas de descubrimiento (¿herramienta única / landing page / todo en uno? ¿responsive? ¿tono? ¿contexto de marca?) y una dirección visual (p. ej. un look minimalista estilo Vercel), y luego construye una primera versión limpia. Puedes ajustar los colores de acento directamente en la página.
Un prototipo real generado, renderizado en la vista previa — una landing page de agencia oscura y cinematográfica.
Paso 3 — El flujo de trabajo con imagen de referencia (la parte buena)
Aquí está la técnica que justifica el vídeo. En lugar de describir un look con palabras, muéstrale el look a Open Design:
- Encuentra un diseño que te guste — navega por Dribbble (busca p. ej. «tools website») o cualquier sitio en vivo para inspirarte.
- Guarda una captura de pantalla de él.
- De vuelta en Open Design, crea un proyecto en modo free-form, adjunta la captura y lanza el prompt: «build my [site], use the design language from the image I shared.»
- Responde las preguntas de descubrimiento, diciéndole que iguale la UI de la imagen.
Open Design redacta una brand spec a partir de la referencia (la mostrará y te pedirá confirmarla) y luego construye la página en ese lenguaje visual — la misma sensación de maquetación, colores y tipografía que tu referencia, aplicados a tu contenido. Es la forma más rápida de obtener un resultado fiel a la marca cuando puedes ver lo que quieres pero no puedes describirlo.
La biblioteca de plugins: instala skills directamente desde el registry — incluidas skills de diseño anti-slop.
Paso 4 — Editar y publicar
Refina en lenguaje natural — «remove the sign-in button», «adjust the card radius» — y míralo actualizarse. Consulta el código vía Source, luego usa Share para descargar un ZIP, PDF o PowerPoint, exportar HTML independiente o deploy to Vercel con un clic (solo pega un Vercel token) para obtener un enlace compartible.
Consejos
- Ejecútalo gratis en el nivel gratuito de Gemini CLI (o cualquier CLI con nivel gratuito) — sin suscripción, sin GPU.
- Usa una imagen de referencia cuando puedas imaginar el look pero no describirlo — Dribbble o la captura de cualquier sitio.
- El modo free-form + «match the image» es el patrón de prompt que clava la referencia.
- Confirma la brand spec que genera antes de que construya, para que la dirección sea la correcta.
- high fidelity para un resultado pulido; itera con ediciones en lenguaje natural.
Preguntas frecuentes
¿Necesito una GPU? No. El modelo se ejecuta a través de tu CLI (en la nube), no en tu máquina — un portátil normal basta.
¿De verdad puedo usarlo gratis? Sí — apúntalo a una CLI con nivel gratuito como Gemini y podrás generar diseños sin coste; solo pagas si eliges un modelo/API de pago.
¿Cómo diseño a partir de una imagen que me gusta? Usa el modo free-form, adjunta la captura y dile que use el lenguaje de diseño de la imagen; extrae una brand spec y construye en ese estilo.
¿Es gratis y open source? Sí — Apache-2.0. Ejecútalo en local gratis; solo pagas por el uso de modelo/medios de lo que conectes.
Esta guía escrita se basa en el recorrido de Compile Future. Mira el vídeo completo arriba y suscríbete a Compile Future para más flujos de trabajo de IA gratuitos.