Start with a website you want to inspect
Install Sitepeel from the Chrome Web Store, pin its icon from the extensions menu and open a normal website tab. Click the Sitepeel icon to open the tools. You can also try the website demo here before installing.
The written steps below are a companion to the video. They explain what to select, what to check and what you can take into your next project. Browser settings pages and extension stores do not allow these tools to run.
1. Pick element: copy HTML and CSS
Choose Pick element, hover over a component and click to select it. Review the preview before copying its HTML and CSS or saving the export. A card or button is a good first example because the result is small enough to inspect.
When you move an element into your project, check its font, inherited colors and parent layout. Copying a component does not automatically recreate every dependency from the original page.
2. Clone page: export the rendered layout
Open the page at the width you want to study and let its images and fonts load. Choose Clone page, review the rendered preview and export the HTML and styles. Include assets when you need them for a standalone reference.
The export is a snapshot of what the browser renders. It does not include the original application source, backend, database or authentication system. Test links and rebuild interactions in your own project.
3. Design prompt: turn a reference into a brief
Choose Design prompt to collect the page’s design details into a brief. Review the result and add your own goal: the page you want to build, the audience and the framework you are using.
The extracted prompt works without an AI provider. If you enable optional AI, configure your own provider and key in the dashboard. Check the generated brief before using it as instructions for a coding assistant.
4. Design MD: save a reusable design reference
Open Design MD to collect typography, colors, spacing and other visible design details. Review the visual reference, then copy or download the Markdown file for your project.
Use DESIGN.md as a reference alongside your own requirements. Correct extracted values where needed and record missing states or layouts. A single page is a starting point for a design system, rather than proof that every page follows the same rules.
5. Extract assets: find images, videos and SVGs
Choose Extract assets to browse the media available on the current page. Use filters to narrow the collection, preview an asset and save the files you need.
Check the original dimensions before using an image in a new layout. A thumbnail can look sharp in the asset list but become blurry when enlarged. Make sure you have permission to reuse the material.
6. Extract colors: collect a website palette
Open Extract colors to inspect the page’s palette. Copy individual values or export the collection as CSS or JSON when you want to keep it with your project.
Give colors meaningful roles such as surface, text, border and accent. Check contrast for text and controls; a color found on a website is not automatically suitable for every new use.
7. Detect fonts: inspect typography
Activate Detect fonts and hover over a heading or paragraph. Read the font family, size, weight and line height. Inspect several text styles to understand the page’s hierarchy.
A declared font stack may include fallback fonts. If the appearance differs in your project, verify that the intended font actually loaded and check the weight and letter spacing.
8. Inspect & measure: check layout and spacing
Choose Inspect & measure to see dimensions, padding and margins on the page. Compare neighboring elements to understand spacing, alignment and the width of the content area.
Measure at more than one viewport width. Fixed values that work on a desktop layout may overflow on a phone, while flexible containers can change size without changing their spacing rules.
9. Edit text: test real copy in a layout
Activate Edit text, select a text element and replace it with your own words. Use realistic headings, long names or translated copy to check wrapping and the height of cards.
These edits are a browser preview. They do not publish changes to the website or update its CMS. Keep the copy you want to use and make the final change in your project.
10. Screenshot: capture, crop and export
Open Screenshot and select Visible area, Full page, Snip & capture or Pick an element. For pages with lazy images or scroll-triggered content, keep Scroll before capture enabled and follow the progress messages.
In the capture editor, adjust the crop, annotate the image and choose a frame or background when presenting it. Export PNG, JPG, WebP or PDF from the export menu. Keep a plain capture for precise layout reviews.
11. Responsive viewer: compare screen sizes
Open Responsive viewer and choose the devices you want to compare. Add phone, tablet, desktop or foldable viewports, drag previews into a useful arrangement and adjust the scale so they fit your workspace.
Scale changes the size of the preview on your screen; the device viewport determines the layout’s CSS width. Use mockups for presentation and test long content, navigation and overflow. A browser preview does not replace testing on physical devices or a different browser engine.
12. Swap fonts: try a different typographic direction
Choose Swap fonts to preview another font family on the current page. Apply it to headings, body text or both, then compare the rhythm and hierarchy of the result.
Check line breaks and button widths after changing fonts. A visually similar family can have different character widths and change the layout. Verify font licensing and loading before adding it to your project.
13. Move & delete: explore a different arrangement
Open Move & delete to rearrange elements or remove a distracting component from the current page. Use undo as you compare alternatives.
Treat the result as a layout experiment. Browser edits do not change the published site, and moving an element does not redesign its responsive rules. Rebuild the arrangement in your source project and test the surrounding content.
Set up your workspace and keep the useful details
Open the Sitepeel dashboard to choose a dock or sidebar, reorder tools and set your capture and responsive defaults. Keep frequently used tools close to the work you are doing.
A practical first workflow is to inspect one component, export a Design MD reference, compare its layout at several widths and save a screenshot with your notes. Review the result in your own project before shipping it.