TIL: wget: Mirror Any Website for Local AI Design Reference

A developer shares a wget command that mirrors any website into a local folder with CSS animations, fonts, and assets intact, enabling AI coding agents like Claude Code or Cursor to use real markup as design references. The command uses five flags (-m -k -E -p -np) to create a clean tree of .html and .css files that agents can grep, unlike browser 'Save Page As' or MHTML archives. The technique is presented as a solution for rebuilding interfaces in Astro or Next.js with AI agents.

On this page wget: Mirror Any Website for Local AI Design Reference 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 | Flag | Short | Purpose | |---|---|---| --mirror | -m | Enables recursive download, timestamps, and infinite depth | --convert-links | -k | Rewrites links to point to local files for offline viewing | --adjust-extension | -E | Appends .html or .css to files saved without standard extensions | --page-requisites | -p | Downloads inline images, stylesheets, and scripts | --no-parent | -np | Restricts downloads to the target path without ascending | Formats Compared | Format | Preserves CSS Animations | Agent Can Grep Files | Offline Browsing | |---|---|---|---| | Browser “Save Page As” | Drops external fonts and styles | No flattens assets, breaks paths | Broken paths | MHTML Archive .mhtml | Preserves assets | No single multipart MIME file | Browser only | wget Mirror | Preserves CSS and keyframes | Yes 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.