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

# Refondre votre site web existant

> Recréez votre site actuel sous forme de cadre de design, comparez des directions côte à côte, puis construisez la gagnante.

export const AiPrompt = ({children}) => {
  return <CodeBlock className="relative block max-w-full overflow-x-hidden font-sans !whitespace-pre-wrap !break-words" style={{
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
      <div className="pr-7" style={{
    whiteSpace: "pre-wrap",
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
        {children}
      </div>
    </CodeBlock>;
};

Votre site fonctionne mais paraît daté, et décrire une refonte ne convainc personne.
Recréez le site en ligne sous forme de cadre de design dans Replit Design, explorez des
directions à côté de l'original et construisez celle qui l'emporte. L'import recrée
l'apparence et l'ambiance comme point de départ, pas une copie au pixel près de votre
code. Chaque direction arrive dans un nouveau cadre, l'original reste donc sur le canvas
pour la comparaison.

## Idéal pour

* Les designers qui doivent montrer une refonte à côté du site actuel, pas la décrire.
* Les fondateurs qui rafraîchissent un site dont le contenu est bon et l'apparence fatiguée.

## Avant de commencer

Ayez l'URL publique de la page que vous voulez retravailler. Décidez de ce qui doit
survivre à la refonte (l'offre, la navigation et les preuves) et de ce qui reste ouvert.
Tout ce qui se trouve derrière une connexion ne sera pas importé.

## Donner le prompt à l'agent

Rendez-vous sur [replit.com/design](https://replit.com/design) et sélectionnez **Import URL**
sous la zone de prompt. Le prompt est prérempli ; collez votre URL à la suite.

<AiPrompt>
  Recrée l'apparence et l'ambiance de ce site web : \[URL]. Arrête-toi au cadre de
  design. Ne commence pas à construire une application.
</AiPrompt>

Une fois le cadre arrivé, décrivez la refonte elle-même :

<AiPrompt>
  Conserve l'offre, la navigation et les preuves de l'original. Génère trois
  directions pour le hero et la typographie.
</AiPrompt>

## À quoi s'attendre

Trois directions arrivent dans des cadres distincts à côté de l'import, avec l'offre, la
navigation et les preuves reportées dans chacune. Vous comparez quatre éléments : le site
que vous avez et trois façons dont il pourrait se présenter. Jugez-les d'abord comme des
écrans entiers avant de regarder les détails. Affinez la gagnante en discutant dans le chat
ou en cliquant dans les éléments avec le [Visual Editor](/fr/design/visual-editor).

Quand une direction est la bonne, sélectionnez le cadre et choisissez **Build** pour
[le transformer en vrai logiciel](/fr/design/build-your-design). Vous choisissez la voie :
une nouvelle application dans le même projet, ou votre application de site existante
restylée pour correspondre au cadre. Agent crée d'abord un point de contrôle, donc les deux
voies sont réversibles.

## Adaptez-le à vos besoins

<AiPrompt>
  Garde la mise en page telle quelle et ne change que le langage visuel : l'échelle
  typographique, le rythme des espacements et la couleur. Place le résultat à côté
  de l'original.
</AiPrompt>

<AiPrompt>
  Recrée les pages tarifs et contact dans la direction gagnante pour que tout le
  site soit cohérent.
</AiPrompt>

## Dépannage

<AccordionGroup>
  <Accordion title="L'import ne correspond pas à l'original">
    Import URL recrée l'apparence et l'ambiance, pas le code. Nommez les parties
    qui doivent correspondre exactement, puis corrigez-les avec le chat ou le
    Visual Editor.
  </Accordion>

  <Accordion title="Une page derrière une connexion ne s'importe pas">
    L'import nécessite une URL publique. Recréez plutôt cette page à partir d'une
    capture d'écran.
  </Accordion>

  <Accordion title="Vous pensez avoir perdu l'original">
    Ce n'est pas le cas. Chaque génération arrive dans un nouveau cadre, et
    l'import reste sur le canvas. Sélectionnez-le pour comparer.
  </Accordion>

  <Accordion title="La refonte a supprimé votre contenu">
    Précisez que les textes, la navigation et les preuves viennent de l'original,
    et que seule la direction visuelle est ouverte.
  </Accordion>
</AccordionGroup>

## Voir aussi

<CardGroup cols={2}>
  <Card title="Créer votre design system" href="/fr/use-cases/create-design-system">
    Extrayez l'apparence gagnante pour que la prochaine page démarre aux couleurs de votre marque.
  </Card>

  <Card title="Auditer un site web en ligne" href="/fr/use-cases/review-a-live-website">
    Vérifiez les liens, la mise en page et l'accessibilité une fois la refonte en ligne.
  </Card>
</CardGroup>