{"slug": "til-wget-mirror-any-website-for-local-ai-design-reference", "title": "TIL: wget: Mirror Any Website for Local AI Design Reference", "summary": "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.", "body_md": "## On this page\n\n# wget: Mirror Any Website for Local AI Design Reference\n\nI stopped fighting browser “Save Page As” and opaque MHTML files to get design references into AI coding agents.\n\nRebuilding 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.\n\nA single `wget`\n\ncommand downloads the site as a self-contained local mirror with CSS animations, fonts, and assets intact.\n\n## The Mirror Command\n\n```\nwget \\\n  --mirror \\\n  --convert-links \\\n  --adjust-extension \\\n  --page-requisites \\\n  --no-parent \\\n  https://sample.website.com/\n```\n\nShort version:\n\n```\nwget -m -k -E -p -np https://sample.website.com/\n```\n\n## Quick Reference\n\n| Flag | Short | Purpose |\n|---|---|---|\n`--mirror` | `-m` | Enables recursive download, timestamps, and infinite depth |\n`--convert-links` | `-k` | Rewrites links to point to local files for offline viewing |\n`--adjust-extension` | `-E` | Appends `.html` or `.css` to files saved without standard extensions |\n`--page-requisites` | `-p` | Downloads inline images, stylesheets, and scripts |\n`--no-parent` | `-np` | Restricts downloads to the target path without ascending |\n\n## Formats Compared\n\n| Format | Preserves CSS Animations | Agent Can Grep Files | Offline Browsing |\n|---|---|---|---|\n| Browser “Save Page As” | Drops external fonts and styles | No (flattens assets, breaks paths) | Broken paths |\nMHTML Archive (`.mhtml` ) | Preserves assets | No (single multipart MIME file) | Browser only |\n`wget` Mirror | Preserves CSS and keyframes | Yes (clean tree of `.html` and `.css` ) | Working local links |\n\n## Rebuilding in Astro or Next.js\n\nAI agents parse separated `.html`\n\nand `.css`\n\nfiles without hallucinating layout details. Once the mirror sits in your workspace, point the agent at the local files:\n\n```\n# 1. Mirror the target site\nwget -m -k -E -p -np https://sample.website.com/\n\n# 2. Point Claude Code or Cursor at the local files\nclaude \"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.\"\n```\n\nThe agent reads the DOM structure, extracts animation timings, and translates the layout into your component framework.\n\n## What I Learned\n\n- Five\n`wget`\n\nflags (`-m -k -E -p -np`\n\n) produce an offline site mirror `--convert-links`\n\nrewrites asset URLs for local browsing without network requests- CSS animations, typography, and layout rules stay intact on disk\n- Agents grep individual\n`.html`\n\nand`.css`\n\nfiles cleanly, unlike`.mhtml`\n\nblobs - Local markup gives agents exact dimensions and easing curves instead of guesswork from screenshots\n\n*How do you feed design references to your AI coding agents? Share your setup on LinkedIn.*", "url": "https://wpnews.pro/news/til-wget-mirror-any-website-for-local-ai-design-reference", "canonical_source": "https://kondasamy.com/til/2026/wget-mirror-website-local-reference/", "published_at": "2026-08-24 00:00:00+00:00", "updated_at": "2026-08-24 16:13:36.944882+00:00", "lang": "en", "topics": ["developer-tools", "ai-tools"], "entities": ["wget", "Astro", "Next.js", "Claude Code", "Cursor", "Tailwind CSS"], "alternates": {"html": "https://wpnews.pro/news/til-wget-mirror-any-website-for-local-ai-design-reference", "markdown": "https://wpnews.pro/news/til-wget-mirror-any-website-for-local-ai-design-reference.md", "text": "https://wpnews.pro/news/til-wget-mirror-any-website-for-local-ai-design-reference.txt", "jsonld": "https://wpnews.pro/news/til-wget-mirror-any-website-for-local-ai-design-reference.jsonld"}}