Mistral Vibe CLI para diseño.

Qué es realmente Mistral Vibe CLI

Mistral Vibe CLI es un agente de programación de código abierto (Apache-2.0) que Mistral AI distribuye para la terminal. Ofrece una interfaz de chat interactiva con herramientas para manipular archivos, buscar en el código, controlar versiones y ejecutar comandos, y analiza automáticamente la estructura de archivos de tu proyecto y el estado de Git para dar al agente contexto relevante. Está impulsado por los modelos de programación Devstral de Mistral, planificando y verificando el trabajo a partir de tareas en lenguaje natural en lugar de limitarse a completar líneas.

Para el trabajo de diseño destacan dos propiedades. Se ejecuta sobre la familia Devstral de pesos abiertos de Mistral (Devstral 2 y el más pequeño Devstral Small 2), así que puedes ejecutar el agente contra la API de Mistral en la nube o contra modelos locales, útil para trabajo de diseño sensible a la privacidad o sin conexión. Y habla el Agent Client Protocol, así que el mismo agente puede gobernar editores y herramientas, no solo una sesión de terminal.

• Archivos de configuración: Vibe CLI se configura mediante un archivo config.toml (a nivel de proyecto en ./.vibe/config.toml, con un respaldo en ~/.vibe/config.toml). Es un lugar práctico para codificar tus proveedores, tu elección de modelo y los ajustes del proyecto.
• Herramientas integradas + MCP: Incluye herramientas de archivos, búsqueda, control de versiones y ejecución de comandos, y admite servidores MCP (configurados en una sección [[mcp_servers]]) para añadir contexto externo como un archivo de Figma en vivo.
• BYOK o local: Autentícate con una clave de API de Mistral desde la consola de Mistral, o apúntalo a modelos locales/compatibles para que funcione totalmente sin conexión.

• Fabricante: Mistral AI
• Credencial: clave de API de Mistral (BYOK) desde la consola de Mistral, o modelos locales / compatibles
• Licencia: Apache-2.0, código abierto

Por qué un agente de programación de pesos abiertos encaja con el diseño

La ventaja de Vibe CLI para el diseño viene de su familia de modelos de pesos abiertos y de su alcance de protocolo, pero, como ocurre con todo agente, el criterio estético hay que aportarlo igualmente.

• Modelos de programación Devstral: Vibe se ejecuta sobre la familia Devstral de Mistral, modelos ajustados para programación y construidos para el trabajo agéntico con múltiples archivos, así que el agente edita por todo un código base de frontend real en lugar de emitir fragmentos aislados.
• Pesos abiertos y amigable con lo local: Devstral Small 2 es lo bastante pequeño para ejecutarse en hardware de consumo, así que el trabajo de diseño puede mantenerse totalmente en local y sin conexión: las referencias y el código no tienen que salir nunca de tu máquina.
• Convenciones en config.toml + contexto: La configuración del proyecto y tus propias instrucciones apuntan al agente hacia tus tokens, componentes y especificaciones reales, para que trabaje contra una marca en lugar de un aspecto por defecto.

La lección es la misma que enseña todo agente: Vibe 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. Open Design empaqueta exactamente esos insumos, por lo que ambos encajan (más abajo se explica).

Configura Vibe CLI para el trabajo de diseño, desde cero

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

# 1. Install Mistral Vibe CLI
uv tool install mistral-vibe
# or: pip install mistral-vibe

# 2. Run the setup wizard to register your API key
vibe --setup     # saves config to ~/.vibe/config.toml and ~/.vibe/.env
#    or set it directly:  export MISTRAL_API_KEY=...

# 3. Start Vibe in your project
cd your-project
vibe

# 4. Wire the Figma MCP server (optional, for design handoff)
#    add an [[mcp_servers]] entry in your config.toml

• Codifica tus reglas de diseño: Mantén tus tokens, primitivos y convenciones donde el agente los lea y apunta Vibe hacia ellos, para que el resultado se ajuste a una marca en lugar de caer en un aspecto genérico por defecto.
• Añade verificación en el navegador: Conecta un Playwright o un MCP de navegador para que Vibe renderice en un navegador real y compruebe su resultado en los distintos breakpoints, en lugar de limitarse a confirmar que el build pasa.

El flujo de referencia a interfaz

El bucle de diseño de mayor rendimiento con Vibe CLI consiste en convertir una referencia clara en una interfaz funcional y adaptable e iterar hasta que coincida, apoyándose en las herramientas del agente para renderizar, inspeccionar y corregir su propio resultado.

1. Parte de las referencias más claras que tengas, y describe varios estados (escritorio y móvil, hover, vacío, cargando), no solo una imagen 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 donde Vibe las lea, e indícale dónde viven los tokens y los primitivos canónicos.
4. Levanta un servidor de desarrollo y haz que Vibe renderice en un navegador real, redimensionando a los distintos breakpoints para comprobar el resultado.
5. Itera haciendo que Vibe compare su implementación con las referencias, no solo que confirme que compila.

Referencia archivos con @ (Vibe autocompleta las rutas de archivo) y maneja los comandos de barra con /, luego da restricciones concretas:

vibe
# in the prompt:
> @design-spec.md @tokens.css
  Implement this design in React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens.
  Match spacing, layout, and hierarchy; make it responsive.
  Run the dev server, render it in the browser, and iterate until
  it matches the references across breakpoints.

