AssetSnip is built around one idea: the gap between seeing something you want and having it in your project should be as small as possible. Here's how the whole workflow fits together.
Step 01 — Install
Head to the Chrome Web Store and add the AssetSnip extension. It installs in a few seconds and adds a small panel icon to your toolbar. That's it — no account required to start inspecting, though you'll need one to save assets to your library.
Once it's installed, the extension stays completely out of your way. It doesn't inject scripts, doesn't slow down page loads, and doesn't show any UI until you invite it.
Step 02 — Browse and Capture
Open any website you want to reference. Click the AssetSnip toolbar icon to open the side panel.
You'll immediately see the page broken down into tabs:
- Colors — the full ranked palette, deduped and sorted by surface area
- Fonts — every typeface detected, with size scale and weights
- Images — all images, SVGs, and favicons on the page
- Videos — embedded video and animation references
- Gradients — CSS gradient definitions, ready to copy
Inspect Mode
Switch on Inspect Mode and move your cursor over the page. AssetSnip highlights sections as you hover — click any element to capture only its assets, not the whole page. This is the fastest way to grab exactly what you're after without noise from headers, footers, or ads.
Step 03 — Save and Export
Hit Save on any asset and it lands in your AssetSnip library, tagged to the source URL. From the library you can:
- Copy CSS — paste a ready-to-go custom property snippet
- Download — grab the raw file (PNG, SVG, MP4, etc.)
- Export as tokens — get a JSON token set compatible with Figma and most design systems
No cleanup step, no renaming files, no hunting through a screenshot folder three weeks later.
That's the whole loop. If you want to go deeper on any specific feature — colors, fonts, the AI icon generator — the rest of the blog has you covered.