# Guides

> Short, practical guides: use DESIGN.md with Claude Code, Cursor and Codex, spot AI-made design, download SVGs and 3D models, test every screen size.

Canonical page: https://sitepeel.dev/guides/

Practical guides for turning good website details into something you can build with.

Updated: 2026-10-24

## Explore

- [Sitepeel full tutorial](https://sitepeel.dev/guides/sitepeel-tutorial/index.md): Watch the 12-minute Sitepeel tutorial and follow written steps for all 13 tools: website inspection, Design MD, screenshots, responsive testing and more.
- [What is DESIGN.md](https://sitepeel.dev/guides/what-is-design-md/index.md): DESIGN.md is a Markdown file that tells AI coding agents how your UI looks. See Google’s spec, three real examples, where to get templates and how to make one.
- [DESIGN.md with Claude Code](https://sitepeel.dev/guides/design-md-claude-code/index.md): Import DESIGN.md into CLAUDE.md with @DESIGN.md so Claude Code follows your colors, type and spacing. Includes a sample CLAUDE.md and checks.
- [DESIGN.md with Cursor](https://sitepeel.dev/guides/design-md-cursor/index.md): Point Cursor at DESIGN.md with a project rule in .cursor/rules, AGENTS.md or an @ mention. Includes a sample .mdc rule and the four rule types.
- [DESIGN.md with Codex](https://sitepeel.dev/guides/design-md-codex/index.md): Make OpenAI Codex follow DESIGN.md with a few lines in AGENTS.md. See where Codex looks for instructions, its size limit and how to check what loaded.
- [DESIGN.md with GitHub Copilot](https://sitepeel.dev/guides/design-md-github-copilot/index.md): Make GitHub Copilot follow DESIGN.md with copilot-instructions.md, a path-specific .instructions.md file or AGENTS.md. Includes a sample file.
- [DESIGN.md with Windsurf](https://sitepeel.dev/guides/design-md-windsurf/index.md): Make Windsurf, now Devin Desktop, follow DESIGN.md with a workspace rule or AGENTS.md. Includes a sample rule and the four activation modes.
- [DESIGN.md with Gemini CLI](https://sitepeel.dev/guides/design-md-gemini-cli/index.md): Import DESIGN.md into GEMINI.md with @./DESIGN.md so Gemini CLI follows your design tokens. Check what loaded with /memory show. Sample file included.
- [DESIGN.md with v0, Lovable, Bolt, Replit](https://sitepeel.dev/guides/design-md-app-builders/index.md): Where v0, Lovable, Bolt and Replit keep project instructions, how to add DESIGN.md to each, and a short prompt you can paste into any of them.
- [Claude design skill](https://sitepeel.dev/guides/claude-design-skill/index.md): Install Anthropic’s frontend-design skill in Claude Code, see why it still makes generic UI, and give it a measured DESIGN.md so it builds your real look.
- [Is this website vibe coded?](https://sitepeel.dev/guides/vibe-coded-website/index.md): What a vibe coded website is, the clues that give one away, from builder badges to the same card grid, and how to check any site for free from its link.
- [Redesign a website with AI](https://sitepeel.dev/guides/redesign-website-with-ai/index.md): Redesign your website with AI from its link: find what looks generic, get a fix prompt, pick a look as a DESIGN.md, then rebuild in Lovable, v0 or Cursor.
- [Check if a site looks AI-made](https://sitepeel.dev/guides/check-if-website-looks-ai-generated/index.md): Spot the tells of AI-made web design, from default fonts and purple gradients to icon card grids, then check any site free and get a fix prompt.
- [Download SVGs from a website](https://sitepeel.dev/guides/download-svg-from-website/index.md): Save inline SVGs, sprite icons, SVG files and CSS background SVGs from any website, step by step, with Chrome DevTools or a free online asset extractor.
- [Download 3D models from a website](https://sitepeel.dev/guides/download-3d-models-from-website/index.md): Find and save the GLB, glTF, USDZ and Spline files a website loads, using Chrome DevTools or a free asset extractor, and learn what you may reuse.
- [Check a site on every screen size](https://sitepeel.dev/guides/check-website-on-every-screen-size/index.md): See a website on phones, tablets, laptops and monitors side by side, free. Find overflow, tiny text and small tap targets, then test real devices.
- [Find what a site is built with](https://sitepeel.dev/guides/what-is-a-website-built-with/index.md): Find a website’s framework, CMS or site builder, hosting and libraries from the traces in its code and headers, and learn what no checker can see.
- [Screenshot an entire webpage](https://sitepeel.dev/guides/full-page-screenshot-online/index.md): Screenshot an entire webpage in Chrome, Edge, Firefox or Safari, on Mac, Windows or a phone, with no extension. Or capture any page online from its link.
- [Download Lottie animations from a website](https://sitepeel.dev/guides/download-lottie-from-website/index.md): Save the Lottie JSON, .lottie and Rive files a website plays, with a free asset extractor or Chrome DevTools, then play them and check the license.
- [Download videos from a website](https://sitepeel.dev/guides/download-video-from-website/index.md): Download a video from a website four ways: Save video as, a free video downloader, Chrome DevTools or ffmpeg for streams. Plus what to do for YouTube and Vimeo.
- [Download fonts from a website](https://sitepeel.dev/guides/download-fonts-from-website/index.md): Find and save the WOFF2, WOFF and TTF font files a website loads, convert WOFF2 to TTF for desktop apps, and check the license before you use them.
- [Fix mobile horizontal scroll](https://sitepeel.dev/guides/fix-horizontal-scroll-mobile/index.md): Find the element that makes your mobile site scroll sideways, fix the CSS cause and retest. Includes a console snippet and a table of common fixes.
- [One toolkit for a design handoff](https://sitepeel.dev/guides/all-in-one-website-design-extension/index.md): Collect fonts, colors, HTML and CSS, assets and a screenshot from one page with one extension, then package them into a design handoff someone can use.
- [Fix blurry screenshots](https://sitepeel.dev/guides/fix-blurry-website-screenshots/index.md): Find where a website screenshot loses detail: the capture, the export or the app you shared it in. Check pixels at 100%, formats and downscaling.
- [Compare lifetime inspector licenses](https://sitepeel.dev/guides/pay-once-website-inspector-extensions/index.md): Compare pay-once website inspector extensions by included tools, browser activations and update terms, and keep AI-provider costs apart from the license.
- [Test foldable layouts](https://sitepeel.dev/guides/test-foldable-website-layouts/index.md): Test a website on foldable and dual-screen layouts: compare closed, open and dual states, keep content off the hinge, and know what previews prove.
- [Use your own AI provider](https://sitepeel.dev/guides/website-design-prompt-own-api-key/index.md): Connect your own AI provider in Sitepeel to refine a website design prompt. Set it up, see what is sent and what it costs, and fix failed requests.
- [Choose a screenshot format](https://sitepeel.dev/guides/png-jpg-webp-screenshots/index.md): Which format to use for website screenshots: PNG for interface text, JPG or WebP for photo-heavy pages, PDF for paged review. Compare quality and size.
- [CSS inspectors by task](https://sitepeel.dev/guides/best-css-inspector-chrome-extensions-2026/index.md): The best CSS inspector Chrome extensions in 2026, by task: Sitepeel, CSS Scan, CSS Peeper and VisBug, plus when Chrome DevTools is the better pick.
- [Preview fonts in a real layout](https://sitepeel.dev/guides/preview-website-fonts/index.md): Try new fonts on a real website before you code. Compare headings, body text and mobile wrapping with Swap fonts, then turn the choice into CSS.
- [Measure and rearrange a layout](https://sitepeel.dev/guides/inspect-measure-move-delete-website-elements/index.md): Measure a website layout, then move or remove elements temporarily to test an idea. Turn the experiment into clear notes and before-and-after screenshots.
- [Write a visual bug report](https://sitepeel.dev/guides/website-bug-report-screenshots/index.md): Write a visual bug report someone can reproduce: one focused screenshot, the viewport, steps and the expected result. Includes a copyable template.
- [Test responsive layouts](https://sitepeel.dev/guides/test-responsive-website-layouts/index.md): Test a responsive website at phone, tablet and desktop widths. Find where the layout breaks, check hard content, record the bug and verify on devices.
- [Edit website screenshots](https://sitepeel.dev/guides/edit-annotate-website-screenshots/index.md): Use the Sitepeel capture editor to crop website screenshots, add arrows and text, choose a browser frame or background, and export PNG, JPG, WebP or PDF.
- [Customize your tools](https://sitepeel.dev/guides/customize-sitepeel-tools/index.md): Choose a dock or a sidebar, rearrange the Sitepeel tools, set your screenshot defaults and find the AI settings in the Sitepeel Chrome extension dashboard.
- [Chrome extensions for designers](https://sitepeel.dev/guides/best-chrome-extensions-web-designers-2026/index.md): Six Chrome extensions for web designers in 2026, compared by task: fonts, colors, full-page screenshots, Figma import, tech stack and Design MD files.
- [Best website cloner tools](https://sitepeel.dev/guides/best-website-cloner-tools/index.md): Ten website cloners checked in October 2026: AI rebuilders like Anima, Same and Kloner, file copiers like HTTrack, and a free Clone prompt. What each gives you.
- [Color picker extensions compared](https://sitepeel.dev/guides/best-color-picker-chrome-extensions/index.md): ColorZilla, Eye Dropper, Sitepeel and Chrome DevTools compared as color pickers, plus when to sample a pixel and when to read the real CSS color instead.
- [Font finder extensions compared](https://sitepeel.dev/guides/best-font-finder-chrome-extensions/index.md): WhatFont, Font Finder, Sitepeel and Chrome DevTools compared for identifying website fonts, plus how to confirm the font that actually rendered.
- [Screenshot extensions compared](https://sitepeel.dev/guides/best-full-page-screenshot-chrome-extensions/index.md): GoFullPage, FireShot, Awesome Screenshot and Sitepeel compared by what you get: a full-page image, a PDF, an annotated bug report or a design reference.
- [Bring a website into Figma](https://sitepeel.dev/guides/website-to-figma/index.md): Bring a website into Figma with an editable import or a screenshot. Then check fonts, images, layers and mobile layouts before making components.
- [Screenshot to HTML and CSS](https://sitepeel.dev/guides/screenshot-to-html-css/index.md): Turn a screenshot into responsive HTML and CSS: map the sections, build a flexible layout, brief an AI coding assistant and compare the result.
- [Responsive website testing](https://sitepeel.dev/guides/responsive-website-testing-checklist/index.md): Test responsive layouts, menus, forms, long content and zoom with a practical checklist, a read-only overflow finder and a bug-report template.
- [AI landing-page prompt examples](https://sitepeel.dev/guides/ai-landing-page-prompts/index.md): Copy six AI landing-page prompts for a full brief, hero, features, pricing, forms and a final review. Each one asks for real facts, not invented proof.
- [Chrome extensions for developers](https://sitepeel.dev/guides/best-chrome-extensions-web-developers-2026/index.md): React Developer Tools, axe DevTools, Web Developer, Wappalyzer and Sitepeel compared by debugging task, with a template for recording each bug.
- [Inspect a website design](https://sitepeel.dev/guides/how-to-inspect-website-design/index.md): Inspect a website’s layout, fonts, colors and spacing in Chrome, step by step, with a checklist you can copy for writing down what you find.
- [Compare browser design tools](https://sitepeel.dev/guides/browser-tools-for-web-designers/index.md): Compare Sitepeel, Chrome DevTools and Lighthouse for website inspection, HTML/CSS exports and page audits. Choose by task, with a reusable checklist.
- [Fix a generic AI website](https://sitepeel.dev/guides/fix-generic-ai-website-design/index.md): Why AI-made websites look generic, and how to fix yours: one real user task, your real copy, references with a clear job and design rules you can check.
- [When AI ignores DESIGN.md](https://sitepeel.dev/guides/ai-ignoring-design-md/index.md): Your agent has DESIGN.md but the UI is still wrong? Check that it loads, remove conflicting rules, name real components and verify the result.
- [Keep designs consistent across projects](https://sitepeel.dev/guides/keep-ai-ui-consistent-across-projects/index.md): Keep separate sites and apps looking consistent when AI writes the UI: one shared token file, shared components and a versioned DESIGN.md file.
- [Choose the right AI design reference](https://sitepeel.dev/guides/screenshot-html-design-md-for-ai/index.md): Screenshot, HTML or DESIGN.md? See what each kind of reference shows an AI coding tool, what it misses, and which one to send for your task.
- [Understand what a website clone includes](https://sitepeel.dev/guides/can-you-clone-website-backend/index.md): No: a browser export copies the frontend you see, not server code or databases. See what a clone includes, why buttons break and what to rebuild.
- [Fix animations in a website rebuild](https://sitepeel.dev/guides/fix-cloned-website-animations/index.md): Fix missing scroll effects, broken GSAP timelines and hidden content after cloning a website. Rebuild one effect at a time on a readable static layout.
- [Fix copied CSS that looks wrong](https://sitepeel.dev/guides/copied-css-not-working/index.md): Copied HTML and CSS looks different? Check the stylesheet loads, then compare inherited values, custom properties, the parent layout and pseudo-elements.
- [Find larger website image sources](https://sitepeel.dev/guides/download-original-website-images/index.md): Get the larger image behind a website thumbnail: open the gallery view, check srcset and currentSrc, and know when the original isn’t public.
- [Fix fonts that look different](https://sitepeel.dev/guides/fonts-look-different-in-browsers/index.md): A font looks wrong in another browser or device? Check the loaded file, weight, fallback and viewport, then fix it with a correct @font-face.
- [Fix incomplete full-page screenshots](https://sitepeel.dev/guides/full-page-screenshot-not-working/index.md): Fix cut-off full-page screenshots, repeated sticky headers and blank images. Find what really scrolls, load lazy content and pick the right capture.
- [Clone a website](https://sitepeel.dev/guides/how-to-clone-a-website/index.md): Clone a website page as HTML and CSS: load it fully, export it with the Clone page tool in Sitepeel, then check what you still need to rebuild.
- [Create a Design MD file](https://sitepeel.dev/guides/create-design-md-from-website/index.md): Make a DESIGN.md file from any website with the free generator or the Design MD tool in Sitepeel, then check it so your AI agent can use it well.
- [Use Design MD with AI](https://sitepeel.dev/guides/use-design-md-with-ai/index.md): Hand DESIGN.md to Cursor, Claude Code or another AI coding assistant: where to save it, two prompts to copy and how to review what it builds.
- [Write a website design prompt](https://sitepeel.dev/guides/write-website-design-prompts/index.md): Write an AI website design prompt that works: the visitor’s task, the visual direction, states and mobile behavior. Copy and adapt the example.
- [Copy HTML and CSS](https://sitepeel.dev/guides/copy-html-css-from-website/index.md): Copy a website element’s HTML and CSS with the Pick element tool in Sitepeel, then fix the fonts, assets and parent styles that it depends on.
- [Extract website images](https://sitepeel.dev/guides/extract-images-from-website/index.md): Download a website’s images, SVGs and videos, choose the right size and see why some files won’t download. Online or with Sitepeel for Chrome.
- [Build a palette from a website](https://sitepeel.dev/guides/extract-website-color-palette/index.md): Get a website’s colors, give each one a role and turn them into CSS variables, with a short checklist for testing real text and background pairs.
- [Identify website typography](https://sitepeel.dev/guides/identify-fonts-on-website/index.md): Find the font a website uses, plus its weight, size and line height. Check the fallback, then try it in your own layout with a licensed copy.
- [Measure layout spacing](https://sitepeel.dev/guides/measure-website-spacing/index.md): Measure the padding, margins and gaps behind any website layout with the Inspect & measure tool in Sitepeel, then turn them into a spacing scale.
- [Preview copy in a layout](https://sitepeel.dev/guides/preview-website-copy/index.md): Try new headlines, button labels and section orders in place with Sitepeel’s Edit text and Move & delete tools, before you change your site.
- [Capture a design reference](https://sitepeel.dev/guides/capture-website-design-reference/index.md): Pick the right screenshot type for a design reference, capture it cleanly, and add the URL, screen width and notes that make it useful later.
- [Extract a design reference](https://sitepeel.dev/guides/extract-website-design-system/index.md): Turn a website’s repeated colors, type, spacing and components into a design system reference in DESIGN.md, with an evidence template to copy.
- [Fonts and colors of 168 top websites](https://sitepeel.dev/reports/top-website-fonts-and-colors/index.md): The fonts and colors of 168 top websites, measured in October 2026: Inter on 26%, custom type on 54%, 44% in dark mode. Charts, method and a free CSV.
- [AI slop on 126 startup websites](https://sitepeel.dev/reports/ai-slop-websites-2026/index.md): We ran the AI slop checker on 126 startup home pages from YC’s 2026 batches. The score spread, the 10 most common tells and the method, with a free CSV.
- [Compare tools](https://sitepeel.dev/compare/index.md): Honest, dated comparisons of website tools: Sitepeel vs MiroMiro, CSS Peeper and Hoverify, plus alternatives to BuiltWith, Wappalyzer, GoFullPage and more.