Skip to main content
Home/Recipes/Screenshot + token visual audit
Extraction

Screenshot + token visual audit

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 example.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

Basic token extractionMulti-page crawlDark mode analysisDTCG export to Tokens Studio or Figma VariablesExtract and merge tokens across key pagesRaw vs. filtered color analysisExtract Cloudflare-protected sites with FirefoxExtract authenticated views via CDP

Browse all

All recipes →

52 workflows

Continue reading

Getting started

Install Dembrandt and turn any public website into a complete set of design tokens in under 2 minutes. All you need is Node.js and a terminal.

Read more

MCP

Use Dembrandt as a tool inside Claude Code, Cursor, Windsurf, or any MCP-compatible editor. Your agent extracts live design tokens automatically when you ask.

Read more

Skills

30 UX and design system skills for AI agents. Install once, your agent designs with hierarchy, WCAG standards, and brand accuracy. The UX knowledge that normally costs senior consultant days.

Read more