Gemini CLI para diseño.

Qué es realmente Gemini CLI

Gemini CLI es un agente de IA de código abierto (Apache-2.0) que Google ofrece para la terminal. Lee tu repositorio, edita archivos, ejecuta comandos de shell, consulta la web y puede fundamentar las respuestas con Google Search, planificando y verificando el trabajo a partir de tareas en lenguaje natural en lugar de simplemente completar líneas. El mismo motor también impulsa el agente de Gemini Code Assist dentro de VS Code.

Para el trabajo de diseño destacan dos propiedades. Sus modelos son nativamente multimodales, así que puedes entregarle una captura de pantalla y razona sobre la disposición real. Y su ventana de contexto alcanza hasta 1M de tokens, lo bastante grande para abarcar a la vez todo tu sistema de diseño, tu biblioteca de componentes y tu conjunto de referencias en lugar de resumirlos.

• Archivos de contexto: Gemini CLI lee un archivo GEMINI.md para obtener contexto persistente del proyecto, el lugar natural para codificar tus convenciones de diseño, tokens y listas de revisión. Las configuraciones personales y de equipo se superponen encima.
• Herramientas integradas + MCP: Incluye de fábrica 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 de Figma en vivo.
• Gratis para empezar: Iniciar sesión con una cuenta personal de Google ofrece un generoso nivel gratuito de solicitudes a Gemini; también puedes aportar una clave de API de Gemini o usar Vertex AI.

• Proveedor: Google
• Credencial: cuenta de Google (nivel gratuito) o clave de API de Gemini desde AI Studio (BYOK) o Vertex AI
• Licencia: Apache-2.0, código abierto

Por qué los modelos multimodales y un enorme contexto encajan con el diseño

La ventaja de Gemini CLI en diseño proviene de dos propiedades del modelo, pero, como con todo agente, el buen gusto aún hay que aportarlo.

• Sólida comprensión multimodal: Como los modelos de Gemini son nativamente multimodales, el agente lee bien las capturas de pantalla de referencia, comparando su resultado renderizado con una imagen en lugar de adivinar a partir de una descripción en prosa.
• Una ventana de contexto de 1M de tokens: Un contexto amplio significa que todo el sistema de diseño, los tokens y muchos estados de referencia caben a la vez, así que el agente reutiliza tus primitivas reales en lugar de inventar estilos puntuales.
• Convenciones en GEMINI.md: Un GEMINI.md (más el servidor MCP de Figma) dirige al agente hacia tus tokens, componentes y especificaciones reales, así que trabaja sobre una marca en lugar de un aspecto por defecto.

La lección es la misma que enseña todo agente: Gemini CLI no tiene buen gusto por defecto. Produce buen diseño cuando le das restricciones: un sistema de diseño, un skill estético y referencias concretas. Open Design empaqueta exactamente esas entradas, y por eso ambos encajan (más abajo).

Configura Gemini CLI para trabajo de diseño, desde cero

Este es el camino completo desde una máquina limpia hasta un Gemini CLI capaz de construir y verificar interfaces.

# 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_KEY

# 3. Generate project context
/init             # scaffolds a GEMINI.md for this project

# 4. Wire the Figma MCP server (optional, for design handoff)
#    add it under "mcpServers" in ~/.gemini/settings.json

• Codifica tus reglas de diseño: Pon tus tokens, primitivas y convenciones en GEMINI.md y apunta a Gemini hacia ellos, para que el resultado coincida con una marca en lugar de recurrir a un aspecto genérico.
• Añade verificación en el navegador: Integra Playwright o un MCP de navegador para que Gemini renderice en un navegador real y compruebe su resultado en distintos breakpoints, en lugar de solo confirmar que la compilación pasa.

El flujo de captura de pantalla a interfaz

El bucle de diseño de mayor apalancamiento con Gemini CLI es convertir una imagen de referencia en una interfaz funcional y responsiva e iterar hasta que coincida, apoyándose en el modelo multimodal para comparar el resultado con la referencia.

1. Parte de las referencias visuales más claras que tengas, e incluye múltiples estados (escritorio y móvil, hover, vacío, cargando), no solo una sola toma principal.
2. Sé específico en el prompt; los prompts vagos producen interfaces genéricas incluso con un modelo potente.
3. Mantén tu sistema de diseño y tus convenciones en GEMINI.md, e indícale a Gemini dónde viven los tokens y las primitivas canónicas.
4. Ejecuta un servidor de desarrollo y haz que Gemini renderice en un navegador real, redimensionando a los breakpoints para comprobar el resultado.
5. Itera haciendo que Gemini compare su implementación con las capturas de pantalla, no que solo confirme que compila.

Referencia una imagen con @ para adjuntarla al prompt, y luego da restricciones concretas:

gemini
# in the prompt:
> @reference-desktop.png @reference-mobile.png
  Implement this design in React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens from GEMINI.md.
  Match spacing, layout, and hierarchy; make it responsive.
  Render it in the browser and iterate until it matches the references
  across breakpoints.

Mantén los prompts pequeños y enfocados, confirma (commit) las buenas iteraciones y revierte las malas (indicándole a Gemini cuándo reviertes), para que cada pasada se construya sobre una base limpia.

GEMINI.md, MCP y extensiones

Tres puntos de extensión hacen que Gemini CLI sea práctico para un trabajo de diseño sostenido, y los tres se asignan limpiamente a un flujo de trabajo de diseño abierto.

