Skip to content
On this page

    wget: Mirror Any Website for Local AI Design Reference

    2 min read
    CLI DevTools AI Agents Web Design wget

    I stopped fighting browser “Save Page As” and opaque MHTML files to get design references into AI coding agents.

    Rebuilding an interface in Astro or Next.js with AI coding agents requires real markup, CSS keyframes, and local assets. Live URLs fail on client-rendered pages or behind logins. Browser “Save As” flattens folders and breaks relative paths. MHTML archives pack everything into one multipart blob that agents cannot grep.

    A single wget command downloads the site as a self-contained local mirror with CSS animations, fonts, and assets intact.

    The Mirror Command

    wget \
  --mirror \
  --convert-links \
  --adjust-extension \
  --page-requisites \
  --no-parent \
  https://sample.website.com/

    Short version:

    wget -m -k -E -p -np https://sample.website.com/

    Quick Reference

    FlagShortPurpose
    --mirror-mEnables recursive download, timestamps, and infinite depth
    --convert-links-kRewrites links to point to local files for offline viewing
    --adjust-extension-EAppends .html or .css to files saved without standard extensions
    --page-requisites-pDownloads inline images, stylesheets, and scripts
    --no-parent-npRestricts downloads to the target path without ascending

    Formats Compared

    FormatPreserves CSS AnimationsAgent Can Grep FilesOffline Browsing
    Browser “Save Page As”Drops external fonts and stylesNo (flattens assets, breaks paths)Broken paths
    MHTML Archive (.mhtml)Preserves assetsNo (single multipart MIME file)Browser only
    wget MirrorPreserves CSS and keyframesYes (clean tree of .html and .css)Working local links

    Rebuilding in Astro or Next.js

    AI agents parse separated .html and .css files without hallucinating layout details. Once the mirror sits in your workspace, point the agent at the local files:

    # 1. Mirror the target site
wget -m -k -E -p -np https://sample.website.com/

# 2. Point Claude Code or Cursor at the local files
claude "Inspect ../sample.website.com/index.html and ../sample.website.com/css/. Recreate the hero section with its CSS keyframe animations in src/components/Hero.astro using Tailwind CSS."

    The agent reads the DOM structure, extracts animation timings, and translates the layout into your component framework.

    What I Learned

    • Five wget flags (-m -k -E -p -np) produce an offline site mirror
    • --convert-links rewrites asset URLs for local browsing without network requests
    • CSS animations, typography, and layout rules stay intact on disk
    • Agents grep individual .html and .css files cleanly, unlike .mhtml blobs
    • Local markup gives agents exact dimensions and easing curves instead of guesswork from screenshots

    How do you feed design references to your AI coding agents? Share your setup on LinkedIn.

    Back to top