On this page #
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:
wget -m -k -E -p -np https://sample.website.com/
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.