Sitepeel
Add to Chrome

Guides

72 guides

Start here

3
Sitepeel tutorial: 13 tools in one extension, with the tool sidebar for inspecting, cloning and capturing websites.
Start here12:39 video

How to use all 13 Sitepeel tools

Watch the 12-minute Sitepeel tutorial and follow written steps for all 13 tools: website inspection, Design MD, screenshots, responsive testing and more.

Watch the tutorial
One website produces typography, palette, code, assets and a capture through one toolkit.
Start here02

Turn one reference page into a design handoff.

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.

Read the guide
Your tools. Your order. Actual Sitepeel dashboard interface.
Start here03

Set up Sitepeel tools around the way you work.

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.

Read the guide

DESIGN.md & AI

23
“One file your AI can follow.” A website leads into a DESIGN.md file with colors, type, spacing and components, which leads into an AI agent’s code editor.
DESIGN.md & AI01

What is DESIGN.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.

Read the guide
“Import it once in CLAUDE.md.” DESIGN.md is imported into CLAUDE.md with the line @DESIGN.md, and Claude Code is asked to build the pricing page.
DESIGN.md & AI02

How to use DESIGN.md with Claude Code

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.

Read the guide
“A rule that points to your design.” A design.mdc rule in .cursor/rules with globs for .tsx files points to DESIGN.md, and Cursor builds buttons in its colors.
DESIGN.md & AI03

How to use DESIGN.md with Cursor

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.

Read the guide
“Tell Codex where the design lives.” AGENTS.md and DESIGN.md sit in the repository root; AGENTS.md says to read DESIGN.md before UI changes, and both feed Codex.
DESIGN.md & AI04

How to use DESIGN.md with OpenAI Codex

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.

Read the guide
“Give Copilot your design rules.” copilot-instructions.md in the .github folder says to follow DESIGN.md, and Copilot’s suggestion uses its colors.
DESIGN.md & AI05

How to use DESIGN.md with GitHub Copilot

Make GitHub Copilot follow DESIGN.md with copilot-instructions.md, a path-specific .instructions.md file or AGENTS.md. Includes a sample file.

Read the guide
“One rule for every UI file.” A .windsurf/rules/design.md rule with a glob trigger for .tsx files applies DESIGN.md’s colors to Header.tsx, Card.tsx and Button.tsx.
DESIGN.md & AI06

How to use DESIGN.md with Windsurf

Make Windsurf, now Devin Desktop, follow DESIGN.md with a workspace rule or AGENTS.md. Includes a sample rule and the four activation modes.

Read the guide
“Load DESIGN.md into Gemini’s memory.” GEMINI.md imports @./DESIGN.md, and Gemini CLI’s /memory show lists DESIGN.md as loaded.
DESIGN.md & AI07

How to use DESIGN.md with Gemini CLI

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.

Read the guide
“Attach it before the first prompt.” DESIGN.md is attached as project knowledge with the prompt “Build the landing page”, and the generated page uses its colors.
DESIGN.md & AI08

How to use DESIGN.md with v0, Lovable, Bolt and Replit

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.

Read the guide
“Give the skill your real design.” A SKILL.md file tagged frontend-design and a DESIGN.md file with color swatches both lead into one page built in those colors and type.
DESIGN.md & AI09

Claude’s frontend design skill, plus a DESIGN.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.

Read the guide
“Is this site vibe coded?” A generic landing page under a magnifying glass, with tags for a builder badge, stock purple and the same card grid, and a note: clues, not proof.
DESIGN.md & AI10

How to tell if a website was vibe coded

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.

Read the guide
“Redesign from your own link.” A generic page labelled Before goes through three steps, Score, Fix prompt and Rebuild, into a distinct page labelled After.
DESIGN.md & AI11

Redesign your website with AI, starting from its link

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.

Read the guide
“Spot the generic tells.” A generic landing page with callouts for a purple gradient, emoji icons and the same card grid, beside a score gauge from 0 to 100.
DESIGN.md & AI12

How to tell if a website looks AI-generated

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.

