> ## Documentation Index
> Fetch the complete documentation index at: https://docs.step1.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Pixel-Perfect Clone

> Clone any website in one click—identical to the original

Use the browser extension to clone any website you like—not an approximation, not a screenshot interpretation, but an exact copy. Once cloned, just tell the AI what changes you want.

<Frame>
  <img src="https://mintcdn.com/infernet/pR3K373fKK4rGn92/images/clone-compare.png?fit=max&auto=format&n=pR3K373fKK4rGn92&q=85&s=0cab0958382b809bdae2d73a2bdc5090" alt="Clone result" width="3112" height="1127" data-path="images/clone-compare.png" />
</Frame>

***

## How to Clone a Website

<Steps>
  <Step title="Install the Browser Extension">
    Install the Step1.dev extension from the [Chrome Web Store](https://chromewebstore.google.com/detail/ai-site-cloner-clone-any/kadbegcbiplbenlokcdjkmicjaophmif). Once installed, the icon appears in your browser toolbar.
  </Step>

  <Step title="Click Clone on Any Website">
    Navigate to the site you want to clone. Click the Step1.dev extension icon in the toolbar, then click **Clone This Page** in the popup. Once you hover over page elements, an action bar appears at the top—select **Clone Full Page** to clone the entire page, or **Clone Component** to clone just that element.

    <Frame>
      <img src="https://mintcdn.com/infernet/pR3K373fKK4rGn92/images/clone-popup-step.png?fit=max&auto=format&n=pR3K373fKK4rGn92&q=85&s=bcc32256cef7eca63a9d4f5959513bde" alt="Click clone on target website" width="1896" height="1180" data-path="images/clone-popup-step.png" />
    </Frame>
  </Step>

  <Step title="Jump Straight to the Editor">
    Once captured, click **Remix**—Step1.dev analyzes the page and opens it in the editor automatically. The cloned version is ready instantly.

    <Frame>
      <img src="https://mintcdn.com/infernet/pR3K373fKK4rGn92/images/clone-demo.png?fit=max&auto=format&n=pR3K373fKK4rGn92&q=85&s=1c75636d83e50f6801e82debe2c7b599" alt="Clone result in editor" width="2878" height="1574" data-path="images/clone-demo.png" />
    </Frame>
  </Step>

  <Step title="Edit with Natural Language">
    Describe your changes in the AI chat—swap the logo, update the copy, change the colors, or add new features.

    <Note>
      Example: "Replace the navbar logo with ours, update all copy to English, and change the primary color to deep blue."
    </Note>
  </Step>

  <Step title="Deploy and Share">
    Every change auto-deploys instantly. Click the <Icon icon="share-2" /> button in the top-right to share your live link.
  </Step>
</Steps>

***

## Use Cases

<AccordionGroup>
  <Accordion title="Clone Any Public Website">
    See a design you love? Clone it as your starting point, then swap in your own content.

    **Best for:**

    * Cloning a competitor or inspiration site as a design foundation
    * Upgrading the look of sites generated by v0 / Lovable / Bolt
  </Accordion>

  <Accordion title="Import Your Existing Site (Re-development)">
    Bring your current website into Step1.dev and keep building on top of it—no need to start over.

    The process is the same as cloning—open your existing site, click the extension, and it imports directly into the editor.

    <Note>
      Example: "Keep the overall layout. Change the card section to three columns and add a hover animation."
    </Note>

    **Best for:**

    * Redesigning or upgrading an existing site
    * Importing an older site to fuse in new design elements
  </Accordion>
</AccordionGroup>

***

## Common Next Steps After Cloning

<AccordionGroup>
  <Accordion title="Replace Brand Content">
    The first thing after cloning is usually swapping the original site's branding with your own. Do it all in one instruction:

    <Note>
      Example: "Replace the logo with the uploaded image, change all brand names to our product name, update the primary color to #0066FF, and update the Hero headline to: Build your product faster."
    </Note>
  </Accordion>

  <Accordion title="Fuse in a Different Design Style">
    Not satisfied with the cloned design? Use Magic Fusion to blend in elements from other websites.

    <Card title="Learn about Magic Fusion" icon="wand-sparkles" href="/en/magic-fusion">
      Extract design elements from any site with point-and-click + natural language
    </Card>
  </Accordion>
</AccordionGroup>

***

## Learn More

<CardGroup cols={2}>
  <Card title="Magic Fusion" icon="wand-sparkles" href="/en/magic-fusion">
    Blend any website's design style into your project
  </Card>

  <Card title="Prompt Guide" icon="message-circle" href="/en/basics">
    Clone best practices and prompt techniques
  </Card>
</CardGroup>