Projetar com
Mistral Vibe no
OpenDesign.

storefront-product.html · 1440px

4Revisar Antes da Entrega

1. 1

   Baixe o App de Desktop da OpenDesign

   Escolha o pacote para seu computador, instale-o e abra o app.

   Baixar o OpenDesign

   PONTO DE VERIFICAÇÃO

   O aplicativo desktop abre. Já instalado? Avance para a próxima etapa; não é necessário baixar novamente.
2. 2

   Prepare sua conexão com o Mistral Vibe

   Siga as instruções do Mistral Vibe na sua versão instalada. Autentique-se com sua chave de API da Mistral (BYOK) ou com modelos locais — as credenciais permanecem na sua máquina.

   README e configuração do mistral-vibe (GitHub)

   # 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=...

   Com base nas notas de configuração do Mistral Vibe no guia publicado; consulte a documentação do fornecedor para o comando atual.

   PONTO DE VERIFICAÇÃO

   Confirme o agente e a conta pretendidos. Se não estiver disponível, verifique a compatibilidade antes de tentar uma tarefa maior.
3. 3

   Execute uma pequena tarefa no Mistral Vibe

   Use um briefing pequeno para que você possa avaliar todo o ciclo, incluindo uma revisão.

   Briefing inicial Copiar

   Construa uma tela de configurações com um formulário de perfil e uma confirmação de salvamento. Use minhas regras de design. Verifique em larguras de desktop e mobile.

   PONTO DE VERIFICAÇÃO

   Abra o resultado, teste o estado salvo e solicite uma alteração específica. Um arquivo gerado é o começo da revisão, não o fim.

Para executar o OpenDesign a partir do código-fonte, siga o guia técnico de início rápido.

1. 1

   Briefing de Design

   Linguagem simples, de três a seis linhas. Indique o público, a função da tela e as plataformas.

   • VocêEscreva o briefing; anexe uma captura de tela de referência, se tiver uma.
   • Mistral VibeLê o briefing e o arquivo de instruções do projeto; pergunta quando algo é ambíguo.
   • OpenDesignFornece o projeto, a superfície do prompt e a skill para o tipo de artefato.
   • VerificarConfirme que o briefing define os critérios de aceitação. Adicioná-los agora é mais barato do que depois da geração.

   New project · PromptMistral Vibe

   You

   Design the plate product page: photo, price, glaze and quantity, add to cart, three related pieces. Local model only.

   Mistral Vibe

   Understood. Running on the local Devstral model. Should the set discount appear as a second price line or as a note under quantity?
2. 2

   Restrições de Design

   Um design system e algumas regras rígidas. É isso que diferencia um resultado alinhado à marca de um visual genérico.

   • VocêEscolha um design system; defina os breakpoints e quaisquer componentes de uso obrigatório.
   • Mistral VibeCarrega os tokens e as regras de postura do DESIGN.md no contexto antes de escrever uma linha.
   • OpenDesignDisponibiliza a biblioteca de design systems e vincula a escolhida ao template da skill.
   • VerificarOs tokens correspondem à sua marca. Um único destaque, as fontes certas, o raio certo.

   DESIGN.md · OpenDesignbound

   background #fafafa foreground #262626 border #d9d9d9 accent #63fe13 display Albert Sans 800 radius 8px · pills 999px
3. 3

   Gerar a Interface

   O Mistral Vibe escreve um arquivo HTML autocontido: layout, estilos, interações e ganchos estáveis.

   • VocêAguarde ou responda a uma pergunta de esclarecimento. Nada a configurar.
   • Mistral VibePlaneja as seções, escreve o HTML, o CSS e o JavaScript, executa o arquivo e corrige o que falhar.
   • OpenDesignSalva o artefato na pasta do projeto e o indexa para pré-visualização.
   • VerificarNada ainda. Avalie o arquivo depois de renderizado, não a partir do código-fonte.

   Project files3 files

   • storefront-product.htmlnew
   • config.tomlbound
   • DESIGN.mdread
4. 4

   Pré-visualização

   O arquivo é renderizado dentro do OpenDesign nas larguras que você solicitou. É aqui que o design é avaliado.

   • VocêAlterna larguras, clica pelas interações, deixa comentários nos elementos.
   • Mistral VibeLê seus comentários na pré-visualização e prepara a próxima revisão.
   • OpenDesignRenderiza o preview, expõe alvos data-od-id para comentários e edições.
   • CheckHierarquia, contraste, overflow em 390px, estados de foco e se o destaque é usado com moderação.

   Preview · 390pxComment mode

   Comment on · price

   Set discount as a small line under the price, not a second price.

   Comment on · photo

   Keep 4:5; do not crop the rim on the phone.
5. 5

   Revisar e Verificar

   Solicite alterações apontando para elementos no preview. Cada revisão é um novo arquivo; nada é sobrescrito silenciosamente.

   • VocêTransforma comentários em solicitações; decide quando a tarefa está concluída.
   • Mistral VibeAplica as alterações no lugar e executa o arquivo novamente.
   • OpenDesignMantém as versões lado a lado; exporta uma imagem ou o HTML quando você terminar.
   • CheckReverifica apenas a área que mudou, depois a página inteira uma vez em cada breakpoint.

   Verification · v23 of 4

   • ✓Discount as a note under price
   • ✓Photo ratio held at 390px
   • ✓No horizontal scroll at 390px
   • Quantity control — checked by you