Read the guide
Reviewed page context goes to a chosen AI provider using an API key and returns as a design brief.
DESIGN.md & AI13

Refine a website design prompt with your own AI key.

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.

Read the guide
A specific brief connects to the hero, features, pricing, form and review of a landing page.
DESIGN.md & AI14

Six AI landing-page prompts you can copy

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.

Read the guide
Repeated generic layouts contrast with a distinct page built from specific typography, color and layout references.
DESIGN.md & AI15

Why does your AI website look like every other one?

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.

Read the guide
A DESIGN.md file outside the task context is contrasted with an explicitly referenced file inside it.
DESIGN.md & AI16

Your AI agent has DESIGN.md. Why is the UI still wrong?

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.

Read the guide
Shared design rules feed three different screens with matching type, buttons and spacing.
DESIGN.md & AI17

How to keep AI-generated UI consistent across projects

Keep separate sites and apps looking consistent when AI writes the UI: one shared token file, shared components and a versioned DESIGN.md file.

Read the guide
A screenshot provides appearance, HTML provides structure and DESIGN.md records design rules.
DESIGN.md & AI18

Should you give AI a screenshot, HTML or DESIGN.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.

Read the guide
Observed colors, typography and spacing from a page are organized into a DESIGN.md document.
DESIGN.md & AI19

How to create DESIGN.md from a website

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.

Read the guide
A DESIGN.md reference and a specific task are explicitly included in the context used to build a page.
DESIGN.md & AI20

Use DESIGN.md with your AI coding assistant

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.

Read the guide
A vague request is replaced by a brief that specifies goal, layout, content and behavior.
DESIGN.md & AI21

Write a website prompt an AI can act on

Write an AI website design prompt that works: the visitor’s task, the visual direction, states and mobile behavior. Copy and adapt the example.

Read the guide
Repeated styles across three pages are distilled into color, type, spacing and component rules.
DESIGN.md & AI22

Extract a design reference from a real website

Turn a website’s repeated colors, type, spacing and components into a design system reference in DESIGN.md, with an evidence template to copy.

Read the guide
The report’s table of the 10 most common AI slop tells on 126 startup home pages, led by one default font everywhere at 33%
DESIGN.md & AI23

What AI slop looks like on real websites

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.

Read the guide

Code & cloning

12
“See the stack behind the page.” A web page peels back to show its framework, CSS, hosting and analytics layers, each with its evidence: /_next/, class names, a response header and a script tag.
Code & cloning01

How to find out what a website is built with

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.

Read the guide
A crowded page is measured and temporarily rearranged to compare a cleaner layout.
Code & cloning02

Try a layout idea on the page before rebuilding it.

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.

Read the guide
A flat screenshot has one bounding box, while an editable layout exposes separate text, image and button layers.
Code & cloning03

Website to Figma: how to import a page and clean it up

Bring a website into Figma with an editable import or a screenshot. Then check fonts, images, layers and mobile layouts before making components.

Read the guide
A screenshot is broken into layout, type and spacing rules, then rebuilt as wide and narrow layouts.
Code & cloning04

How to turn a screenshot into HTML and CSS

Turn a screenshot into responsive HTML and CSS: map the sections, build a flexible layout, brief an AI coding assistant and compare the result.

Read the guide
A selected webpage card is inspected through its parent layout, typography, color and spacing.
Code & cloning05

How to inspect a website’s design

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.

Read the guide
A browser exchanges requests and responses with a server; the database and server logic remain behind the boundary.
Code & cloning06

Can you clone a website’s backend from the browser?

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.

Read the guide
A frozen page snapshot contrasts with an animation timeline driven by scripts, triggers and state.
Code & cloning07

Why do animations break when you clone a website?

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.

Read the guide
An isolated button loses the parent layout, CSS variables and font that shape its appearance.
Code & cloning08

You copied the CSS. Why does the element look different?

Copied HTML and CSS looks different? Check the stylesheet loads, then compare inherited values, custom properties, the parent layout and pseudo-elements.

Read the guide
Rendered page content becomes HTML, CSS and assets that are reviewed and rebuilt for a new frontend.
Code & cloning09

