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

# Redesign your existing website

> Recreate your current site as a design frame, compare directions side by side, then build the winner.

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>;
};

Your site works but it looks dated, and describing a redesign convinces nobody. Recreate
the live site as a design frame in Replit Design, explore directions next to the original,
and build the one that wins. The import recreates look and feel as a starting point, not a
pixel copy of your markup. Every direction lands as a new frame, so the original stays on
the canvas for comparison.

## Best for

* Designers who need to show a redesign next to the current site, not describe one.
* Founders refreshing a site whose content is right and whose look is tired.

## Before you start

Have the public URL of the page you want to rework. Decide what must survive the redesign
(the offer, the nav, and the proof points) and what's open. Anything behind a login won't import.

## Prompt the agent

Go to [replit.com/design](https://replit.com/design) and select **Import URL** under the
prompt box. The prompt is prefilled; paste your URL after it.

<AiPrompt>
  Recreate the look and feel of this website: \[URL]. Stop at the design frame.
  Do not start building an app.
</AiPrompt>

Once the frame lands, brief the redesign itself:

<AiPrompt>
  Keep the offer, nav, and proof points from the original. Generate three
  directions for the hero and the type.
</AiPrompt>

## What to expect

Three directions land as separate frames beside the import, with the offer, nav, and proof
points carried across each one. You compare four things: the site you have and three ways it
could look. Judge them as whole screens before you look at details. Refine the winner by
chatting about it, or by clicking into elements in the [Visual Editor](/design/visual-editor).

When a direction is right, select the frame and choose **Build** to
[turn it into real software](/design/build-your-design). You pick the path: a new app in the
same project, or your existing site app restyled to match the frame. Agent makes a
checkpoint first, so either path rolls back.

## Make it work for you

<AiPrompt>
  Keep the layout as it is and change only the visual language: the type scale,
  the spacing rhythm, and the color. Put it next to the original.
</AiPrompt>

<AiPrompt>
  Recreate the pricing and contact pages in the winning direction so the whole
  site matches.
</AiPrompt>

## Troubleshooting

<AccordionGroup>
  <Accordion title="The import doesn't match the original">
    Import URL recreates look and feel, not markup. Name the parts that must
    match exactly, then fix them with chat or the Visual Editor.
  </Accordion>

  <Accordion title="A page behind a login won't import">
    The import needs a public URL. Recreate that page from a screenshot instead.
  </Accordion>

  <Accordion title="You think you lost the original">
    You didn't. Every generation lands as a new frame, and the import stays on
    the canvas. Select it to compare.
  </Accordion>

  <Accordion title="The redesign dropped your content">
    Say that the copy, nav, and proof points come from the original, and that
    only the visual direction is open.
  </Accordion>
</AccordionGroup>

## Related

<CardGroup cols={2}>
  <Card title="Create your design system" href="/use-cases/create-design-system">
    Extract the winning look so the next page starts on brand.
  </Card>

  <Card title="Review a live website" href="/use-cases/review-a-live-website">
    Check links, layout, and accessibility once the redesign is live.
  </Card>
</CardGroup>