Skip to main content
Home/Recipes/Find tokens that fit a page's purpose
AI Pipelines

30.Find tokens that fit a page's purpose

DesignerDeveloper

Overview

Describe the purpose of a page or a token you want to create. Ask an AI to find a reference site that uses that approach well, then extract it to get the actual values.

When designing a specific page type (a checkout flow, an onboarding screen, a data-dense dashboard, an emotional marketing moment), some visual choices work better than others. Instead of guessing what tokens to use, describe the page's purpose and emotional register to an AI agent. The agent identifies a reference site that executes that purpose well, you extract it with Dembrandt, and the agent then describes exactly which tokens make it work: the spacing scale that creates calm, the type weight that signals authority, the border radius that softens urgency. The extracted values become a starting point for the new design.

Claude Code prompt: find and extract
# Step 1: ask the agent to identify a reference:
"I am designing a [checkout flow / onboarding / dashboard / landing page].
The emotional register should be [calm and trustworthy / energetic / serious / warm].
Which live site executes this page type and tone exceptionally well?
Name one URL I should extract with Dembrandt."
# Step 2: extract the suggested site:
# dembrandt [suggested-url] --save-output
# Step 3: load the JSON and ask:
"Now analyze the extracted tokens from [site].
Output a table:
TOKEN TYPE | VALUE | EMOTIONAL EFFECT | APPLIES TO MY PAGE (yes/no)
Then give three concrete starting values I should adopt:
1. Primary color: [hex] — because [reason]
2. Base spacing: [px] — because [reason]
3. Border radius: [px] — because [reason]
Keep explanations to one line per token."
Output

Reference site identified + extracted token set + explanation of which values create the intended emotional register.

Browse all

All recipes →

43 workflows