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

# Quick Start

> A step-by-step onboarding guide made just for you.

Step1.dev lets you clone any website pixel-perfectly in seconds—or import your own existing site. From there, use AI to modify anything through natural language, fuse in designs from any other website with Magic Fusion, and publish with one click when you're ready.

## 1. Create a Project

Whether you have a reference site in mind, want to continue developing an existing site, or are starting from a blank slate—Step1.dev supports three ways to get started:

<AccordionGroup>
  <Accordion title="Clone Any Website">
    Click clone on any website and get an exact copy in seconds—looks and feels identical to the original.

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

    <Steps>
      <Step title="Install the Browser Extension">
        Install the Step1.dev extension from the Chrome Web Store. Once installed, the icon appears in your browser toolbar.

        <Card icon="chrome" href="https://chromewebstore.google.com/detail/ai-site-cloner-clone-any/kadbegcbiplbenlokcdjkmicjaophmif" title="Install Step1.dev Extension">
          Get it free on the Chrome Web Store
        </Card>
      </Step>

      <Step title="Click Clone on Any Website">
        Open the site you want to clone. Click the Step1.dev extension icon and select **Clone this page**.
      </Step>

      <Step title="Jump Straight to the Editor">
        Step1.dev analyzes the page and opens it in the editor automatically. Your cloned version is ready instantly.
      </Step>

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

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

    **Best for:**

    * Using a competitor or reference site as a design starting point
    * Client sends a reference → clone → swap brand content → deliver
    * Upgrading the look of sites generated by v0 / Lovable / Bolt
  </Accordion>

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

    <Frame>
      <img src="https://mintcdn.com/infernet/pR3K373fKK4rGn92/images/clone-step1.png?fit=max&auto=format&n=pR3K373fKK4rGn92&q=85&s=7002b0005b96ad5bf0881b4af29df4eb" alt="Import existing site" width="2872" height="1510" data-path="images/clone-step1.png" />
    </Frame>

    <Steps>
      <Step title="Open Your Existing Website">
        Navigate to the site you want to continue developing.
      </Step>

      <Step title="Clone and Import via Extension">
        Click the Step1.dev extension icon and select **Clone this page**. The page imports into the editor automatically.
      </Step>

      <Step title="Continue Building on Top of It">
        Modify, extend, or redesign any part of the page using natural language.

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

    **Best for:**

    * Redesigning or upgrading an existing site
    * Importing an older site to fuse in new design elements

    <Note>
      Only the visual UI is imported—no functionality, logic, or interactions are carried over.
    </Note>
  </Accordion>

  <Accordion title="Start from Scratch">
    Describe your idea in natural language and Step1.dev builds the site for you.

    <Frame>
      <img src="https://mintlify.s3.us-west-1.amazonaws.com/infernet/images/en-from-scratch.png" alt="Start from scratch" />
    </Frame>

    Type your vision into the prompt on the homepage:

    <Note>
      Examples:

      * "Create a SaaS landing page with a feature section, pricing table, and FAQ."
      * "Build a minimal personal portfolio with project showcases and a contact section."
    </Note>

    **Tips:**

    * The more specific your description, the better the first result
    * You can always refine through conversation after the initial generation
    * Combine with Magic Fusion to elevate the design by borrowing from sites you love
  </Accordion>
</AccordionGroup>

## 2. Magic Fusion

Pull design styles or elements from any website and blend them into your project—just point, click, and describe what you want.

<Frame>
  <video autoPlay={true} muted={true} loop={true} playsInline={true} src="https://mintlify.s3.us-west-1.amazonaws.com/infernet/videos/en-magic-fusion-demo.mp4" />
</Frame>

<Steps>
  <Step title="Select a Reference Page and Activate Fusion">
    In the **Assets** panel on the left side of the editor, find the reference page you've collected (e.g., the Raycast homepage). Click the **Fusion** button on that asset card.
  </Step>

  <Step title="Pick the Design You Want">
    The **Magic Fusion** window opens with the full reference page. Hover to highlight any section with a **blue outline**, then click to select it—it turns **green**.

    <Tip>
      You can select a single element (a button group, animation, etc.) or an entire page section.
    </Tip>
  </Step>

  <Step title="Tell AI How to Use It">
    Click **Fuse Selection** to return to the editor. In the AI chat, describe where to place it and any adjustments you want.

    <Note>
      Example: "Add the button group I just selected below the Hero section. Keep the animation but change the color to our brand primary."
    </Note>
  </Step>

  <Step title="AI Completes the Fusion">
    The **Fusing Element** indicator appears. AI blends the selected design into your project, automatically matching your existing style.
  </Step>
