Back
Team AssetSnip

From Any Website to CSS in Seconds: AssetSnip's Export System

How AssetSnip turns raw captured assets into clean CSS custom properties, Tailwind config, and JSON design tokens — with zero manual cleanup.

Capturing assets from a site is only half the job. The other half — the part that usually eats your time — is turning those raw values into something you can actually use in code. AssetSnip handles that second half automatically.

What you get out of the box

Every asset you save to your library is immediately available in three export formats:

CSS custom properties

The simplest path. Click Copy CSS on any palette and you get a :root {} block ready to paste:

:root {
  --color-brand:     #ff7a2f;
  --color-surface:   #fff8f3;
  --color-foreground:#1a0e08;

  --font-sans:       'Inter', sans-serif;
  --text-sm:         0.875rem;
  --text-base:       1rem;
  --text-lg:         1.125rem;

  --radius-md:       0.5rem;
  --radius-lg:       1rem;
}

Every value is there — colors, font families, size scales, and border radii. No copy-pasting individual hex codes.

Tailwind theme.extend

If you're on a Tailwind project, the export switches to a theme.extend object:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand:     '#ff7a2f',
        surface:   '#fff8f3',
        foreground:'#1a0e08',
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
      borderRadius: {
        md: '0.5rem',
        lg: '1rem',
      },
    },
  },
}

Paste it into your config, run the build. Done.

JSON design tokens

For teams using Figma's Variables API, Tokens Studio, or any W3C-compatible token pipeline, AssetSnip exports a flat JSON token file:

{
  "color": {
    "brand":     { "value": "#ff7a2f", "type": "color" },
    "surface":   { "value": "#fff8f3", "type": "color" },
    "foreground":{ "value": "#1a0e08", "type": "color" }
  },
  "fontSize": {
    "sm":   { "value": "14px", "type": "dimension" },
    "base": { "value": "16px", "type": "dimension" },
    "lg":   { "value": "18px", "type": "dimension" }
  }
}

This file can be pushed directly into a Figma variable library or consumed by any build pipeline that supports the W3C design token format.

How colors are named automatically

AssetSnip uses hue, lightness, and frequency to classify colors automatically:

  • The most-used dark tone becomes foreground
  • The lightest background becomes surface
  • High-saturation, mid-lightness tones become brand, accent, or highlight
  • Near-greyscale values get a grey-{n} scale

You can rename any token in the library before exporting. The rename persists across sessions, so your token names stay consistent if you capture from the same site over time.

Downloading raw assets

For images, SVGs, and videos, the export is simpler: one click downloads the file in its original format. SVGs are kept as SVG (not rasterized), which matters when you're grabbing icon sets or logos.

The point of all of this is to compress the loop. You see something on a site, you capture it, and it appears in your codebase — in the right format, with the right naming — without a manual cleanup step sitting in between.