Library

128 assets · 6 folders

Save page

section-04.png

section-05.png

section-10.png

section-19.png

section-20.png

section-06.png

section-11.png

section-17.png

northwind.app
NorthwindProductPricingDocsSign up

Design systems,
shipped faster.

h1 · 48px Inter 600

Tokens, components and docs your whole team can build from.

Start freeSee demo

Tokens

Components

Docs

AssetSnip

Colors

Fonts

Inter · 600

CSS

font: 600 48px Inter;
color: #1C1C1C;

Extract reusable design
assets from any website.

Colors, fonts, SVGs and code, captured from any live page.

Add to Chrome

DESIGN.md works with the coding agents you already use

  • Claude Code
  • Cursor
  • Codex
  • GitHub Copilot
  • Windsurf
  • Gemini
  • Cline
  • v0
Features

Capture what matters.
Export what you need.

AssetSnip keeps the workflow simple: grab the exact assets you want, store them in one place, and bring clean context into design, code, or AI-assisted builds.

Inspect live sections

Hover to highlight a region, then capture HTML, CSS, Tailwind, colors, and font details in context.

assetsnip.com
AssetSnipFeaturesPricingBlog

Extract reusable design assets

Colors, fonts, SVGs and code, captured from any live page.

Add extension
Inspect
Library
Export
h1.hero-title | 1180 × 72
Captured styles
font
Inter 600
size
48 / 1.1
color
#1C1C1C
tracking
-0.03em

Collect media directly

Grab images, inline SVGs, video, and Lottie from public pages, then save or download them.

assetsnip-website-asset-overview.pngDownloading…
design-research-workflow.pngPNG · 86 KB
logo.svgSVG · 4 KB

Capture motion and Lottie

Keep video and Lottie JSON in reach for client reviews, handoff, and rebuild work.

loader.json
Playing
Lottie · JSON60 fpsLoop

Save assets cleanly

Keep captures in a cloud library with tags and folders, ready to search and share later.

Search library⌘K
Brand refs24 items

12.png

logo.svg

13.png

#FF683F

18.png

chrome-icon.svg

#landing#pricing#icons
Saved to Brand refs

Colors and gradients

Store the palette with reusable values instead of eyeballing screenshots.

Move into code faster

Export HTML, CSS, Tailwind snippets, and React-style markup into CodePen or your build.

assetsnip.com › a.cta
1<a class="cta" href="/signup">
2 Get Started
3</a>
PreviewGet Started

Generate and vectorize SVG icons

Create SVG icons from prompts or vectorize references, then save the results to your library.

minimal line icons, 2px stroke
4 results · SVG

Design context for coding agents

Turn live pages or saved assets into DESIGN.md context for AI coding workflows, with the real files behind the design.

assetsnip-com-DESIGN.md
Workflow

Capture. Save. Reuse.

No screenshot folders, no hunting through DevTools, and no extra cleanup step just to keep a good reference.

Step 01

Install

Add AssetSnip to Chrome. It takes a few seconds and stays out of the way until you open the side panel.

chromewebstore.google.com

AssetSnip

Extract design assets · Chrome extension

Developer tools·Works with Chrome, Brave, Edge
Add to Chrome
Step 02

Browse and capture

Navigate any site, then grab colors, fonts, images, and sections directly from the page.

assetsnip.com
Extract reusable design assets
h1 · Inter 600
3 assets captured
Step 03

Save and export

Save assets, export CSS/HTML/Tailwind, or create DESIGN.md context for your coding agent.

Export sectionsection.hero
Copy CSS.hero { … }
Copy Tailwindrounded-full bg-…
Copy HTML<section …>
Generate DESIGN.mdfor coding agents
Saved to library · Brand refs
For AI-assisted frontend work

Design context for your AI agents.

Turn references into assets, tokens, and DESIGN.md context your coding agent can use.

Step 01

Capture the reference

Capture colors, fonts, SVGs, images, and implementation details from the live site.

assetsnip.comCapturing…
Colors—
TypographyInter · Sora—
SVGslogo, icons—
ImagesAVIF · PNG—
Step 02

Create the design context

Create lightweight DESIGN.md from the extension or fuller context from dashboard assets.

Generate DESIGN.md

Choose what the agent should learn from.

Live site

assetsnip.com

Saved assets

83 selected

Generate
MDassetsnip-com-DESIGN.md3.2 KB · tokens + rationale
Step 03

Build with your agent

Use DESIGN.md and assets in Cursor, Codex, Claude Code, GitHub Copilot, or your agent.

agent — ~/my-app
> Build the pricing page from DESIGN.md
Read the DESIGN.md workflow
Asset Types

Every asset, ready to export

Images

PNG, JPG, WebP, AVIF

AssetSnip
Download PNGOpen original
Pricing

Compare plans clearly

A simple plan comparison matrix for users who want to see limits, library size, and advanced features at a glance.

Free

For trying AssetSnip.

$0/month

Get Started

Core Features

Page overview
Inspect mode
Colors and gradients
Images, SVGs, videos, gradients, fonts
Core set
AI icon generation
0 / month

Monthly Limits

Total downloads
10 / month
Lottie downloads
5 / month
Gradient downloads
5 / month
Inspect downloads
5 / month
Bulk export runs
Not included

Library

Saved items
10 items
Saved images, icons, colors, gradients
Saved videos and Lottie JSON
AI icons in library
Not included

Support

Email support
Priority support
Not included

Starter

For regular use.

$12/month

Get Starter

Core Features

Page overview
Inspect mode
Colors and gradients
Images, SVGs, videos, gradients, fonts
AI icon generation
9 / month

Monthly Limits

Total downloads
300 / month
Lottie downloads
15 / month
Gradient downloads
50 / month
Inspect downloads
25 / month
Bulk export runs
10 / month

Library

Saved items
100 items
Saved images, icons, colors, gradients
Saved videos and Lottie JSON
AI icons in library

Support

Email support
Priority support
Not included

Pro

Most popular

For power users.

$24/month

Go Pro

Core Features

Page overview
Inspect mode
Colors and gradients
Images, SVGs, videos, gradients, fonts
AI icon generation
27 / month

Monthly Limits

Total downloads
2,000 / month
Lottie downloads
50 / month
Gradient downloads
200 / month
Inspect downloads
100 / month
Bulk export runs
50 / month

Library

Saved items
500 items
Saved images, icons, colors, gradients
Saved videos and Lottie JSON
AI icons in library

Support

Email support
Priority support
FAQ

Questions, answered clearly

AssetSnip can capture images, inline SVGs, videos, colors, CSS gradients, fonts, and Lottie JSON. Everything you save shows up in your cloud library, taggable and organized for reuse later.

Ready when you are

Stop collecting dead screenshots. Start saving real design references.

Add AssetSnip in Chrome or Firefox. Capture once, save exact assets, and bring DESIGN.md context into your AI coding workflow when you build.

Add to Chrome
AssetSnip — Extract design assets
assetsnip.com
AssetSnipScanning…
OverviewAssetsInspect

6

Media

26

SVGs

51

Colors

14

Fonts

Site palette

Typography

Inter400 – 700
Sora600, 700
Space Mono400, 700
Save all to library
AssetSnipFeaturesPricingBlog

Extract reusable
design assets

h1 | 48px Inter 500

Colors, fonts, SVGs and code, captured from any live page.

Add extension