How to clone a website’s frontend

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.

Read the guide
A complete card is selected with its parent context and exported as connected HTML and CSS files.
Code & cloning10

Copy a website element’s HTML and CSS

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.

Read the guide
Outer margin, inner padding and the gap between siblings are shown as different spaces.
Code & cloning11

How to measure spacing on a website

Measure the padding, margins and gaps behind any website layout with the Inspect & measure tool in Sitepeel, then turn them into a spacing scale.

Read the guide
A card with short placeholder copy is compared with the same layout containing longer, wrapping content.
Code & cloning12

Preview website copy in the real layout

Try new headlines, button labels and section orders in place with Sitepeel’s Edit text and Move & delete tools, before you change your site.

Read the guide

Assets & screenshots

13
“Every SVG, as its own file.” Icons on a web page leave as inline SVG, sprite symbols and SVG files, and land in a folder as logo.svg, icon-plus.svg and arrow.svg.
Assets & screenshots01

How to download SVGs from a website

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.

Read the guide
“Find the model behind the 3D.” A product page with a 3D chair; its viewer lifts away to reveal model.glb, scene.gltf and texture.ktx2, with a note to check the license.
Assets & screenshots02

How to download 3D models from a website

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.

Read the guide
“Screenshot the whole page.” A browser window whose page runs on below the screen becomes one tall full-page.png, with tabs for Chrome, Edge, Firefox and Safari.
Assets & screenshots03

How to screenshot an entire webpage

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.

Read the guide
“Save the animation, not a GIF.” A bouncing animation in a browser window leads out to three files, animation.json, loader.lottie and button.riv, with a note to check the license.
Assets & screenshots04

How to download Lottie animations from a website

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.

Read the guide
“Save the site’s own video.” A looping background video in a browser window leads out to hero.mp4, loop.webm and stream.m3u8; an embedded player beside it is crossed out as not a file.
Assets & screenshots05

How to download a video from a website

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.

Read the guide
A sharp original letter loses detail when reduced and looks pixelated when enlarged again.
Assets & screenshots06

Why is my website screenshot blurry?

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.

Read the guide
PNG, JPG and WebP file cards illustrate interface detail, photo-heavy images and web delivery.
Assets & screenshots07

PNG, JPG or WebP: which is best for screenshots?

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.

Read the guide
An overlapping form error is marked once and linked to notes describing its location, actual behavior and expected result.
Assets & screenshots08

How do you write a useful visual bug report?

Write a visual bug report someone can reproduce: one focused screenshot, the viewport, steps and the expected result. Includes a copyable template.

Read the guide
A screenshot with a point. Actual Sitepeel capture interface.
Assets & screenshots09

Crop, annotate and export a website screenshot.

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.

Read the guide
A small thumbnail is traced through responsive image candidates to a larger available source.
Assets & screenshots10

How to find the larger image behind a website thumbnail

Get the larger image behind a website thumbnail: open the gallery view, check srcset and currentSrc, and know when the original isn’t public.

Read the guide
A long screenshot reveals a repeated sticky header, unloaded images and missing virtualized content.
Assets & screenshots11

Why does your full-page screenshot miss part of the page?

Fix cut-off full-page screenshots, repeated sticky headers and blank images. Find what really scrolls, load lazy content and pick the right capture.

Read the guide
Distinct images in a webpage are located and collected as individual SVG, WebP and PNG assets.
Assets & screenshots12

How to extract images and assets from a website

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.

Read the guide
A website screenshot is saved together with its viewport, interaction state and notes.
Assets & screenshots13

How to capture a website design reference

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.

Read the guide

Responsive

5
“Every screen, side by side.” The same page on a 1440 monitor, a 1280 laptop, an 820 tablet and a 390 phone, where one section overflows the screen.
Responsive01

How to check a website on every screen size

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.

Read the guide
A pricing card extends beyond a mobile viewport, then wraps correctly inside the same screen.
Responsive02

Why does my mobile website scroll sideways?

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.

Read the guide
A closed phone, an open foldable and a dual-screen device show different usable layout areas.
Responsive03

