Mistral Vibe CLI para design.

O que o Mistral Vibe CLI realmente é

O Mistral Vibe CLI é um agente de programação open source (Apache-2.0) que a Mistral AI distribui para o terminal. Ele oferece uma interface de chat interativa com ferramentas para manipulação de arquivos, busca de código, controle de versão e execução de comandos, e escaneia automaticamente a estrutura de arquivos do seu projeto e o status do Git para dar ao agente o contexto relevante. Ele é movido pelos modelos de programação Devstral da Mistral — planejando e verificando o trabalho a partir de tarefas em linguagem natural em vez de apenas completar linhas.

Para trabalho de design, duas propriedades se destacam. Ele roda na família Devstral de pesos abertos da Mistral (Devstral 2 e o menor Devstral Small 2), então você pode rodar o agente contra a API Mistral na nuvem ou contra modelos locais — útil para trabalho de design sensível à privacidade ou offline. E ele fala o Agent Client Protocol, então o mesmo agente pode conduzir editores e ferramentas, não apenas uma sessão de terminal.

• Arquivos de configuração: O Vibe CLI é configurado por meio de um arquivo config.toml (no nível do projeto, ./.vibe/config.toml, com um fallback em ~/.vibe/config.toml). É um lugar prático para codificar seus provedores, sua escolha de modelo e as configurações do projeto.
• Ferramentas integradas + MCP: Ele vem com ferramentas de arquivo, busca, controle de versão e execução de comandos, e suporta servidores MCP (configurados sob uma seção [[mcp_servers]]) para adicionar contexto externo como um arquivo do Figma ao vivo.
• BYOK ou local: Autentique-se com uma chave de API Mistral do console da Mistral, ou aponte-o para modelos locais/compatíveis para que funcione totalmente offline.

• Fornecedor: Mistral AI
• Credencial: chave de API Mistral (BYOK) do console da Mistral, ou modelos locais / compatíveis
• Licença: Apache-2.0, open source

Por que um agente de programação de pesos abertos combina com design

A vantagem de design do Vibe CLI vem da sua família de modelos de pesos abertos e do seu alcance de protocolo — mas, como acontece com todo agente, o bom gosto ainda precisa ser fornecido.

• Modelos de programação Devstral: O Vibe roda na família Devstral da Mistral, modelos ajustados para programação e construídos para trabalho agêntico de múltiplos arquivos — então o agente edita em um código de frontend real em vez de emitir trechos isolados.
• Pesos abertos e amigável ao local: O Devstral Small 2 é pequeno o suficiente para rodar em hardware de consumo, então o trabalho de design pode permanecer totalmente local e offline — referências e código nunca precisam sair da sua máquina.
• Convenções no config.toml + contexto: A configuração de projeto e suas próprias instruções apontam o agente para seus tokens, componentes e specs reais, para que ele trabalhe em função de uma marca em vez de um visual padrão.

A lição é a mesma que todo agente ensina: o Vibe CLI não tem bom gosto por padrão. Ele produz bom design quando você lhe dá restrições — um design system, uma skill estética e referências concretas. O Open Design empacota exatamente esses insumos, e é por isso que os dois se encaixam (mais sobre isso abaixo).

Configure o Vibe CLI para trabalho de design, do zero

Aqui está o caminho completo de uma máquina limpa até um Vibe CLI capaz de construir e verificar UI.

# 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

• Codifique suas regras de design: Mantenha seus tokens, primitivos e convenções onde o agente os lê e aponte o Vibe para eles, para que a saída combine com uma marca em vez de recorrer a um visual genérico.
• Adicione verificação no navegador: Conecte um MCP de Playwright ou de navegador para que o Vibe renderize em um navegador real e confira a saída em diferentes breakpoints em vez de apenas confirmar que o build passou.

O fluxo de referência para UI

