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

# Import a website into Replit Design

> Recreate a live website as a design frame in Replit Design, then refine it with suggestions and chat, and build it into an app.

⏰ *Estimated time: 10 minutes*

Sometimes the design you want to start from is already live on the web: your current site, or a page whose look you want to rebuild. Import from URL recreates a website as a design frame you can explore, refine, and build into an interactive app.

You'll use [creative-studio-landing.replit.app](https://creative-studio-landing.replit.app), a Replit-built landing page for a creative studio, as the example.

## Before you start

You need:

* A [Replit account](https://replit.com).
* The URL of a public website, or the example above.

## Import the website

<Steps>
  <Step title="Copy the site's URL">
    Use your own site, or copy the example: `https://creative-studio-landing.replit.app`.

    <Frame caption="The example site: Kosmo Studio, a creative studio landing page.">
      <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="The Kosmo Studio landing page with the headline We craft bold ideas and visuals that truly work, above a fan of artwork cards" width="3440" height="2160" data-path="images/design/import-from-url/url-example-site.webp" />
    </Frame>
  </Step>

  <Step title="Open Replit Design">
    Go to [replit.com/design](https://replit.com/design) and select **Import URL** under the prompt box. Agent recreates the site's look and feel as a starting point.

    <Frame caption="Import URL on the Replit Design home: paste a link to any website.">
      <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="The Replit Design home with the Import URL option selected and a tooltip reading 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="Paste the URL and start building">
    Selecting **Import URL** prefills the prompt: *"Recreate the look and feel of this website:"*. Paste your URL after it and select **Start**.

    <Frame caption="The prefilled recreate prompt with the example URL, ready to start.">
      <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="The Replit Design prompt box reading Recreate the look and feel of this website followed by the example URL, with the Start button" width="2293" height="1322" data-path="images/design/import-from-url/design-url-prompt.webp" />
    </Frame>
  </Step>
</Steps>

Agent recreates the site as a design frame in your project.

<Frame caption="The recreated Kosmo Studio landing page as a design frame in 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="The recreated Kosmo Studio landing page as a design frame in Replit Design, with the run marked complete in the chat panel" width="1600" height="1004" data-path="images/design/import-from-url/url-import-result.webp" />
</Frame>

## Make it yours

Select the imported frame and start reshaping it:

* **Follow a [suggestion](/design/explore-suggestions)**: the import arrives with proposed next steps, such as a dark editorial variant, a mobile viewport, or a contact page. Each generates as a fresh frame, so the original stays for comparison.
* **[Chat about it](/design/chat-about-your-design)**: use the input under the frame and brief it in your own words, *"swap the portfolio shots"*, *"make the hero type heavier"*.

<Frame caption="The imported frame selected, with suggested next steps proposing a dark editorial variant, a mobile viewport, and a contact page.">
  <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="The recreated Creative Studio frame selected in Replit Design, with the Suggested next steps panel beside it proposing a dark editorial variant, a mobile viewport, a contact page, and different approaches" width="1600" height="1004" data-path="images/design/import-from-url/url-make-it-yours.webp" />
</Frame>

## Next steps

<CardGroup cols={3}>
  <Card title="Explore suggestions" icon="lightbulb" href="/design/explore-suggestions">
    Explore what to design next, one click at a time.
  </Card>

  <Card title="Visual Editor" icon="pen-to-square" href="/design/visual-editor">
    Polish text, colors, spacing, and images directly.
  </Card>

  <Card title="Build your design" icon="hammer" href="/design/build-your-design">
    Turn the finished frame into a working app.
  </Card>
</CardGroup>
