---
title: Design Mode
description: Use um briefing em texto para escolher primeiro uma direção visual e, depois, construir um app funcional a partir dessa direção aprovada.
---

Design Mode é o caminho de criação design-first do Verdent para novos apps com uma interface visível. Use-o quando você tiver uma ideia em palavras, mas ainda não tiver um design finalizado, screenshot, guia de estilo ou plano completo de páginas.

Em vez de partir direto para o código, o Design Mode ajuda você a decidir primeiro como o produto deve parecer e funcionar e, então, transforma a direção aprovada em um app funcional.

## Quando usar o Design Mode

Use o Design Mode quando quiser criar uma nova UI de produto a partir de um briefing em texto, como:

- um app full-stack
- um frontend web ou landing page
- um app mobile
- uma ideia de produto do zero em que a direção visual ainda não está decidida

## Quando pular essa etapa

Pule o Design Mode quando:

- o projeto for um utilitário trivial de tela única, como um formulário básico ou um app de brinquedo muito pequeno
- você já tiver um briefing de design completo com uma direção de estilo concreta, paleta, sistema tipográfico e lista de páginas ou telas
- você já tiver arquivos de design, mockups, screenshots ou um guia de estilo que devam ser seguidos diretamente
- você quiser explicitamente pular o design e ir direto para o código

<Note>
Se o seu briefing já for específico o suficiente, o Verdent pode usá-lo como a direção escolhida e avançar diretamente para o planejamento de páginas e o trabalho de construção.
</Note>

## Como o Design Mode funciona

<Steps>
  <Step title="Descreva o produto">
    Comece com um briefing em linguagem simples: o que você quer construir, para quem é, o que deve fazer e quaisquer referências de clima ou estilo que você já tenha.
  </Step>
  <Step title="Escolha uma direção visual">
    O Verdent explora direções de design distintas para que você possa escolher o visual e a sensação antes de escrever o código.
  </Step>
  <Step title="Planeje as páginas ou telas">
    Para produtos com múltiplas páginas, full-stack ou mais complexos, o Verdent transforma a direção escolhida em um plano de páginas ou telas e em uma especificação de produto em linguagem simples.
  </Step>
  <Step title="Construa a partir da direção aprovada">
    Depois que a direção estiver clara, o Verdent restaura o design em um app funcional e mantém as decisões posteriores vinculadas ao design e à especificação aprovados.
  </Step>
  <Step title="Visualize e continue">
    Revise o app no preview e, em seguida, continue com o trabalho de backend, testes ou outras iterações conforme necessário.
  </Step>
</Steps>

## Como usar o Design Mode no Verdent Desktop

Quando você inicia um novo produto no Manager, descreva o app que deseja construir. Se você ainda não tiver uma direção de design concreta, abra o Design Mode e o Verdent ajudará você a escolher uma direção visual antes de construir.

Você pode manter o briefing simples, mas deixe-o específico o suficiente para orientar as decisões de design:

- o que o produto é
- quem vai usá-lo
- a principal tarefa que ele deve ajudar a realizar
- as páginas, telas ou estados que você já sabe que vai precisar

## Exemplos de briefings

<CardGroup cols={2}>
  <Card title="Landing page">
    Construa uma landing page para um app de finanças pessoais voltado a freelancers. Ela deve transmitir calma, confiança e um tom editorial, com um hero, seções de recursos, preços e FAQ.
  </Card>
  <Card title="App multi-tela">
    Crie um rastreador de hábitos mobile-first para pessoas se recuperando de burnout. Ele deve transmitir leveza e ser tátil, com onboarding, check-in diário, visão de progresso e configurações.
  </Card>
</CardGroup>

## Dicas para melhores resultados

- Diga para quem o produto se destina.
- Descreva a sensação que você quer, não apenas a lista de recursos.
- Mencione páginas ou telas conhecidas, se você as tiver.
- Compartilhe referências ou restrições cedo, se forem importantes.
- Diga o que evitar se você já souber o que ficaria errado.
- Para produtos complexos, espere confirmar a lista de páginas e a especificação de produto antes que a construção completa continue.