> ## 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 seu app

> Use o modo Design para moldar a aparência do seu app, tela por tela.

export const AiPrompt = ({children}) => {
  return <CodeBlock className="relative block font-sans whitespace-pre-wrap break-words">
      <div className="pr-7">
        {children}
      </div>
    </CodeBlock>;
};

export const designPrompt = "Crie cinco designs diferentes para o menu do jogo, onde os jogadores escolhem entre Blocks, Snake, Racer e Pinball, e veem os melhores recordes de cada um.";

A aparência do seu app faz tanta parte dele quanto o que ele faz. O PixelGames é um Game Boy
em um celular: a carcaça creme, a tela verde-oliva e os botões robustos são o ponto principal.
Um layout de app genérico perderia isso.

<Steps>
  <Step title="Alterne para o modo Design">
    Alterne para o modo Design no botão no canto superior esquerdo do seu workspace:

    <Frame caption="O alternador Design e Build com Design selecionado no workspace do PixelGames.">
      <img src="https://mintcdn.com/replit/WuaQIOfW5oxRlxex/images/pixelgames/mobile/design-step-1.png?fit=max&auto=format&n=WuaQIOfW5oxRlxex&q=85&s=8cbcacf95a04c466f273586b54c4acbb" alt="Canvas de Design do Replit com Design selecionado no alternador superior esquerdo e cinco variantes de menu do PixelGames" data-path="images/pixelgames/mobile/design-step-1.png" width="1284" height="871" data-path="images/pixelgames/mobile/design-step-1.png" />
    </Frame>
  </Step>

  <Step title="Descreva o que você quer ao Agent">
    Descreva o resultado e o Agent cuida do resto. Peça várias versões de uma vez para
    encontrar uma direção.

    <AiPrompt>
      {designPrompt}
    </AiPrompt>
  </Step>

  <Step title="Compare as versões">
    O Agent as organiza lado a lado no canvas, para que você as julgue como telas completas em
    vez de uma por vez.
  </Step>

  <Step title="Escolha uma e veja para onde levá-la">
    Selecione um design e use as sugestões que aparecem ao lado dele para tentar outras
    variações.

    <Frame caption="Um design selecionado, com sugestões de próximos passos ao lado.">
      <img src="https://mintcdn.com/replit/WuaQIOfW5oxRlxex/images/pixelgames/mobile/design-step-2.png?fit=max&auto=format&n=WuaQIOfW5oxRlxex&q=85&s=dba067f0c15dde736af003a7fd768185" alt="Um design de menu do PixelGames selecionado com sugestões de próximos passos: integração, comparação, remix e reimaginação" data-path="images/pixelgames/mobile/design-step-2.png" width="1284" height="871" data-path="images/pixelgames/mobile/design-step-2.png" />
    </Frame>
  </Step>

  <Step title="Construa a versão que você quer">
    Quando uma versão estiver certa, clique no ícone de envio na barra de ferramentas acima
    dela. O Agent tira aquele design do canvas e o constrói como uma tela real no seu app.

    <Frame caption="O ícone de envio transforma o design selecionado em uma tela real.">
      <img src="https://mintcdn.com/replit/WuaQIOfW5oxRlxex/images/pixelgames/mobile/design-step-3.png?fit=max&auto=format&n=WuaQIOfW5oxRlxex&q=85&s=9006dbe90f73b24de3db94d75cadcd84" alt="Um design de menu do PixelGames selecionado no canvas com o ícone de envio destacado na barra de ferramentas" data-path="images/pixelgames/mobile/design-step-3.png" width="1284" height="846" data-path="images/pixelgames/mobile/design-step-3.png" />
    </Frame>
  </Step>
</Steps>

## Solução de problemas

* **A mudança foi além do que você queria:** peça ao Agent para revertê-la e descreva uma
  mudança menor, uma tela ou um elemento por vez.
* **Parece certo na prévia, errado no celular:** informe o dispositivo e o que você viu, o
  tratamento de área segura e tamanho de tela costumam ser as causas.
* **Uma mudança é sempre desfeita:** o mesmo valor pode estar definido em mais de um lugar,
  pergunte ao Agent onde o estilo daquela tela realmente está.

## O que vem a seguir

<CardGroup cols={2}>
  <Card title="Gerar um ícone de app" icon="image" href="/pt/build/mobile-app-icon">
    Projete o ícone que os jogadores tocam na tela inicial.
  </Card>

  <Card title="Use componentes nativos do iOS" icon="apple" href="/pt/build/mobile-native-components">
    Combine uma aparência personalizada com alertas e menus nativos.
  </Card>
</CardGroup>

## Relacionado

* [Gerar capturas de tela da App Store](/pt/build/mobile-store-screenshots)
* [Pré-visualize e teste no seu celular](/build/mobile-preview-testing)