> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Projete sua primeira tela

> Gere seus primeiros frames de design a partir de um prompt no Replit Design, explore as sugestões da IA e continue iterando, sem necessidade de experiência em design.

Neste guia rápido, você vai gerar seus primeiros frames de design a partir de um prompt em linguagem simples e, depois, usar as sugestões da IA para explorar novas direções com um clique. Sem experiência em design necessária, você conduz escolhendo o que gosta.

<Steps>
  <Step title="Abra o Replit Design">
    Acesse [replit.com/design](https://replit.com/design). O campo de prompt em destaque é onde seu design começa.

    <Frame>
      <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/design-hero.png?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=9936d9ed0024a66cfad69c01858bb73f" alt="A home do Replit Design com um campo de prompt dizendo Descreva o que você quer projetar, e as opções Importar URL, Importar Figma, Recriar captura de tela e Começar com um design system logo abaixo" width="889" height="414" data-path="images/design/replit-design/design-hero.png" />
    </Frame>

    <Note>
      Já está no seu workspace? Em vez disso, selecione **Design** abaixo do campo de criação na home do seu workspace. O campo muda para o modo de design e um chip **Design** aparece no campo de prompt.

      <Frame>
        <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/design-pill.png?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=f719dfa884a772e9ee10602cea462f74" alt="O campo de criação na home do workspace com Design selecionado, mostrando o chip Design no campo de prompt" width="800" height="270" data-path="images/design/replit-design/design-pill.png" />
      </Frame>
    </Note>
  </Step>

  <Step title="Descreva o que você quer projetar">
    Escreva seu prompt como se estivesse orientando um amigo designer: o que é, para quem é e qualquer clima que você tenha em mente. Por exemplo: *"Uma landing page para um serviço de aluguel de supercarros, ousada, escura, cinematográfica."* Depois, envie.
  </Step>

  <Step title="Veja o Design construir">
    O Agent recebe seu prompt e começa a construir, relatando seu progresso no painel de chat enquanto trabalha.

    <Frame>
      <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/design-building.png?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=05dd7f12861379619e1b4cb0e9297cda" alt="A home do Replit Design com o painel de chat processando o prompt para um app de aluguel de supercarros de luxo, informando que está criando o artefato Velocity" width="2000" height="1254" data-path="images/design/replit-design/design-building.png" />
    </Frame>
  </Step>

  <Step title="Revise seus primeiros frames">
    Seu design chega como um frame no canvas. Dê um momento e depois observe-o em tamanho completo.

    <Frame>
      <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/first-frames.png?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=a5ede17a7fc66686789eeaa9b76a949e" alt="A página de aluguel de supercarros Velocity gerada, revisada em tamanho completo no modo foco, com um botão Exit focus no topo do quadro" width="1600" height="1003" data-path="images/design/replit-design/first-frames.png" />
    </Frame>
  </Step>

  <Step title="Continue gerando com sugestões">
    Selecione o frame de que você mais gosta. Sugestões aparecem para o que projetar em seguida; clique em uma e uma nova direção é gerada como um frame novo, deixando o original intacto. Continue clicando até que algo pareça certo.

    <Frame>
      <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/suggestions.png?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=7d11114b53e2ef02252b9aa3f85336a8" alt="O frame Velocity gerado, selecionado no canvas, com a execução concluída no painel de chat e o painel de próximos passos sugeridos se abrindo ao lado do frame" width="1600" height="1003" data-path="images/design/replit-design/suggestions.png" />
    </Frame>
  </Step>
</Steps>

## Próximos passos

* [Explorar sugestões](/pt/design/explore-suggestions): aprofunde-se no ciclo de exploração.
* [Começar a partir de um template](/pt/design/start-from-a-template): comece a partir de um design pré-construído em vez de um prompt em branco.
* [Construa seu design](/pt/design/build-your-design): transforme o frame vencedor em um app funcional.
