# Design Mode (/pt/docs/verdent-cloud/create/design-mode)

> Use um briefing em texto para escolher primeiro uma direção visual e, em seguida, construir um app funcional a partir dessa direção aprovada.



Design Mode é o caminho de criação design-first do Verdent Cloud 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, uma captura de tela, um guia de estilo ou um plano de páginas completo.

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, depois, transforma a direção aprovada em um app funcional.

## Quando usar o Design Mode [#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
* um jogo de múltiplas telas ou experiência interativa
* uma ideia de produto do zero em que a direção visual ainda não foi decidida

## Quando ignorar [#quando-ignorar]

Ignore 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, capturas de tela ou um guia de estilo que devem 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 Cloud 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 [#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 tom ou estilo que você já tenha.
  </Step>

  <Step title="Escolha uma direção visual">
    O Verdent Cloud 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 de múltiplas páginas, full-stack ou mais complexos, o Verdent Cloud transforma a direção escolhida em um plano de páginas ou telas e 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 Cloud reconstrói 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 na pré-visualização e, em seguida, continue com o trabalho de backend, testes, analytics ou implantação conforme necessário.
  </Step>
</Steps>

## Como usar o Design Mode no Verdent Cloud [#como-usar-o-design-mode-no-verdent-cloud]

No fluxo de criação do Cloud, descreva o app que você quer construir em vez de escolher um template. Se você ainda não tiver uma direção de design concreta, o Verdent Cloud pode usar o Design Mode para ajudar você a escolher uma antes de construir.

Você pode manter o briefing simples, mas torne-o específico o suficiente para guiar 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 precisa
* quaisquer referências de tom ou estilo, como editorial, divertido, funcional, premium, minimalista ou ousado
* qualquer coisa que você não queira, como gradientes genéricos, imagens com cara de banco de imagens ou um determinado estilo visual

## Exemplos de briefing [#exemplos-de-briefing]

<CardGroup cols="2">
  <Card title="Landing page">
    Construa uma landing page para um app de finanças pessoais para freelancers. Ela deve transmitir calma, confiança e um tom editorial, com um hero, seções de funcionalidades, preços e FAQ.
  </Card>

  <Card title="App de múltiplas telas">
    Crie um rastreador de hábitos mobile-first para pessoas se recuperando de burnout. Ele deve transmitir suavidade e ser tátil, com onboarding, check-in diário, visão de progresso e configurações.
  </Card>
</CardGroup>

## Dicas para melhores resultados [#dicas-para-melhores-resultados]

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