O laço de design de maior alavancagem com o Vibe CLI é transformar uma referência clara em UI responsiva e funcional e iterar até que ela corresponda — apoiando-se nas ferramentas do agente para renderizar, inspecionar e corrigir sua própria saída.

1. Comece pelas referências mais claras que você tiver — e descreva múltiplos estados (desktop e mobile, hover, vazio, carregando), não apenas uma única imagem de destaque.
2. Seja específico no prompt; prompts vagos produzem UI genérica mesmo com um modelo forte.
3. Mantenha seu design system e suas convenções onde o Vibe os lê e diga a ele onde ficam os tokens e os primitivos canônicos.
4. Rode um servidor de desenvolvimento e faça o Vibe renderizar em um navegador real, redimensionando para os breakpoints para conferir o resultado.
5. Itere fazendo o Vibe comparar sua implementação de volta com as referências — não apenas confirmar que ela faz o build.

Referencie arquivos com @ (o Vibe autocompleta caminhos de arquivo) e use comandos de barra com /, depois dê restrições 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.

Mantenha os prompts pequenos e focados, faça commit das boas iterações e reverta as ruins (avisando o Vibe quando reverter), para que cada passagem parta de uma base limpa.

config.toml, MCP e ACP

Três pontos de extensão tornam o Vibe CLI prático para trabalho de design contínuo, e os três se encaixam perfeitamente em um fluxo de design aberto.

• config.toml: Regras de projeto e configurações de provedor/modelo vivem em um config.toml (no nível do projeto, com um fallback em ~/.vibe). É o lar durável de como o agente é conectado ao seu projeto, lido a cada execução.
• Servidores MCP: Configure servidores MCP no seu config.toml ([[mcp_servers]], com transportes HTTP, HTTP-streamable e stdio) — a forma portátil de trazer contexto de design e ferramentas externas, mais relevante o servidor MCP do Figma, que funcionam entre agentes, não apenas no Vibe.
• Agent Client Protocol: O Vibe fala ACP, então o mesmo agente pode ser conduzido a partir de editores e outros clientes ACP. É exatamente assim que o Open Design o integra — via ACP por meio do binário vibe-acp.

Essas são capacidades portáteis e multi-agente — exatamente o tipo de coisa que o Open Design foi feito para orquestrar, em vez de recriar a cada projeto.

Vibe CLI vs Codex vs Claude Code vs Cursor vs Gemini CLI para design

Não há um único vencedor para o trabalho de design — cada agente tem um ponto forte diferente, e equipes experientes os combinam. Um resumo justo:

O veredito recorrente da comunidade é que o bom gosto vem das pessoas: todos eles recorrem a uma estética genérica sem skills, referências e restrições. É esse o problema real a resolver — e ele tem formato de ferramenta de design, não de modelo.

Armadilhas, e como evitar o visual de “lixo de IA”

A queixa mais comum sobre design gerado por IA é que ele parece genérico — gradientes suaves, painéis flutuantes, cantos arredondados exagerados, sombras dramáticas, aquela vibe de Inter-com-roxo que “grita que uma IA fez isto”. Outros problemas relatados incluem layouts mobile quebrados e instruções vazando para o texto da UI. Nenhum desses é exclusivo do Vibe CLI; é o que acontece quando qualquer agente roda sem um contexto de design curado.

• Adicione uma skill estética: Uma skill de design curada força o agente a se comprometer com uma direção real em vez do visual padrão.
• Verifique em um navegador real: Faça o Vibe renderizar e se autoverificar em diferentes breakpoints, para que os layouts não quebrem silenciosamente no mobile.
• Forneça tokens e referências: Tokens de design reais e screenshots de referência são a maior alavanca isolada sobre a qualidade da saída.
• Codifique regras na configuração e no contexto: Coloque regras de estilo como “sem hero cards, no máximo duas famílias tipográficas, hierarquia que prioriza a marca” onde o agente as lê a cada execução.