• Contexto en GEMINI.md: Las reglas del proyecto viven en un GEMINI.md en la raíz del repositorio (con capas global 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, sobre todo 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.

Estas son capacidades portátiles y multiagente, exactamente el tipo de cosas que Open Design está diseñado para orquestar, en lugar de recrearlas en cada 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:

El veredicto recurrente de la comunidad es que el buen gusto proviene de las personas: todos recurren a una estética genérica sin skills, referencias ni restricciones. Ese es el verdadero problema a resolver, y tiene forma de herramienta de diseño, no de modelo.

Errores, y cómo evitar el aspecto de «basura de IA»

La queja más común sobre el diseño generado por IA es que parece genérico: degradados suaves, paneles flotantes, esquinas redondeadas excesivas, sombras dramáticas, un rollo de Inter y morado que «grita que esto lo hizo una IA». Otros problemas reportados incluyen diseños móviles rotos e instrucciones que se filtran en los textos de la interfaz. Ninguno de estos es exclusivo de Gemini CLI; es lo que ocurre cuando cualquier agente se ejecuta sin un contexto de diseño curado.

• Añade un skill estético: Un skill de diseño curado obliga al agente a comprometerse con una dirección real en lugar del aspecto por defecto.
• Verifica en un navegador real: Usa el modelo multimodal para renderizar y autocomprobarse en distintos breakpoints, de modo que los diseños no se rompan silenciosamente en móvil.
• Aporta tokens y referencias: Los tokens de diseño reales y las capturas de pantalla de referencia son la mayor palanca individual sobre la calidad del resultado.
• Codifica reglas en GEMINI.md: Pon reglas del estilo «nada de tarjetas hero, máximo dos tipografías, jerarquía con la marca primero» donde el agente las lea en cada ejecución.

Fíjate en que toda mitigación consiste en darle al agente un contexto de diseño curado. Mantener ese contexto a mano, proyecto a proyecto, es el trabajo tedioso que Open Design elimina.

Diseñar con Gemini CLI dentro de Open Design

Open Design es la capa de diseño de código abierto que el flujo de trabajo anterior no deja de pedir. Trata a Gemini CLI como un adaptador de primera categoría y lo envuelve en una biblioteca curada de skills y sistemas de diseño, una canalización de renderizado estructurada y una interfaz de escritorio local, para que el contexto de diseño que hace bueno a Gemini esté ahí desde la primera ejecución, no se arme a mano cada vez. Ambos son de código abierto y local-first, lo que hace que el emparejamiento sea natural.

1. Instala Open Design y selecciona Gemini CLI como tu agente.
2. 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 nuestros servidores.
3. Elige un sistema de diseño y un skill, y luego genera presentaciones, prototipos y páginas de aterrizaje con un gusto consistente.
4. Cada artefacto y archivo DESIGN.md vive en tu propio repositorio, no en una nube alojada.

El mismo agente Gemini CLI, la misma clave, más un flujo de trabajo 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.

Preguntas frecuentes

1. 01 ¿Gemini CLI puede realmente hacer trabajo de diseño? +

   Sí; con un skill estético, un sistema de diseño e imágenes de referencia reales en contexto, Gemini CLI produce interfaces responsivas de calidad de producción, y sus sólidos modelos multimodales verifican el resultado frente a las referencias. Sin ese contexto tiende a recurrir a un aspecto genérico, que es la brecha que Open Design rellena.

2. 02 ¿Necesito pagar para diseñar con Gemini CLI? +

   No; iniciar sesión con una cuenta de Google ofrece un generoso nivel gratuito, y también puedes aportar una clave de API de Gemini (BYOK) o usar Vertex AI. Open Design nunca enruta tus credenciales en ningún caso.

3. 03 ¿Qué hace que Gemini CLI sea bueno para el diseño en particular? +

   Dos cosas: sus modelos son fuertemente multimodales, así que lee bien las capturas de pantalla de referencia, y su contexto de 1M de tokens puede abarcar a la vez todo un sistema de diseño y un conjunto de referencias. Ambas ayudan, pero el buen gusto aún proviene del sistema de diseño, el skill y las referencias que tú aportas.

4. 04 ¿Gemini CLI o Claude Code para diseño de frontend? +

   Ambos son potentes. Claude Code es conocido por decisiones de diseño específicas y conscientes de la base de código; la ventaja de Gemini CLI es la comprensión multimodal más un enorme contexto y un nivel gratuito. Muchos equipos usan ambos: Open Design te permite cambiar de agente sin cambiar tu flujo de trabajo de diseño.

5. 05 ¿Cómo conecto Gemini CLI con Figma? +

   Añade el servidor MCP de Figma en mcpServers, dentro de ~/.gemini/settings.json. Gemini puede entonces extraer contexto de diseño real (componentes, variables, datos de disposición) para que el código generado coincida con la fuente en lugar de aproximarla.

6. 06 ¿Open Design está afiliado a Google? +

   No. Gemini CLI es un producto de Google; Open Design es un proyecto independiente de código abierto que lo admite como adaptador de primera categoría. Gemini es una marca registrada de Google.

7. 07 ¿Están seguros mis archivos y mis credenciales? +

   Sí; Open Design es local-first y Apache-2.0. Tus archivos, artefactos y DESIGN.md permanecen en tu propio repositorio, y tus credenciales de Google las usa directamente tu agente, nunca se enrutan a través de los servidores de Open Design.