5.Screenshot + token visual audit

Name: Dembrandt
Author: Dembrandt

DesignerDeveloper

Overview

Extract tokens and capture a screenshot in one command. Feed both to an AI agent to find what the JSON missed: textures, gradients, image-based backgrounds, icon weight, and visual elements that tokens don't capture.

Design token extraction is precise about what it measures but blind to what it doesn't. Gradients, background images, icon weight, texture, illustration style, and visual density don't appear in token JSON. Running --screenshot alongside extraction gives an AI agent two complementary views of the same site: the structured token data and the actual visual result. The agent can cross-reference them, spotting elements in the screenshot that suggest uncaptured design decisions.

Extract + screenshot

Terminal

dembrandt brand.com --save-output --screenshot /tmp/brand.png

Agent prompt

# Load the PNG and JSON into Claude, then:

"Look at the screenshot and the extracted tokens together.

Does the visual impression match what the tokens describe?

Are there elements in the screenshot that suggest tokens

Dembrandt didn't capture: textures, gradients, image-based

backgrounds, icon weight, illustration style?"

Output

Visual gap report: design elements present in the screenshot but absent from the token JSON.

More in Extraction

1.Basic token extraction 2.Multi-page crawl 3.Dark mode analysis 4.Mobile vs. desktop token comparison 6.DTCG export to Tokens Studio or Figma Variables 7.Extract specific paths and merge 8.Raw vs. filtered color analysis 9.Extract Cloudflare-protected sites with Firefox 10.Extract authenticated views via CDP

Browse all

All recipes →

43 workflows