Skip to main content
Home/Recipes/Cross-pollinate extraction with brand context
AI Pipelines

Cross-pollinate extraction with brand context

DesignerDeveloperPMAgency

Overview

Extracting a design system from a website alone is not an accurate way to reverse-engineer a brand. Combine Dembrandt's live extraction with the rest of your context (a brand guide, a Figma export, an existing token file, a Storybook, a screenshot) and the agent reconciles them into one reliable token set.

A website is only one expression of a brand, so extracting it in isolation misses intent that lives elsewhere. In real engagements you want to cross-pollinate the extraction with the surrounding context. Anything the editor can read works: another app, a design system exported from Figma via MCP, a brand guide PDF, a screenshot or poster, an existing DESIGN.md, an existing token or theme file (tailwind.config, CSS custom properties), a Storybook or component library, a DTCG token JSON exported from Tokens Studio, or a competitor extraction to benchmark against. In an agentic workflow this is trivial. Open Claude Code, Copilot, or your preferred editor, drag and drop the supporting files into context, and let the agent crawl the target with Dembrandt alongside them. Dembrandt's native Playwright extraction supplies the measured, real-world tokens; the loaded documents supply intent and ground truth. Together they produce a reliable starting set of design tokens and a clear map of where the live product diverges from the brand it is supposed to express.

Crawl the marketing site across key paths

Terminal
dembrandt example.com /products /dashboard /settings --save-output

Crawl the app across key paths

Terminal
dembrandt app.example.com /home /projects /preferences --save-output
Context you can drop in (anything the editor reads)
# Each source improves a different part of the result:
# brand-guide.pdf intended palette, type, voice
# design.md prior decisions and constraints
# tailwind.config / CSS anchors output to your real token values
# Storybook / components component-level ground truth
# tokens.json (DTCG) structured tokens from Tokens Studio
# competitor extraction a benchmark to compare against
# screenshot / poster visual reference for off-system values
Agent prompt: combine extraction with loaded context
# Drag [brand-guide.pdf] and [design.md] into context, then:
"Using the attached [brand-guide.pdf] and [design.md], crawl
example.com /products /dashboard and /settings with Dembrandt.
Combine that result with a second extraction of app.example.com,
crawling /home /projects and /preferences.
Output all design system differences in an ASCII table, with a
suggested next step per row, and point out the gaps or mistakes
against the brand guide that need action from my side."
Output

One reconciled token set from the live product plus loaded context, with an ASCII diff table and a list of gaps against the brand guide.

Browse all

All recipes →

53 workflows