</Steps>

<AccordionGroup>
  <Accordion title="What fusion modes are available?">
    Magic Fusion works at any level of granularity—from layout and visual style down to micro-animations. Just describe what you want in natural language.

    * **Component Fusion**: Select a specific element and blend it into your project
    * **Full-page Fusion**: Migrate the overall look and feel of a reference site into your project
    * **One-click Style Switch**: Let AI switch your entire project's visual style to match a reference page
  </Accordion>

  <Accordion title="Common use cases">
    * Fuse Stripe's gradient effects into your landing page
    * Apply Linear's animations to your product showcase
    * Use Notion's clean layout for a documentation site
    * Transfer Glossier's brand feel to a client's skincare site
  </Accordion>
</AccordionGroup>

***

## 3. Refine Your Project

<AccordionGroup>
  <Accordion title="Visual Edit">
    Click the **Design** button in the bottom-left to visually select and precisely edit UI elements.

    <Card icon="mouse-pointer-click" href="/en/visual-edit" title="Learn about Visual Edit">
      Click any element to edit it directly
    </Card>
  </Accordion>

  <Accordion title="Add or Update Features">
    Just describe what you want. Step1.dev handles the rest.

    <Note>
      Example: "Polish the UI—clean, modern, and intuitive, similar to Notion's style."
    </Note>
  </Accordion>

  <Accordion title="Add Image Assets">
    Upload images directly in the chat and describe how to use them. Step1.dev adds them to your project automatically.

    <Note>
      Example: "Add this image as the homepage background."
    </Note>
  </Accordion>

  <Accordion title="Version Rollback">
    Not happy with a recent change? Click the <Icon icon="history" /> button at the top-right of the chat, or the `Restore code` button below any message, to go back to a previous version.
  </Accordion>

  <Accordion title="Ask Mode">
    Not sure how to approach something? Switch to Ask Mode to get suggestions without changing anything in your project.

    * Click the `Ask` button in the bottom-right of the chat

    <Note>
      Example: "How can I add drag-and-drop to reschedule calendar events?"
    </Note>
  </Accordion>
</AccordionGroup>

***

## 4. Deploy & Publish

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/infernet/images/en-deploy-publish.png" alt="Deploy and Publish" />
</Frame>

<AccordionGroup>
  <Accordion title="Automatic Deployment">
    Every time you make a change, Step1.dev **automatically deploys** your project—no manual action needed. Each version gets its own accessible link.
  </Accordion>

  <Accordion title="Share and Preview">
    Click the <Icon icon="share-2" /> button in the top-right to copy your project link and share it with clients or teammates.

    <Note>
      The link always points to the latest version—no need to resend it after each update.
    </Note>
  </Accordion>

  <Accordion title="Publish Live">
    When your project is ready to share publicly, click the **Publish** button in the top-right corner to go live.

    <Note>
      The published link does not update automatically with future changes—each time you want a new version to go live, click **Publish** again.
    </Note>
  </Accordion>

  <Accordion title="Connect a Custom Domain">
    Connect your own domain so the site is accessible at your custom URL.

    <Steps>
      <Step title="Open Project Settings">
        Click the settings icon in the top-right and go to the **Domain** tab.
      </Step>

      <Step title="Enter Your Domain and Follow the Steps">
        Type in your domain and follow the on-screen setup instructions to complete the connection.
      </Step>
    </Steps>
  </Accordion>

  <Accordion title="Export Your Project">
    You can export your project at any time and deploy it to your own server or any cloud platform.

    Click the <Icon icon="download" /> button in the top-right to download the full project.
  </Accordion>
</AccordionGroup>

***

## 5. Learn More

<CardGroup cols={2}>
  <Card icon="wand-sparkles" href="/en/magic-fusion" title="Magic Fusion Deep Dive">
    Explore the three fusion modes and advanced techniques
  </Card>

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