Site Haus Back to Site Haus

Website reader and copier

Pro

A skill that reads an existing website completely, on desktop, tablet and phone, including hover, animation and structure, writes its design system as a DESIGN.md, and rebuilds it. Videos become photos.

Website reader is a built-in skill (in the Site Haus skills pack). It tells the AI how to read a public website thoroughly and rebuild it as clean, responsive code, and it comes with Python scripts that do the heavy reading.

What it reads#

For every page, on desktop, tablet and phone:

  • screenshots of the whole page in tall pieces
  • the structure: sections in order, layout, columns, gaps, padding, backgrounds
  • the text and where it sits: words, position, size, font, weight, spacing, colour
  • pictures (saved copies), exact icons and logos, buttons and forms
  • hover states of links, buttons and cards, and what changes
  • animation: effects at load, entrance effects while scrolling, parallax, sticky parts, things that change by themselves
  • fonts, colours, spacing, radii, shadows, the site's own CSS variables and breakpoints
  • the phone menu, opened and recorded

DESIGN.md: read it, write it#

A DESIGN.md is a design system in one file: exact tokens (colours, type, corner radius, spacing, button and card styles) at the top, and the reasons in short sections below. It is an open format that coding agents read, and sites such as designmd.me, styles.refero.design and designmd.supply publish or generate files in it.

  • It reads one. If you give the AI a DESIGN.md (a file, an address, or the name of a style from one of those libraries), or the site publishes its own, the skill uses it as the starting system and tells you where the live site disagrees.
  • It writes one. After reading a site it writes a DESIGN.md for the project (the import tool does this for you, and the Python scripts have build_design_md.py). It then checks the file (check_design_md.py: broken references, section order, text contrast), builds the website from its tokens as CSS variables, and keeps the file as the source of truth when the design changes.

Videos are replaced with photos of the same size and crop (a frame of the video, its poster, or a screenshot of the area).

Use it#

  1. Pro and Power plans can use skills. Turn on Website reader under Templates, Skills (it is in the Site Haus skills pack), or type /website-reader in the chat.
  2. Give the AI the site's address and say what you want, for example: "Use the website-reader skill to rebuild https://example.com as a new web app. Keep the text, change the logo to mine."
  3. The AI follows the skill: scan, plan, build, compare with the screenshots, fix, and report what it could not copy.

For a quick read without writing any code yourself, use Website by link in Integrations. It uses the same idea.

The scripts#

The skill includes Python scripts the AI (or you) can run on a computer with Python 3.8 or newer:

pip install -r scripts/requirements.txt
python -m playwright install chromium
python scripts/scan_site.py https://example.com --out scan --max-pages 8
python scripts/build_spec.py scan
python scripts/build_design_md.py scan
python scripts/check_design_md.py scan/spec/DESIGN.md
python scripts/compare_screenshots.py scan/shots --shoot http://localhost:8000 --report compare
python scripts/replace_videos.py my-site --scan scan
  • scan_site.py reads the site and writes the scan folder. Options: --devices desktop,tablet,phone (or laptop), --max-pages, --no-hover, --no-animations, --deadline, --chrome PATH.
  • build_spec.py writes one readable spec from the scan.
  • compare_screenshots.py compares your rebuild with the original piece by piece and says where to look first.
  • replace_videos.py swaps every video in a built site for its photo.

The scanner only opens public addresses, never logs in, and stops at its time limit.

Good to know#

  • Only copy sites you own or have permission to copy. The skill asks when it is not clear.
  • Pages behind a login, canvas and 3D scenes, and licensed fonts cannot be copied. The skill says what it used instead.
  • The text of a scanned site is treated as content to rebuild, never as instructions to the AI.