Mantén los prompts breves y enfocados, confirma las buenas iteraciones y revierte las malas (avisando a Vibe cuando reviertas), para que cada pasada parta de una base limpia.

config.toml, MCP y ACP

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

• config.toml: Las reglas de proyecto y los ajustes de proveedor/modelo viven en un config.toml (a nivel de proyecto, con un respaldo en ~/.vibe). Es el hogar duradero de cómo se integra el agente en tu proyecto, leído en cada ejecución.
• Servidores MCP: Configura servidores MCP en tu config.toml ([[mcp_servers]], con transportes HTTP, HTTP transmitible y stdio): la forma portátil de incorporar contexto de diseño y herramientas externas —lo más relevante, el servidor MCP de Figma— que funcionan en distintos agentes, no solo en Vibe.
• Agent Client Protocol: Vibe habla ACP, así que el mismo agente puede gobernarse desde editores y otros clientes ACP. Así es exactamente como Open Design lo integra: sobre ACP mediante el binario vibe-acp.

Son capacidades portátiles y multiagente: exactamente el tipo de cosa que Open Design está diseñado para orquestar, en lugar de recrearla en cada proyecto.

Vibe CLI frente a Codex, Claude Code, Cursor y Gemini CLI 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 honesto:

El veredicto recurrente de la comunidad es que el criterio estético proviene de las personas: todos ellos tienden por defecto 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 comunes 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 luce genérico: degradados suaves, paneles flotantes, esquinas redondeadas exageradas, sombras dramáticas, un aire de Inter y morado que «grita que esto lo hizo una IA». Otros problemas reportados incluyen maquetaciones móviles rotas e instrucciones que se filtran en el texto de la interfaz. Ninguno de estos es exclusivo de Vibe CLI; son lo que ocurre cuando cualquier agente se ejecuta 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 lugar del aspecto por defecto.
• Verifica en un navegador real: Haz que Vibe renderice y se autoverifique en los distintos breakpoints para que las maquetaciones no se rompan en silencio en el móvil.
• Aporta tokens y referencias: Los tokens de diseño reales y las capturas de referencia son la mayor palanca sobre la calidad del resultado.
• Codifica reglas en la configuración y el contexto: Coloca reglas del estilo «sin 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 dar 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 Vibe CLI dentro de Open Design

Open Design es la capa de diseño de código abierto que el flujo de trabajo anterior reclama una y otra vez. Trata a Mistral Vibe CLI como un adaptador de primera clase —gobernándolo sobre ACP mediante el binario vibe-acp— 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. De modo que el contexto de diseño que hace bueno a Vibe está presente desde la primera ejecución, no ensamblado a mano cada vez. Ambos son de código abierto y local-first, lo que hace de esta combinación un encaje natural.

1. Instala Open Design y selecciona Mistral Vibe CLI como tu agente.
2. Autentícate con tu clave de API de Mistral (BYOK) o apunta Vibe a modelos locales: las credenciales permanecen en tu máquina y nunca se enrutan a través de nosotros.
3. Elige un sistema de diseño y una skill, y luego genera presentaciones, prototipos y páginas de aterrizaje con un criterio estético consistente.
4. Cada artefacto y archivo DESIGN.md vive en tu propio repositorio, no en una nube alojada.

El mismo agente Vibe 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.

Preguntas frecuentes

1. 01 ¿De verdad puede Mistral Vibe CLI hacer trabajo de diseño? +

   Sí: con una skill estética, un sistema de diseño y referencias reales en contexto, Vibe CLI produce interfaces adaptables de calidad de producción, y sus modelos Devstral editan por todo un código base de frontend real. Sin ese contexto tiende a caer en un aspecto genérico, que es la brecha que Open Design llena.

2. 02 ¿Cómo autentico Vibe CLI? +

   Ejecuta el asistente de configuración con vibe --setup para registrar una clave de API de Mistral (desde la consola de Mistral), o define MISTRAL_API_KEY en tu entorno. También puede ejecutarse contra modelos locales o compatibles, totalmente sin conexión. En cualquier caso, Open Design nunca enruta tus credenciales.

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

   Es un agente Apache-2.0 y nativo de ACP impulsado por los modelos de programación Devstral de pesos abiertos de Mistral, así que puedes ejecutarlo en local para trabajo sensible a la privacidad y editar por todo un código base real. Pero el criterio estético sigue viniendo del sistema de diseño, la skill y las referencias que tú aportes.

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

   Ambos son potentes. Claude Code es conocido por decisiones de diseño concretas y conscientes del código base; la ventaja de Vibe CLI es una pila Devstral de pesos abiertos que puedes ejecutar en local y una licencia Apache-2.0. Muchos equipos usan los dos: Open Design te permite cambiar de agente sin cambiar tu flujo de diseño.

5. 05 ¿Cómo conecto Vibe CLI a Figma? +

   Añade el servidor MCP de Figma como una entrada [[mcp_servers]] en tu config.toml. Vibe puede entonces extraer contexto de diseño real —componentes, variables, datos de maquetación— para que el código generado coincida con la fuente en lugar de aproximarla.

6. 06 ¿Está Open Design afiliado a Mistral AI? +

   No. Mistral Vibe CLI es un producto de Mistral AI; Open Design es un proyecto de código abierto independiente que lo admite como adaptador de primera clase, gobernado sobre ACP. Mistral es una marca registrada de Mistral AI.

7. 07 ¿Están seguros mis archivos y 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 Mistral las usa directamente tu agente, sin pasar nunca por los servidores de Open Design.