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

# Importer un site web dans Replit Design

> Recréez un site web en ligne sous forme de frame de design dans Replit Design, puis affinez-le avec des suggestions et le chat, et transformez-le en application.

⏰ *Durée estimée : 10 minutes*

Parfois, le design dont vous voulez partir existe déjà en ligne : votre site actuel, ou une page dont vous voulez reproduire l'apparence. Import from URL recrée un site web sous forme de frame de design que vous pouvez explorer, affiner et transformer en application interactive.

Vous utiliserez [creative-studio-landing.replit.app](https://creative-studio-landing.replit.app), une page d'accueil pour un studio créatif construite par Replit, comme exemple.

## Avant de commencer

Vous avez besoin de :

* Un [compte Replit](https://replit.com).
* L'URL d'un site web public, ou l'exemple ci-dessus.

## Importer le site web

<Steps>
  <Step title="Copier l'URL du site">
    Utilisez votre propre site, ou copiez l'exemple : `https://creative-studio-landing.replit.app`.

    <Frame caption="Le site d'exemple : Kosmo Studio, une page d'accueil de studio créatif.">
      <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/import-from-url/url-example-site.webp?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=267942c299f996750150594e6b48b55d" alt="La page d'accueil de Kosmo Studio avec le titre We craft bold ideas and visuals that truly work, au-dessus d'un éventail de cartes d'œuvres" width="3440" height="2160" data-path="images/design/import-from-url/url-example-site.webp" />
    </Frame>
  </Step>

  <Step title="Ouvrir Replit Design">
    Rendez-vous sur [replit.com/design](https://replit.com/design) et sélectionnez **Import URL** sous la zone de prompt. Agent recrée l'apparence et l'ambiance du site comme point de départ.

    <Frame caption="Import URL sur la page d'accueil de Replit Design : collez un lien vers n'importe quel site web.">
      <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/import-from-url/design-import-url.webp?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=e4cbc39f9f040bcb1b4950984d27bcd2" alt="La page d'accueil de Replit Design avec l'option Import URL sélectionnée et une infobulle indiquant Paste a link to any website and Agent will recreate its look and feel as a starting point" width="2293" height="1322" data-path="images/design/import-from-url/design-import-url.webp" />
    </Frame>
  </Step>

  <Step title="Coller l'URL et commencer à construire">
    Sélectionner **Import URL** préremplit le prompt : *« Recreate the look and feel of this website: »*. Collez votre URL après, puis sélectionnez **Start**.

    <Frame caption="Le prompt de recréation prérempli avec l'URL d'exemple, prêt à démarrer.">
      <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/import-from-url/design-url-prompt.webp?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=ed6fcfa2a942facfe2d4ede695445926" alt="La zone de prompt de Replit Design indiquant Recreate the look and feel of this website suivi de l'URL d'exemple, avec le bouton Start" width="2293" height="1322" data-path="images/design/import-from-url/design-url-prompt.webp" />
    </Frame>
  </Step>
</Steps>

Agent recrée le site sous forme de frame de design dans votre projet.

<Frame caption="La page d'accueil recréée de Kosmo Studio sous forme de frame de design dans Replit Design.">
  <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/import-from-url/url-import-result.webp?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=25c050750522f9306c84091ccb147e86" alt="La page d'accueil recréée de Kosmo Studio sous forme de frame de design dans Replit Design, avec l'exécution marquée comme terminée dans le panneau de chat" width="1600" height="1004" data-path="images/design/import-from-url/url-import-result.webp" />
</Frame>

## Faites-en le vôtre

Sélectionnez la frame importée et commencez à la remodeler :

* **Suivez une [suggestion](/fr/design/explore-suggestions)** : l'import arrive avec des prochaines étapes proposées, comme une variante éditoriale sombre, un affichage mobile, ou une page de contact. Chacune génère une nouvelle frame, de sorte que l'originale reste disponible pour comparaison.
* **[Discutez-en](/fr/design/chat-about-your-design)** : utilisez le champ de saisie sous la frame et briefez-la avec vos propres mots, *« remplace les photos du portfolio »*, *« rends le titre de la section principale plus épais »*.

<Frame caption="La frame importée sélectionnée, avec des prochaines étapes suggérées proposant une variante éditoriale sombre, un affichage mobile et une page de contact.">
  <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/import-from-url/url-make-it-yours.webp?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=d0ec30760d7803f73c8edd1a4427dcbd" alt="La frame recréée Creative Studio sélectionnée dans Replit Design, avec le panneau Suggested next steps à côté proposant une variante éditoriale sombre, un affichage mobile, une page de contact, et différentes approches" width="1600" height="1004" data-path="images/design/import-from-url/url-make-it-yours.webp" />
</Frame>

## Étapes suivantes

<CardGroup cols={3}>
  <Card title="Suggestions d'exploration" icon="lightbulb" href="/fr/design/explore-suggestions">
    Explorez quoi concevoir ensuite, un clic à la fois.
  </Card>

  <Card title="Visual Editor" icon="pen-to-square" href="/fr/design/visual-editor">
    Peaufinez le texte, les couleurs, l'espacement et les images directement.
  </Card>

  <Card title="Construire votre design" icon="hammer" href="/fr/design/build-your-design">
    Transformez la frame terminée en application fonctionnelle.
  </Card>
</CardGroup>