Note que toda mitigação consiste em dar ao agente um contexto de design curado. Manter esse contexto à mão, a cada projeto, é o trabalho braçal que o Open Design elimina.

Projetando com o Vibe CLI dentro do Open Design

O Open Design é a camada de design open source que o fluxo acima fica pedindo o tempo todo. Ele trata o Mistral Vibe CLI como um adaptador de primeira linha — conduzindo-o via ACP por meio do binário vibe-acp — e o envolve em uma biblioteca curada de skill e design system, um pipeline de renderização estruturado e uma UI desktop local. Assim, o contexto de design que torna o Vibe bom está presente desde a primeira execução, e não montado à mão a cada vez. Ambos são open source e local-first, o que torna a dupla uma combinação natural.

1. Instale o Open Design e selecione o Mistral Vibe CLI como seu agente.
2. Autentique-se com sua chave de API Mistral (BYOK) ou aponte o Vibe para modelos locais — as credenciais ficam na sua máquina e nunca passam por nós como intermediários.
3. Escolha um design system e uma skill e, em seguida, gere decks, protótipos e landing pages com bom gosto consistente.
4. Cada artefato e arquivo DESIGN.md vive no seu próprio repositório, não em uma nuvem hospedada.

O mesmo agente Vibe CLI, a mesma chave — além de um fluxo de design real, portátil e open source ao redor dele. É local-first e Apache-2.0, então nada sobre seu trabalho ou suas credenciais sai da sua máquina.

Perguntas frequentes

1. 01 O Mistral Vibe CLI consegue mesmo fazer trabalho de design? +

   Sim — com uma skill estética, um design system e referências reais em contexto, o Vibe CLI produz UI responsiva e de qualidade de produção, e seus modelos Devstral editam em um código de frontend real. Sem esse contexto, ele tende a recorrer a um visual genérico, que é a lacuna que o Open Design preenche.

2. 02 Como autentico o Vibe CLI? +

   Rode o assistente de configuração com vibe --setup para registrar uma chave de API Mistral (do console da Mistral), ou defina MISTRAL_API_KEY no seu ambiente. Ele também pode rodar contra modelos locais ou compatíveis, totalmente offline. O Open Design também nunca atua como intermediário das suas credenciais.

3. 03 O que torna o Vibe CLI bom especificamente para design? +

   Ele é um agente Apache-2.0, nativo de ACP, movido pelos modelos de programação Devstral de pesos abertos da Mistral — então você pode rodá-lo localmente para trabalho sensível à privacidade e editar em um código real. Mas o bom gosto ainda vem do design system, da skill e das referências que você fornece.

4. 04 Vibe CLI ou Claude Code para design de frontend? +

   Ambos são fortes. O Claude Code é conhecido por decisões de design específicas e conscientes do código; a vantagem do Vibe CLI é uma stack Devstral de pesos abertos que você pode rodar localmente e uma licença Apache-2.0. Muitas equipes usam os dois — o Open Design permite trocar de agente sem mudar seu fluxo de design.

5. 05 Como conecto o Vibe CLI ao Figma? +

   Adicione o servidor MCP do Figma como uma entrada [[mcp_servers]] no seu config.toml. O Vibe pode então puxar contexto de design real — componentes, variáveis, dados de layout — para que o código gerado corresponda à fonte em vez de aproximá-la.

6. 06 O Open Design tem vínculo com a Mistral AI? +

   Não. O Mistral Vibe CLI é um produto da Mistral AI; o Open Design é um projeto open source independente que o suporta como adaptador de primeira linha, conduzido via ACP. Mistral é uma marca registrada da Mistral AI.

7. 07 Meus arquivos e credenciais estão seguros? +

   Sim — o Open Design é local-first e Apache-2.0. Seus arquivos, artefatos e o DESIGN.md permanecem no seu próprio repositório, e suas credenciais da Mistral são usadas diretamente pelo seu agente, nunca roteadas pelos servidores do Open Design.