Skip to main content
Home/Recipes/Mobile vs. desktop token comparison
Extraction

4.Mobile vs. desktop token comparison

DesignerDeveloperQA

Overview

Extract the same site at desktop and mobile viewport. Ask an AI to identify which tokens change between breakpoints and which stay fixed — finding type scales that don't adapt, spacing that ignores viewport, or radii that differ unexpectedly.

Responsive design problems are often invisible until a user reports them. A type scale that stays fixed across viewports, spacing that doesn't compress on mobile, or border radii that differ between breakpoints — none of these show up in a single extraction. Run Dembrandt twice on the same URL, once without flags (desktop) and once with --mobile, then compare the two token sets with an AI agent. The output is a concrete list of what changes between viewports and what probably should but doesn't.

Extract desktop

Terminal
dembrandt brand.com --save-output

Extract mobile viewport

Terminal
dembrandt brand.com --mobile --save-output
Agent prompt
# Load both extractions, then:
"Compare these two extractions from the same site,
one desktop one mobile. Which tokens change between
viewports and which stay fixed? Flag any type sizes
that don't scale, spacing that stays identical, or
radii that differ unexpectedly."
Output

Per-token viewport diff: what adapts responsively and what is hardcoded across breakpoints.

Browse all

All recipes →

43 workflows