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

# Concevez votre application

> Utilisez le mode Design pour façonner l'apparence de votre application, écran par écran.

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 = "Create five different designs for the game menu, where players choose between Blocks, Snake, Racer, and Pinball, and see the top scores for each.";

L'apparence de votre application compte autant que ce qu'elle fait. PixelGames est une Game Boy sur un téléphone : la coque crème, l'écran vert olive et les boutons épais sont tout l'intérêt du concept. Une mise en page d'application générique le ferait perdre.

<Steps>
  <Step title="Passer en mode Design">
    Passez en mode Design via le bouton en haut à gauche de votre workspace :

    <Frame caption="Le sélecteur Design et Build avec Design sélectionné dans le workspace 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="Canevas Design de Replit avec Design sélectionné dans le sélecteur en haut à gauche et cinq variantes du menu 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="Décrivez ce que vous voulez à Agent">
    Décrivez le résultat souhaité et Agent s'occupe du reste. Demandez plusieurs versions à la fois pour trouver une direction.

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

  <Step title="Comparez les versions">
    Agent les dispose côte à côte sur le canevas, afin que vous les jugiez comme des écrans complets plutôt qu'un par un.
  </Step>

  <Step title="Choisissez-en un et voyez où l'emmener">
    Sélectionnez un design, puis utilisez les suggestions qui apparaissent à côté pour essayer d'autres variations.

    <Frame caption="Un design sélectionné, avec des suggestions d'étapes suivantes à côté.">
      <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="Un design de menu PixelGames sélectionné avec des suggestions d'étapes suivantes : intégration, comparaison, remix et réinvention" 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="Construisez la version que vous voulez">
    Une fois qu'une version vous convient, cliquez sur l'icône d'envoi dans la barre d'outils au-dessus. Agent retire ce design du canevas et le construit en un véritable écran dans votre application.

    <Frame caption="L'icône d'envoi transforme le design sélectionné en un véritable écran.">
      <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="Un design de menu PixelGames sélectionné sur le canevas avec l'icône d'envoi mise en évidence dans la barre d'outils" 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>

## Dépannage

* **Le changement va plus loin que vous ne le vouliez :** demandez à Agent de l'annuler et décrivez un changement plus petit, un écran ou un élément à la fois.
* **Ça a l'air correct dans l'aperçu, mais pas sur un téléphone :** indiquez l'appareil et ce que vous avez observé, la gestion de la zone de sécurité et de la taille d'écran en sont généralement la cause.
* **Un changement est sans cesse annulé :** la même valeur est peut-être définie à plusieurs endroits, demandez à Agent où réside réellement le style de cet écran.

## Prochaines étapes

<CardGroup cols={2}>
  <Card title="Générer une icône d'application" icon="image" href="/fr/build/mobile-app-icon">
    Concevez l'icône sur laquelle les joueurs appuient depuis leur écran d'accueil.
  </Card>

  <Card title="Utiliser les composants natifs iOS" icon="apple" href="/fr/build/mobile-native-components">
    Associez une apparence personnalisée à des alertes et menus natifs.
  </Card>
</CardGroup>

## En relation

* [Générer des captures d'écran App Store](/fr/build/mobile-store-screenshots)
* [Aperçu et test sur votre téléphone](/build/mobile-preview-testing)