Skip to content
Docs
    Menu

    Worked examples

    Rebuild an existing site

    Give the AI the address of an existing website, have it recreate the look and structure one page at a time, then make it your own.

    In this tutorial you rebuild a site from its web address. This is useful when you're moving your own site to Starjay, or when you want a new site that borrows the feel of one you like.

    The AI opens the address in a browser, takes screenshots, and reads the page's colors, fonts and structure. It then rebuilds the page with your site's own colors and fonts, so you can change them later in one place.

    Before you start

    • The site must be public. The AI can't open pages behind a login, or addresses on a private network.
    • Make a list of the pages you want. The AI looks at one page per web address you give it, so you'll rebuild the site page by page.
    • Each look at a site uses credits, on top of the credits for the AI's work.
    • Only copy text and images you have the right to use.

    Rebuild the homepage

    1. 01

      Create a blank site

      On the dashboard, click New site, choose Blank, name it and click Create site. Open the site.

    2. 02

      Give the AI the address

      In the Describe your site box, paste:

      Recreate the homepage of https://www.example-bakery.com as closely as you can:
the same layout, section order, colors, fonts and spacing, on desktop and
mobile. This is my own site, so keep the original headings and text.

      Replace the address with the site you want to rebuild.

    3. 03

      Watch it work

      In the AI panel, the activity line shows Fetching reference site…, then Building context…, while the AI looks at the page. It then builds your homepage.

    4. 04

      Compare the two

      Open the original site in another browser tab and compare. Use the Breakpoints mode in the top bar to check the phone and tablet layouts too.

    5. 05

      Ask for corrections

      Be specific about what's different:

      The hero on the original has the image on the right and the text on the left,
and the headline is much larger. The testimonials are in a three-column row,
not a slider. Fix those.

    Rebuild the other pages

    Give the AI one address per request:

    Now recreate https://www.example-bakery.com/about as a new About page. Reuse the
header, footer and colors you already made.

    Repeat for each page. Asking it to reuse what it already built keeps the header, footer and colors consistent across pages.

    Bring in your images

    The rebuilt pages need images in your own image library. Either upload them in the Images panel, or ask the AI:

    Import the hero photo and the three product photos from the original homepage
into my image library and use them on the homepage.

    Make it your own and save

    1. 01

      Review and save

      Step through the versions in the AI Session bar, then click Save.

    2. 02

      Adjust colors and fonts

      Open Tokens in the left icon rail. The AI mapped the original's colors and fonts to your site's own color scales and font slots. Change them under Colors and Typography, and every page follows.

    3. 03

      Write down the brand rules

      In Tokens, open Brand Guide and describe your brand's voice and style. The AI reads it on every request, which keeps new pages consistent.

    4. 04

      Publish

      Click Publish at the top right, then Publish in the panel.

    If something goes wrong

    Problem What to do
    The AI says it couldn't open the address. Check the address works in a private browser window without signing in. Some sites block automated browsers; attach screenshots instead.
    The result looks different from the original. Name the specific differences, one or two at a time. Screenshots of the part that's wrong help.
    The text is placeholder text. Ask: Use the exact text from the original page.
    Pages look inconsistent with each other. Ask the AI to reuse the existing header, footer and sections, and to use the site's color and font tokens.
    You used up credits quickly. Each look at a site uses credits. Rebuild one page at a time and review before moving on.
    Menus, tabs or sliders on the original don't work the same. Ask the AI to rebuild that part. Simple interactive parts are built with plain page scripts.

    Related