Site Haus Back to Site Haus

Import a website by link

Paste any public website address. A real browser finds its pages, takes screenshots and reads all the text, and the AI rebuilds it as an editable website you own.

Use this to start from a site that already exists: your own old site, a site you are redesigning, or one you have permission to copy.

How to use it#

  1. Open Integrations, find Website by link (under Design) and press Import.
  2. Paste the website address and choose how many pages to read: one page, a few, or The whole site (up to 40 pages).
  3. Press Read the site and build. A few pages take a minute or two; the whole site can take several minutes. You can watch the steps in the dialog.
  4. A new project opens and the AI starts building. When it finishes, it compares its result with the screenshots and tells you what it could not reproduce.

What it does#

  • Opens the site in a real browser (Chromium), so sites that draw themselves with JavaScript work too.
  • Finds the pages through the menu, the links on each page and the site's own page list (its sitemap), so pages that no menu links to are found too. For a big site it reads every main page and a couple of samples of each kind of page (for example blog posts or products), up to the number you chose, so the whole site's design is covered.
  • Reads three pages at a time, so a large site finishes in a few minutes.
  • Takes screenshots of each page: the desktop view in tall pieces from top to bottom, and the phone view of the first pages.
  • Reads the structure and every word: the sections in order, headings, buttons, the menu, the colours, the fonts and sizes, the pictures, and all the text of each page in reading order.
  • Saves the pictures (up to 120) in the project (assets/site/) so the rebuild never links to the original site.
  • Measures the brand and writes it as a guideline in design/brand-guide.md: the exact colours (page, text, accent, every colour by use), the site's own CSS variables, the fonts and where they load from (Google Fonts link or the site's own font files, which are saved in assets/fonts/ when they are small enough), every type style (size, weight, line height, letter spacing), the content width, section padding, gaps, corner radius, shadows, gradients and the breakpoints where the layout changes.
  • Writes a DESIGN.md at the top of the project: the site's design system in the open DESIGN.md format (colour roles, type styles, corner radius, spacing, button and card tokens in the front matter, and the reasons in the sections below). The AI builds from its tokens and keeps it up to date, and you can use the same file in other tools. If the site publishes its own DESIGN.md, that is saved too, as design/source-DESIGN.md.
  • Records hover and motion in the guideline and in design/site-motion.json: for one of each kind of element (menu link, primary and secondary button, card, image link, text link, footer link) it moves the pointer over it and records what changes (colour, background, lift, shadow, underline) and how fast; which blocks fade or slide in while you scroll, with their start and end states; how the header behaves when you scroll (sticks, shrinks, gets a background); the site's CSS animations (keyframes) and common transitions; and which animation libraries it uses (for example GSAP, Lenis or AOS).
  • Writes the rest down in design/site-spec.md, design/site-tokens.json and design/site-structure.json. The AI follows these, the brand guideline and the screenshots.

Limits to know about#

  • Public pages only. Pages behind a login, a paywall or a cookie wall are not read.
  • Some sites block automated browsers. If it cannot read the site you will see a message and no empty project is left behind.
  • Pages of the same kind. On a site with hundreds of blog posts or products, a couple of each are read as examples; the AI builds the page design once and you add the rest through your own content.
  • The AI sees the first pages' screenshots. The screenshots attached for the AI cover the first pages (up to 24 images); every page is still in the written spec.
  • Fonts. Google Fonts are linked by name. A site's own font files are saved only if they are under about 600 KB, and you should use them only if you have the right to that font; otherwise the AI picks the closest Google font.
  • Motion is read from the first pages. Hover and scroll-in effects are recorded on the first two or three pages, and the detailed look on the first five. Effects driven by video, 3D or heavy scripts are described, not copied.
  • The rebuild is not a pixel-perfect copy. It matches the look and content closely, and you can then change it with chat or Select to edit.
  • Copy only what you may. Only import sites you own or have permission to copy. Site Haus reads public pages and changes nothing on them.
  • Safety. The browser runs in its own locked-down container that cannot reach private networks or Site Haus itself, and addresses on private or internal networks are refused.
  • It counts as normal AI use for the rebuild; reading the site is free.

From Claude, ChatGPT and other AI agents#

When your AI agent is connected (see Connect your own AI), ask it to import https://example.com into Site Haus (add the whole site to read up to 40 pages). It uses the import_website tool: Site Haus reads the site and creates a project, the agent sees the screenshots and reads the spec, then rebuilds every page with its file tools. The same limits apply.

See also Framer, which imports a Framer site by its link in the same way.