How do you test a website on a foldable phone?

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.

Read the guide
One page. Several screens. Actual Sitepeel responsive interface.
Responsive04

How do you test a responsive website?

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.

Read the guide
The same page reflows across four widths, with checks for text wrapping, focus and overflow.
Responsive05

A responsive website testing checklist

Test responsive layouts, menus, forms, long content and zoom with a practical checklist, a read-only overflow finder and a bug-report template.

Read the guide

Fonts & colors

6
“Get the font files a page loads.” A large Aa specimen in a browser window leads out to Sans-Regular.woff2, Sans-Bold.woff2 and Display.ttf, with a note to check the license.
Fonts & colors01

How to download fonts from a website

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.

Read the guide
The same heading and button are compared in two typefaces at the same mobile width.
Fonts & colors02

How do you preview a new font on a website?

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.

Read the guide
The same text changes width and shape when a fallback font renders instead of the intended font.
Fonts & colors03

Why does the same website font look different in another browser?

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.

Read the guide
Colors observed in a page are grouped into surface, text, action and accent roles.
Fonts & colors04

How to extract a website’s color palette

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.

Read the guide
Typography specimens compare font family, weight, line height and letter spacing.
Fonts & colors05

How to identify the fonts on a website

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.

Read the guide
Sitepeel’s measured design system pages for Stripe, Linear, Airbnb, Spotify, Notion and Vercel
Fonts & colors06

The fonts and colors of 168 top websites

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.

Read the guide

Comparisons

10
A one-payment license is checked against included tools, browser limits, updates and separate usage costs.
Comparisons01

What to check before buying a pay-once website inspector

Compare pay-once website inspector extensions by included tools, browser activations and update terms, and keep AI-provider costs apart from the license.

Read the guide
A selected button is examined by measuring space, tracing styles, copying code and testing widths.
Comparisons02

Best CSS inspector Chrome extensions in 2026, by task

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.

Read the guide
Type, color, capture and layout tools connect to the parts of a website each helps inspect.
Comparisons03

Best Chrome extensions for web designers in 2026

Six Chrome extensions for web designers in 2026, compared by task: fonts, colors, full-page screenshots, Figma import, tech stack and Design MD files.

Read the guide
One webpage branches into an offline page, frontend code and an editable layout.
Comparisons04

The best website cloner tools in 2026, compared

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.

Read the guide
A sampled screen pixel, a CSS background value and a palette with semantic color roles.
Comparisons05

Best color picker Chrome extensions for website work

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.

Read the guide
Three typography steps: identify a family, verify the rendered font and preview alternatives.
Comparisons06

Best font finder Chrome extensions for real website text

WhatFont, Font Finder, Sitepeel and Chrome DevTools compared for identifying website fonts, plus how to confirm the font that actually rendered.

Read the guide
A continuous full-page capture, a paginated PDF and an annotated detail serve different purposes.
Comparisons07

Best full-page screenshot Chrome extensions by workflow

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.

Read the guide
A page element connects to component structure, keyboard accessibility and network requests.
Comparisons08

Best Chrome extensions for web developers in 2026

React Developer Tools, axe DevTools, Web Developer, Wappalyzer and Sitepeel compared by debugging task, with a template for recording each bug.

Read the guide
A browser task branches into debugging code, exporting design references or auditing a page.
Comparisons09

Browser tools for web designers: which one fits the task?

Compare Sitepeel, Chrome DevTools and Lighthouse for website inspection, HTML/CSS exports and page audits. Choose by task, with a reusable checklist.

Read the guide
Screenshots of Sitepeel, MiroMiro, CSS Peeper, BuiltWith, Polypane and getdesign.md
Comparisons10

Compare tools

Honest, dated comparisons of website tools: Sitepeel vs MiroMiro, CSS Peeper and Hoverify, plus alternatives to BuiltWith, Wappalyzer, GoFullPage and more.

Read the guide

TAKE A CLOSER LOOK

Your next starting point is already on the web.

Inspect it. Understand it. Build something of your own.

Add to ChromeFree installTry the free tools