MÁS INFORMACIÓN
Más información sobre Gemini
Tutoriales, documentación y recorridos guiados de Gemini CLI seleccionados para el trabajo de diseño, tal como se enumeran en la guía publicada.
Gemini 
OpenDesign Diseñar con
Gemini en
OpenDesign.
Cómo diseñar interfaces con Gemini CLI en OpenDesign: una foto de pizarra como referencia, GEMINI.md como el libro de reglas, una tarea de panel de operaciones de briefing a archivo revisado, y los límites que debe conocer antes de empezar.
TRES FORMAS DE ENTRAR EN ESTA GUÍA DE GEMINI CLI
Elige tu punto de entrada a Gemini CLI
ESTA GUÍA · DISEÑO DE UI
Genera una interfaz de producto con Gemini CLI
La ruta principal aquí: un brief, imágenes de referencia, reglas de diseño mantenidas en contexto y un artefacto HTML que revisas tú mismo.
Lea esta guía CONFIGURACIÓNConfigure Gemini Desde Cero
Comienza desde una máquina limpia y llega hasta un Gemini CLI que puede construir y verificar su propia salida de UI.
Ir a la configuración COMPARACIÓNCompare Gemini con otros agentes
Dónde se sitúan las fortalezas multimodales y de gran contexto de Gemini CLI frente a Codex, Claude Code y Cursor, y cuándo conviene otro flujo de trabajo.
Ver la comparaciónEn esta página Ejemplo
Una tarea de diseño completa con Gemini
Una tarea de Gemini: de brief de pizarra a interfaz renderizada
Sigue una tarea a través de todo su ciclo: el brief y las restricciones que le entregas a Gemini, el artefacto que devuelve y las comprobaciones que siguen siendo tuyas antes de darla por terminada. La interfaz a continuación es un ejemplo ilustrativo creado para esta página, no una ejecución de Gemini grabada.
1Briefing de diseño y restricciones
BriefingConvierte la foto adjunta de la pizarra en un panel de operaciones: cuatro números destacados, un gráfico de volumen semanal y una cola de incidentes. Una pantalla en escritorio, un resumen desplazable en el teléfono.
- Sistema de diseñoLienzo de papel de OpenDesign: Albert Sans, un único acento verde
- Breakpoints1440px de escritorio y 390px de móvil, sin desplazamiento horizontal
- InteraccionesControl de rango de fechas, filtros de incidentes y navegación por teclado a través de la cola
- ResultadoUn archivo HTML autónomo con anclajes
data-od-idestables
2Quién hace qué: tú, Gemini CLI y OpenDesign
- Usted
Tú escribes el brief, eliges el sistema de diseño y estableces los criterios de aceptación.
- Gemini
Gemini CLI planifica el diseño, escribe el HTML, CSS y JavaScript, y luego revisa a petición.
- OpenDesign
OpenDesign proporciona el sistema de diseño y la skill, renderiza la vista previa y guarda cada versión como un archivo en el proyecto.
- Revisión
Antes de la entrega, compruebas la jerarquía visual, el espaciado en la cuadrícula de 8px, ambos breakpoints y cada interacción.
3El artefacto de Gemini: el panel de operaciones a 1440px y 390px
4Revisión antes de la entrega
Diseño
Cuadrícula y espaciado
Las cuatro tarjetas, el gráfico y la cola se asientan en una única cuadrícula de 8px; nada choca a 1440 o 390.
Jerarquía
Jerarquía visual
El orden de escaneo va de los números destacados al gráfico y luego a la cola; el acento toca una sola barra y una sola píldora crítica.
Responsivo
Diseño para móvil
En móvil, dos números por fila, gráfico debajo, cola como lista; el rango de fechas se contrae en una hoja.
Interacción
Comprobaciones de interacción
Cambia el rango, filtra solo los críticos y navega con las flechas por la cola.
Ajuste
Dónde encaja Gemini CLI en tu tarea de diseño — y dónde no
Gemini se ajusta cuando
- Captura multimodal → UI. La comprensión de imágenes de Gemini lee una captura de referencia y la convierte en marcado responsive, y puede comparar el render con ella.
- Contexto de 1M de tokens. Un sistema de diseño completo, una biblioteca de componentes y un conjunto de referencias caben en una sola ventana, por lo que la salida reutiliza tus primitivas reales en lugar de inventar estilos.
- GEMINI.md + MCP. El archivo de contexto GEMINI.md lleva tus convenciones en cada ejecución; el servidor MCP de Figma incorpora contexto de diseño real al código.
- Abierto y gratis para empezar. Apache-2.0, con un generoso nivel gratuito a través de una cuenta de Google y BYOK mediante la API de Gemini.
Elija otro workflow cuando
- Necesitas archivos vectoriales editables. Lo que devuelve es HTML, no un documento de diseño editable. Considera un flujo de trabajo vectorial aparte si tu formato de recursos lo exige.
- No tienes referencia ni restricciones. Sin un sistema de diseño ni ejemplos de los que partir, Gemini tiende a un aspecto genérico; escribe el brief antes de generar.
- No dispone de la credencial que este agente necesita. Se requiere: cuenta de Google (nivel gratuito) o clave de la API de Gemini (aporte su propia clave). OpenDesign no proporciona ni intermedia credenciales.
- Tu equipo trabaja en Antigravity o Claude Code. Esos agentes tienen sus propias páginas; el espacio de trabajo en sí no cambia, pero la configuración sí. Consulta agentes relacionados.
Compatibilidad
Requisitos de Gemini antes de empezar
Esta página trata a Gemini como un agente conectado a través de la aplicación de escritorio OpenDesign. Las referencias publicadas se verificaron el 6 de septiembre de 2026.
Alcance de la herramientaGemini, de Google
Google distribuye Gemini CLI como un agente de IA de terminal de código abierto (Apache-2.0). Lee bases de código, edita archivos, ejecuta comandos, obtiene contenido web y fundamenta respuestas con Búsqueda de Google. Esta página se centra en diseñar interfaces con Gemini a través de OpenDesign, no en la interfaz propia de Gemini. Las notas de configuración de OpenDesign enumeran los agentes disponibles.
Cuentas y autenticaciónCuenta de Google (nivel gratuito) o API de Gemini
Opciones de credenciales: una cuenta de Google (nivel gratuito) o una clave de API de Gemini (BYOK). Autentícate con cualquiera de las dos; las credenciales permanecen en tu máquina. Esta página no promete ninguna cuota ni precio.
Sistema y versionesApp de escritorio o código fuente
Las compilaciones de escritorio aparecen en la página de descargas. Los requisitos de Node.js y pnpm del inicio rápido del código fuente se aplican solo al ejecutar desde el código fuente, no al instalar un paquete de escritorio. Versión mínima compatible de Gemini: no verificada aquí.
Verificación de conexiónLa señal de éxito
Usa las instrucciones de conexión que se muestran en tu versión instalada y luego prueba una tarea pequeña. Confirma que Gemini la manejó y que el artefacto se abre. Una descarga por sí sola no demuestra una conexión funcional.
Empiece con la app de escritorio
Configuración de Gemini en tres pasos
Descarga la aplicación primero, completa la configuración de Gemini para la versión que instalaste y luego comprueba un resultado pequeño. Esta ruta no requiere compilar OpenDesign desde el código fuente.
- 1
Descargue la app de escritorio de OpenDesign
Selecciona el paquete para tu computadora, instálalo y abre la aplicación.
Descargar OpenDesignPUNTO DE CONTROLLa aplicación de escritorio se abre. Si ya está instalada, pasa al siguiente paso; no necesitas descargarla de nuevo. - 2
Prepare su conexión con Gemini
Sigue las instrucciones de Gemini que vienen con tu versión instalada, incluida cualquier convención de contexto de proyecto GEMINI.md que utilice. Autentícate con tu cuenta de Google o una clave de API de Gemini (BYOK); las credenciales permanecen en tu máquina.
Documentación de Gemini CLI# 1. Install Gemini CLI (Node 20+) npm install -g @google/gemini-cli # or run without installing: npx https://github.com/google-gemini/gemini-cli # 2. Start it in your project and authenticate on first run cd your-project gemini # sign in with your Google account, or set GEMINI_API_KEYTomado de las notas de configuración de Gemini en esta guía publicada; verifica el comando actual en la documentación del proveedor.
PUNTO DE CONTROLAsegúrate de que el agente y la cuenta coincidan con lo que pretendías. Si el agente no está disponible, comprueba la compatibilidad antes de intentar una tarea más grande. - 3
Ejecute una tarea pequeña de Gemini
Mantén el brief inicial lo bastante modesto como para juzgar todo el ciclo, incluida una revisión.
Briefing inicialCrea una pantalla de configuración con un formulario de perfil y una confirmación de guardado. Aplica mis reglas de diseño. Verifícala en anchos de escritorio y móvil.
PUNTO DE CONTROLAbre el artefacto, prueba el estado de guardado y pide un cambio específico. La revisión comienza con el archivo generado; no termina ahí.
Si tienes la intención de ejecutar OpenDesign desde el código fuente, usa el inicio rápido técnico en su lugar.
El flujo de trabajo de diseño de Gemini
Cinco pasos por el ciclo de diseño de Gemini
Un brief de panel de operaciones, seguido desde el primer prompt hasta un archivo verificado. En cada paso ves tu entrada, la acción de Gemini CLI, la contribución de OpenDesign y tu deber de revisión.
- 1
Briefing de diseño
Mantenlo simple y breve: de tres a seis líneas. Di quién usa la pantalla, qué debe hacer y dónde se ejecutará.
- UstedRedacta el brief tú mismo y usa @ para adjuntar una captura de referencia cuando tengas una.
- GeminiLee el brief más el GEMINI.md del proyecto; si un detalle es ambiguo, pregunta en lugar de adivinar.
- OpenDesignProporciona el proyecto, la superficie de prompt del terminal y la skill que coincide con el tipo de artefacto.
- ComprobarAsegúrate de que el brief nombre los criterios de aceptación. Escribirlos ahora cuesta menos que arreglar un artefacto terminado.
- 2
Restricciones de diseño
Un sistema de diseño más unas pocas reglas firmes. Esa es la diferencia entre una salida específica de la marca y un valor genérico predeterminado.
- UstedElige un sistema de diseño, luego nombra tus breakpoints y cualquier componente que deba aparecer.
- GeminiAntes de escribir una línea, carga los tokens de DESIGN.md y las reglas de postura de GEMINI.md en el contexto.
- OpenDesignIncluye la biblioteca del sistema de diseño y vincula tu sistema elegido en la plantilla de la skill.
- ComprobarComprueba que los tokens coincidan con la marca: un acento, las fuentes correctas, el radio correcto.
- 3
Generar la interfaz
Gemini CLI escribe un archivo HTML autocontenido, que cubre diseño, estilos, interacciones y hooks estables.
- UstedEspera o responde a una pregunta aclaratoria. No hay nada que configurar aquí.
- GeminiPlanifica las secciones, escribe HTML, CSS y JavaScript, ejecuta el archivo y repara lo que falla.
- OpenDesignGuarda el artefacto en la carpeta del proyecto y lo indexa para que la vista previa pueda encontrarlo.
- ComprobarNada todavía. Revisa el archivo después de que se renderice, no leyendo su código fuente.
- 4
Vista previa
OpenDesign renderiza el archivo en los anchos que especificaste. Este es el punto donde se juzga el diseño.
- UstedCambia los anchos, prueba las interacciones y adjunta comentarios a elementos específicos.
- GeminiGemini CLI lee tus comentarios desde la vista previa y prepara la siguiente pasada.
- OpenDesignRenderiza la vista previa y expone los objetivos
data-od-idpara que los comentarios y las ediciones puedan apuntar a elementos. - VerificaciónComprueba la jerarquía, el contraste, el desbordamiento a 390px, los estados de foco y si el acento se mantiene moderado.
- 5
Revisar y verificar
Pide cambios señalando elementos de la vista previa. Cada revisión es un archivo nuevo; nada se sobrescribe sin que lo sepas.
- UstedConvierte los comentarios en solicitudes de cambio y decide cuándo está terminada la tarea.
- GeminiAplica los cambios en el mismo archivo y lo vuelve a ejecutar.
- OpenDesignMantiene las versiones en paralelo y luego exporta una imagen o el HTML cuando termines.
- VerificaciónComprueba primero el área modificada y luego la página completa una vez en cada punto de interrupción.
Recursos
Recursos de diseño de Gemini
Skills Explorar skills Sistemas de diseño Explorar sistemas Plantillas Explorar plantillas
Skills de diseño
Los tipos de artefactos que Gemini CLI puede generar en OpenDesign, con una habilidad asignada a cada tipo.
Sistemas de Diseño
Tokens y componentes del sistema de diseño que hay que vincular antes de que Gemini CLI escriba cualquier resultado.
Plantillas
Puntos de partida para presentaciones, páginas de destino y pantallas de producto dentro del flujo de trabajo de Gemini CLI.
Limitaciones
Límites de Gemini CLI, comprobaciones manuales y rutas de respaldo
- AlcanceEsta página trata sobre Gemini CLI como agente conectado a OpenDesign, no sobre todas las funciones de Gemini en sí.
- Límites de usoLos límites de uso y el coste dependen de la credencial en uso: cuenta de Google (plan gratuito) o clave de API de Gemini (BYOK). Esta página no promete nada sobre cuotas gratuitas.
- RedLos archivos de proyecto locales no implican inferencia sin conexión. Revisa la configuración del proveedor y las políticas de datos de tu agente antes de compartir entradas sensibles.
- La salida es HTMLLos artefactos son archivos HTML, no documentos de diseño vectorial editables.
- Revisión manualLa accesibilidad, el contenido real, la adecuación a la marca y la corrección de las interacciones son responsabilidad tuya de revisarlas en la vista previa. Considera cualquier autocomprobación de Gemini CLI como una primera pasada.
- AlternativaSi Gemini CLI no está disponible o una tarea falla, vuelve a las instrucciones de conexión y autenticación de la versión instalada. Conserva el error y el último artefacto funcional antes de cambiar la configuración.
Preguntas frecuentes
Preguntas frecuentes sobre Gemini y OpenDesign
¿Puede Gemini CLI producir trabajo de diseño real?
Sí — con un skill estético, un design system y referencias de imágenes reales en el contexto, Gemini CLI produce interfaces de UI de calidad de producción, responsivas, y sus sólidos modelos multimodales verifican el resultado frente a las referencias. Sin ese contexto, tiende a caer en un aspecto genérico, que es la brecha que OpenDesign cubre.
¿Necesito pagar para diseñar con Gemini CLI?
No — iniciar sesión con una cuenta de Google le da un plan gratuito generoso, y también puede aportar su propia clave de API de Gemini (BYOK) o usar Vertex AI. OpenDesign nunca actúa como proxy de sus credenciales en ningún caso.
¿Qué rasgos de Gemini CLI son más importantes para el diseño?
Dos cosas: sus modelos son fuertemente multimodales, por lo que interpreta bien las capturas de referencia, y su contexto de 1M-token puede contener todo un design system y un conjunto de referencias a la vez. Ambas cosas ayudan — pero el gusto sigue proviniendo del design system, el skill y las referencias que usted proporcione.
Elegir entre Gemini CLI y Claude Code para el diseño de frontend
Ambos son sólidos. Claude Code es conocido por decisiones de diseño específicas y conscientes del código base; la ventaja de Gemini CLI es la comprensión multimodal junto con un contexto enorme y un plan gratuito. Muchos equipos usan ambos — OpenDesign le permite cambiar de agente sin modificar su flujo de trabajo de diseño.
¿Cómo se conecta Gemini CLI a Figma?
Agregue el servidor MCP de Figma bajo mcpServers en ~/.gemini/settings.json. Gemini puede entonces obtener contexto de diseño real — componentes, variables, datos de layout — de modo que el código generado coincida con el original en lugar de aproximarlo.
Qué es Gemini CLI en la práctica
Gemini CLI es un agente de IA de código abierto (Apache-2.0) que Google distribuye para la terminal. Lee tu repositorio, edita archivos, ejecuta comandos de shell, obtiene contenido de la web y puede fundamentar sus respuestas con Google Search — planificando y verificando el trabajo a partir de tareas en lenguaje natural, en lugar de limitarse a completar líneas. El mismo motor también impulsa al agente Gemini Code Assist dentro de VS Code.
Para el trabajo de diseño, destacan dos propiedades. Sus modelos son nativamente multimodales, así que puedes darle una captura de pantalla y razona sobre el layout real. Y su ventana de contexto llega hasta 1M de tokens, lo bastante grande para contener de una vez todo tu sistema de diseño, tu biblioteca de componentes y tu conjunto de referencias, en lugar de resumirlos y perderlos por el camino.
Archivos de contexto: Gemini CLI lee un archivo GEMINI.md para el contexto persistente del proyecto — el lugar natural donde codificar tus convenciones de diseño, tus tokens y tus checklists de revisión. Los ajustes personales y de equipo se superponen por encima.
Herramientas integradas + MCP: Incluye de serie herramientas de archivos, shell, web-fetch y Google Search, y admite servidores MCP (configurados en ~/.gemini/settings.json) para añadir contexto externo, como un archivo Figma en vivo.
Gratis para empezar: Iniciar sesión con una cuenta personal de Google da un generoso nivel gratuito de solicitudes a Gemini; también puedes traer tu propia clave de API de Gemini o usar Vertex AI.
Credencial: Cuenta de Google (nivel gratuito) o clave de API de Gemini desde AI Studio (BYOK) o Vertex AI
Proveedor: Google
Licencia: Apache-2.0, código abierto
Para el trabajo de diseño, destacan dos propiedades. Sus modelos son nativamente multimodales, así que puedes darle una captura de pantalla y razona sobre el layout real. Y su ventana de contexto llega hasta 1M de tokens, lo bastante grande para contener de una vez todo tu sistema de diseño, tu biblioteca de componentes y tu conjunto de referencias, en lugar de resumirlos y perderlos por el camino.
Archivos de contexto: Gemini CLI lee un archivo GEMINI.md para el contexto persistente del proyecto — el lugar natural donde codificar tus convenciones de diseño, tus tokens y tus checklists de revisión. Los ajustes personales y de equipo se superponen por encima.
Herramientas integradas + MCP: Incluye de serie herramientas de archivos, shell, web-fetch y Google Search, y admite servidores MCP (configurados en ~/.gemini/settings.json) para añadir contexto externo, como un archivo Figma en vivo.
Gratis para empezar: Iniciar sesión con una cuenta personal de Google da un generoso nivel gratuito de solicitudes a Gemini; también puedes traer tu propia clave de API de Gemini o usar Vertex AI.
Credencial: Cuenta de Google (nivel gratuito) o clave de API de Gemini desde AI Studio (BYOK) o Vertex AI
Proveedor: Google
Licencia: Apache-2.0, código abierto
Por qué encajan los modelos multimodales y un contexto enorme en el diseño
La ventaja de Gemini CLI en diseño viene de dos propiedades del modelo — pero, como con cualquier agente, el criterio estético sigue teniendo que aportarlo alguien.
Sólida comprensión multimodal: Como los modelos Gemini son nativamente multimodales, el agente lee bien las capturas de referencia — comparando su salida renderizada con la imagen en lugar de adivinar a partir de una descripción en prosa.
Una ventana de contexto de 1M de tokens: Un contexto amplio hace que todo el sistema de diseño, los tokens y muchos estados de referencia quepan a la vez, de modo que el agente reutiliza tus primitivas reales en vez de inventar estilos puntuales.
Convenciones en GEMINI.md: Un GEMINI.md (más el servidor MCP de Figma) orienta al agente hacia tus tokens, tus componentes y tus especificaciones reales, para que trabaje a favor de una marca y no de un aspecto por defecto.
El criterio estético viene de tres entradas que tú aportas: un sistema de diseño, una skill y imágenes de referencia reales.
La lección es la misma que enseña cualquier agente: Gemini CLI no tiene criterio estético por defecto. Produce buen diseño cuando le das restricciones — un sistema de diseño, una skill estética y referencias concretas. OpenDesign empaqueta exactamente esas entradas, y por eso ambos encajan (más abajo).
Sólida comprensión multimodal: Como los modelos Gemini son nativamente multimodales, el agente lee bien las capturas de referencia — comparando su salida renderizada con la imagen en lugar de adivinar a partir de una descripción en prosa.
Una ventana de contexto de 1M de tokens: Un contexto amplio hace que todo el sistema de diseño, los tokens y muchos estados de referencia quepan a la vez, de modo que el agente reutiliza tus primitivas reales en vez de inventar estilos puntuales.
Convenciones en GEMINI.md: Un GEMINI.md (más el servidor MCP de Figma) orienta al agente hacia tus tokens, tus componentes y tus especificaciones reales, para que trabaje a favor de una marca y no de un aspecto por defecto.
El criterio estético viene de tres entradas que tú aportas: un sistema de diseño, una skill y imágenes de referencia reales.
La lección es la misma que enseña cualquier agente: Gemini CLI no tiene criterio estético por defecto. Produce buen diseño cuando le das restricciones — un sistema de diseño, una skill estética y referencias concretas. OpenDesign empaqueta exactamente esas entradas, y por eso ambos encajan (más abajo).
Configurar Gemini CLI para el trabajo de diseño desde cero
La secuencia de configuración: instalar → autenticar → configurar GEMINI.md → añadir una skill → habilitar la verificación en navegador.
Codifica tus reglas de diseño: Pon tus tokens, primitivas y convenciones en GEMINI.md y orienta a Gemini hacia ellos, para que la salida responda a una marca en lugar de caer en un aspecto genérico.
Añade verificación en navegador: Conecta un MCP de Playwright o de navegador para que Gemini renderice en un navegador real y compruebe su salida en distintos breakpoints, en lugar de limitarse a confirmar que la build pasa.
Usa la sección de configuración actual para los comandos y los detalles específicos de versión, que pueden cambiar.
Ejemplo de comandos histórico de la guía anterior; verifica la sintaxis actual en la documentación del proveedor enlazada.
Codifica tus reglas de diseño: Pon tus tokens, primitivas y convenciones en GEMINI.md y orienta a Gemini hacia ellos, para que la salida responda a una marca en lugar de caer en un aspecto genérico.
Añade verificación en navegador: Conecta un MCP de Playwright o de navegador para que Gemini renderice en un navegador real y compruebe su salida en distintos breakpoints, en lugar de limitarse a confirmar que la build pasa.
Usa la sección de configuración actual para los comandos y los detalles específicos de versión, que pueden cambiar.
# 1. Instala Gemini CLI (Node 20+)
npm install -g @google/gemini-cli
# o ejecútalo sin instalarlo: npx https://github.com/google-gemini/gemini-cli
# 2. Inícialo en tu proyecto y autentícate en la primera ejecución
cd your-project
gemini # inicia sesión con tu cuenta de Google, o define GEMINI_API_KEY
# 3. Genera el contexto del proyecto
/init # crea un GEMINI.md para este proyecto
# 4. Conecta el servidor MCP de Figma (opcional, para el traspaso de diseño)
# añádelo bajo "mcpServers" en ~/.gemini/settings.jsonEjemplo de comandos histórico de la guía anterior; verifica la sintaxis actual en la documentación del proveedor enlazada.
Convertir capturas de pantalla en interfaz de usuario con Gemini CLI
El bucle de diseño con mayor impacto usando Gemini CLI consiste en convertir una imagen de referencia en una interfaz funcional y responsive, e iterar hasta que coincida — apoyándote en el modelo multimodal para comparar la salida con la referencia.
Parte de las referencias visuales más claras que tengas — e incluye varios estados (escritorio y móvil, hover, vacío, carga), no solo una imagen principal ideal.
Sé específico en el prompt; los prompts vagos producen interfaces genéricas incluso con un modelo potente.
Mantén tu sistema de diseño y tus convenciones en GEMINI.md, y dile a Gemini dónde viven los tokens y las primitivas canónicas.
Levanta un servidor de desarrollo y haz que Gemini renderice en un navegador real, redimensionando a distintos breakpoints para comprobar el resultado.
Itera haciendo que Gemini compare su implementación con las capturas — no que se limite a confirmar que compila.
Referencia una imagen con @ para adjuntarla al prompt y luego da restricciones concretas:
Mantén los prompts pequeños y enfocados, haz commit de las buenas iteraciones y revierte las malas (avisando a Gemini cuando reviertas), para que cada pasada parta de una base limpia.
Ejemplo de comandos histórico de la guía anterior; verifica la sintaxis actual en la documentación del proveedor enlazada.
Parte de las referencias visuales más claras que tengas — e incluye varios estados (escritorio y móvil, hover, vacío, carga), no solo una imagen principal ideal.
Sé específico en el prompt; los prompts vagos producen interfaces genéricas incluso con un modelo potente.
Mantén tu sistema de diseño y tus convenciones en GEMINI.md, y dile a Gemini dónde viven los tokens y las primitivas canónicas.
Levanta un servidor de desarrollo y haz que Gemini renderice en un navegador real, redimensionando a distintos breakpoints para comprobar el resultado.
Itera haciendo que Gemini compare su implementación con las capturas — no que se limite a confirmar que compila.
Referencia una imagen con @ para adjuntarla al prompt y luego da restricciones concretas:
Mantén los prompts pequeños y enfocados, haz commit de las buenas iteraciones y revierte las malas (avisando a Gemini cuando reviertas), para que cada pasada parta de una base limpia.
gemini
# en el prompt:
> @reference-desktop.png @reference-mobile.png
Implementa este diseño en React + Vite + Tailwind + TypeScript.
Reutiliza mis componentes y tokens del sistema de diseño de GEMINI.md.
Iguala el espaciado, el layout y la jerarquía; hazlo responsive.
Renderízalo en el navegador e itera hasta que coincida con las referencias
en todos los breakpoints.Ejemplo de comandos histórico de la guía anterior; verifica la sintaxis actual en la documentación del proveedor enlazada.
GEMINI.md, servidores MCP y extensiones
Tres puntos de extensión hacen que Gemini CLI sea práctico para el trabajo de diseño sostenido, y los tres encajan limpiamente en un flujo de diseño abierto.
Contexto de GEMINI.md: Las reglas del proyecto viven en un GEMINI.md en la raíz del repositorio (con capas globales y de equipo). Es el hogar duradero de tus convenciones de diseño, leído en cada ejecución.
Servidores MCP: Configura servidores MCP en ~/.gemini/settings.json — la forma portátil de incorporar contexto de diseño y herramientas externas, y muy especialmente el servidor MCP de Figma, que funcionan en distintos agentes, no solo en Gemini.
Extensiones y herramientas integradas: Las extensiones de Gemini CLI y sus herramientas integradas de Google Search, archivos, shell y web-fetch le permiten reunir referencias y ejecutar el bucle de verificación sin salir de la terminal.
Son capacidades portátiles y multiagente — justo el tipo de cosa que OpenDesign está hecho para orquestar, en vez de recrearla proyecto a proyecto.
Contexto de GEMINI.md: Las reglas del proyecto viven en un GEMINI.md en la raíz del repositorio (con capas globales y de equipo). Es el hogar duradero de tus convenciones de diseño, leído en cada ejecución.
Servidores MCP: Configura servidores MCP en ~/.gemini/settings.json — la forma portátil de incorporar contexto de diseño y herramientas externas, y muy especialmente el servidor MCP de Figma, que funcionan en distintos agentes, no solo en Gemini.
Extensiones y herramientas integradas: Las extensiones de Gemini CLI y sus herramientas integradas de Google Search, archivos, shell y web-fetch le permiten reunir referencias y ejecutar el bucle de verificación sin salir de la terminal.
Son capacidades portátiles y multiagente — justo el tipo de cosa que OpenDesign está hecho para orquestar, en vez de recrearla proyecto a proyecto.
Gemini CLI vs Codex vs Claude Code vs Cursor para diseño
No hay un único ganador para el trabajo de diseño — cada agente tiene una fortaleza distinta, y los equipos con experiencia los combinan. Un resumen justo:
Gemini CLI — Sólida comprensión multimodal de imágenes y un contexto de 1M de tokens; código abierto con nivel gratuito — Trabajo con muchas capturas de pantalla y mantener todo un sistema de diseño en contexto
Codex — Buen acabado visual con una skill de frontend; builds asíncronos en sandbox — Builds asíncronos delegados y reglas portátiles en AGENTS.md
Claude Code — Decisiones de diseño concretas (hex, espaciado, tipografía) y UX consciente del código base — Razonamiento de frontend y refactorizaciones con contexto amplio
Cursor — Bucle visual de construir y ver con vista previa en vivo y ediciones inline — Trabajo de UI de iterar y observar, muy pegado al IDE
El veredicto recurrente de la comunidad es que el criterio estético viene de las personas: todos caen por defecto en una estética genérica si no hay skills, referencias y restricciones. Ese es el problema real que hay que resolver — y tiene forma de herramienta de diseño, no de modelo.
Agente — Fortaleza en diseño — Ideal para
Gemini CLI — Sólida comprensión multimodal de imágenes y un contexto de 1M de tokens; código abierto con nivel gratuito — Trabajo con muchas capturas de pantalla y mantener todo un sistema de diseño en contexto
Codex — Buen acabado visual con una skill de frontend; builds asíncronos en sandbox — Builds asíncronos delegados y reglas portátiles en AGENTS.md
Claude Code — Decisiones de diseño concretas (hex, espaciado, tipografía) y UX consciente del código base — Razonamiento de frontend y refactorizaciones con contexto amplio
Cursor — Bucle visual de construir y ver con vista previa en vivo y ediciones inline — Trabajo de UI de iterar y observar, muy pegado al IDE
El veredicto recurrente de la comunidad es que el criterio estético viene de las personas: todos caen por defecto en una estética genérica si no hay skills, referencias y restricciones. Ese es el problema real que hay que resolver — y tiene forma de herramienta de diseño, no de modelo.
Agente — Fortaleza en diseño — Ideal para
Errores comunes y cómo evitar el aspecto de “AI slop”
La queja más común sobre el diseño generado por IA es que parece genérico — degradados suaves, paneles flotantes, esquinas redondeadas enormes, sombras dramáticas, un aire de Inter y morado que «grita que esto lo ha hecho una IA». Otros problemas reportados incluyen layouts móviles rotos y instrucciones que se filtran al texto de la interfaz. Nada de esto es exclusivo de Gemini CLI; es lo que pasa cuando cualquier agente trabaja sin un contexto de diseño curado.
Añade una skill estética: Una skill de diseño curada obliga al agente a comprometerse con una dirección real en vez de con el aspecto por defecto.
Verifica en un navegador real: Usa el modelo multimodal para renderizar y autocomprobar en distintos breakpoints, para que los layouts no se rompan en silencio en móvil.
Aporta tokens y referencias: Los tokens de diseño reales y las capturas de referencia son la palanca más importante para la calidad de la salida.
Codifica reglas en GEMINI.md: Pon reglas del estilo «nada de tarjetas hero, máximo dos tipografías, jerarquía con la marca por delante» donde el agente las lea en cada ejecución.
Fíjate en que toda mitigación consiste en dar al agente un contexto de diseño curado. Mantener ese contexto a mano, proyecto a proyecto, es la carga de trabajo que OpenDesign elimina.
Añade una skill estética: Una skill de diseño curada obliga al agente a comprometerse con una dirección real en vez de con el aspecto por defecto.
Verifica en un navegador real: Usa el modelo multimodal para renderizar y autocomprobar en distintos breakpoints, para que los layouts no se rompan en silencio en móvil.
Aporta tokens y referencias: Los tokens de diseño reales y las capturas de referencia son la palanca más importante para la calidad de la salida.
Codifica reglas en GEMINI.md: Pon reglas del estilo «nada de tarjetas hero, máximo dos tipografías, jerarquía con la marca por delante» donde el agente las lea en cada ejecución.
Fíjate en que toda mitigación consiste en dar al agente un contexto de diseño curado. Mantener ese contexto a mano, proyecto a proyecto, es la carga de trabajo que OpenDesign elimina.
Usar Gemini CLI como el agente dentro de OpenDesign
OpenDesign es la capa de diseño de código abierto que el flujo anterior no deja de reclamar. Trata a Gemini CLI como adaptador de primera parte y lo envuelve en una biblioteca curada de skills y sistemas de diseño, un pipeline de render estructurado y una interfaz de escritorio local — así el contexto de diseño que hace bueno a Gemini está ahí desde la primera ejecución, en lugar de montarse a mano cada vez. Ambos son de código abierto y local-first, lo que hace que la combinación encaje de forma natural.
Autentícate con tu cuenta de Google o tu clave de API de Gemini (BYOK) — las credenciales se quedan en tu máquina y nunca pasan por nosotros.
Elige un sistema de diseño y una skill, y genera presentaciones, prototipos y landing pages con un criterio estético consistente.
Cada artefacto y cada archivo DESIGN.md viven en tu propio repositorio, no en una nube alojada.
El mismo agente Gemini CLI, la misma clave — más un flujo de diseño real, portátil y de código abierto a su alrededor. Es local-first y Apache-2.0, así que nada de tu trabajo ni de tus credenciales sale de tu máquina.
Instala OpenDesign y selecciona Gemini CLI como tu agente.
Autentícate con tu cuenta de Google o tu clave de API de Gemini (BYOK) — las credenciales se quedan en tu máquina y nunca pasan por nosotros.
Elige un sistema de diseño y una skill, y genera presentaciones, prototipos y landing pages con un criterio estético consistente.
Cada artefacto y cada archivo DESIGN.md viven en tu propio repositorio, no en una nube alojada.
El mismo agente Gemini CLI, la misma clave — más un flujo de diseño real, portátil y de código abierto a su alrededor. Es local-first y Apache-2.0, así que nada de tu trabajo ni de tus credenciales sale de tu máquina.
Instala OpenDesign y selecciona Gemini CLI como tu agente.
¿OpenDesign está afiliado a Google?
No. OpenDesign es independiente; Gemini es una marca registrada de Google.