# Capture a 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.

Canonical page: https://sitepeel.dev/guides/capture-website-design-reference/

Choose the smallest capture that makes your point, set the width and page state, take it with Sitepeel’s Screenshot tool and note the URL and viewport.

Updated: 2026-10-24

Tool used in this guide: [Website screenshot tool](https://sitepeel.dev/website-screenshot/index.md)

Free website tool for this task: [Website screenshot](https://sitepeel.dev/free-tools/screenshot/index.md) (https://sitepeel.dev/free-tools/screenshot/)

## In short

- Full page for flow, visible area for a composition, element for a component
- Wait for fonts and images and close unrelated overlays first
- A screenshot shows the look, not the CSS behind it
- Compare your build at the same width and state

## How to use it

1. **Decide what it shows** Pick the smallest area that explains the point. A tiny button in a long screenshot is hard to judge.
2. **Prepare the page** Set viewport and zoom, wait for fonts and images, set the state you want and close unrelated overlays.
3. **Capture with Screenshot** Open Sitepeel’s Screenshot tool and choose Visible area, Full page, Snip & capture or Pick an element.
4. **Review before saving** Look for missing media, sticky elements and loading placeholders, then crop or annotate in the editor.
5. **Add the context** Record the URL, the viewport and one or two notes on hierarchy, type or spacing.

## Which capture to use

The free screenshot tool captures the full page or the first screen. The Screenshot tool in Chrome adds Snip & capture and Pick an element.

Match the capture to the reference

| Capture | Best for |
| --- | --- |
| Full page | Section order and the rhythm of a long page |
| Visible area or first screen | A composition at a known width |
| Snip & capture | A precise region that crosses element edges |
| Pick an element | One component, card or section |

- [Fix missing sections in a full-page screenshot](https://sitepeel.dev/guides/full-page-screenshot-not-working/index.md)

## Add what the image can’t show

- The page URL and the viewport width.
- One or two notes on hierarchy, type or spacing.
- Exact font and spacing values from Detect fonts or Inspect & measure.
- A narrow-screen capture when responsive behavior matters.
- Which parts are inspiration and which assets you may reuse.

Tip: Pair the screenshot with a DESIGN.md file when you need the colors, type and spacing in writing.

## Compare before and after

Capture your build at the same viewport and page state as the reference, then compare the relationships between elements, not single pixels. Update the reference when the project changes on purpose; the first screenshot isn’t a permanent spec.

## Questions and answers

### How do I take a full-page screenshot of a website?

Paste the link into Sitepeel’s free screenshot tool and choose Full page, or choose Full page in the Screenshot tool in Chrome. Both scroll first so lazy images load.

### Which formats can I export?

PNG, JPG, WebP or PDF, from both the free screenshot tool and the Screenshot tool’s editor in Chrome.

### Why is part of my full-page screenshot missing?

Lazy images, sticky headers, embedded media and animations can interfere. Let the page load fully, then check the result before saving.

## Related pages

- [Website screenshot tool](https://sitepeel.dev/website-screenshot/index.md): Capture a full page, the visible area, a snip or one element. Then crop, annotate, frame and export your website screenshots in the Sitepeel capture editor.
- [DESIGN.md generator extension](https://sitepeel.dev/design-md-chrome-extension/index.md): Make a DESIGN.md from the page you have open, even behind a login, with the Sitepeel Chrome extension. Save it as a skill for Claude Code, Codex or Cursor.
- [CSS inspector & ruler](https://sitepeel.dev/css-inspector/index.md): An element inspector and page ruler for Chrome: hover any element for its size, padding and margins, and measure the space between elements on any website.
- [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.
- [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.