Skip to main content
AI Pipelines

One design system from several products, as three variants

DesignerAgency

Overview

A portfolio has no single truth: five apps carry five drifted palettes. Extract them all, split shared baseline from per-product override from drift, then let the positioning documents steer three deliberately different systems in a self-hosted Penpot. Pick one, discard two.

The other design system recipes take one site and produce one answer. A portfolio breaks both halves: five products mean five extractions, and the first real work is separating shared baseline from deliberate per-product override from accidental drift.

Measured tokens settle that; they cannot settle direction.

Positioning and mission documents are the authority for every deviation from what ships, so they go in the same context. Then ask for variants, not an answer: three systems along one stated axis, everything else held fixed, are comparable. Penpot runs self-hosted so unreleased positioning stays off a hosted tool, and the prompt defines where the agent stops and asks. The token pass is the tested part; the components are what the agent is asked for.

How it works

Loading diagram...

Extract each product, one run per app

Terminal
dembrandt app-one.example.com --crawl 5 --screenshot ./app-one.png --design-md --save-output

Baseline the public brand surface too

Terminal
dembrandt example.com --crawl 5 --brand-guide --design-md --save-output

Run Penpot locally under Podman

Terminal
podman compose -p penpot -f docker-compose.yaml up -d
Agent prompt (self-hosted Penpot MCP active, all inputs in context)
# In context: one DESIGN.md and screenshot per product, the brand
# guide PDF, the exported Figma design system, and the positioning
# and mission documents. Penpot MCP pointed at the local instance.
"1. Consolidate the five extractions into one table: value, which
products share it, and whether the difference is a deliberate
per-product override or drift. Do not resolve drift silently.
2. Read the positioning and mission documents. Every deviation
from a measured value must cite a line in one of them.
3. Author three token sets in the Penpot file, named variant-a,
variant-b and variant-c. They differ along [state the axis:
e.g. how far each moves from the current palette] and are
identical in everything else: same token names, same scale
lengths, same component list.
4. Build the same starter components on each set: Button, Input,
Card, so the three are comparable side by side.
Stop and ask me before: resolving any drift, dropping a token that
exists today, or choosing the axis if I have not stated it."
Verify nothing was hardcoded
# Export each variant's token set from Penpot, then diff against the
# extraction it came from. Values that only exist in the Penpot file
# were invented; values bound nowhere are dead tokens.
dembrandt example.com --dtcg --save-output
Output

Three comparable token sets and component sets in a self-hosted Penpot file, a consolidation table separating shared baseline from per-product override from drift, and a list of every deviation with the positioning line that justifies it.

More in AI Pipelines

Clone a brand's design languageCross-pollinate extraction with brand contextBuild a design system in Claude CodeRebrand an existing applicationBrand guide PDF vs. live siteCross-app token comparisonBuild a design system foundation in Figma or Penpot via MCPPaste tokens to Figma MakeImprove a Google Stitch prompt with brand contextGive your brand videos a motion languageTurn a live site plus brand guide into a Figma design systemAuthor a design system from screenshots, brand guide, and tokens in Figma or PenpotBuild on-brand UI in Claude artifactsGenerate a branded presentationFind tokens that fit a page's purposeBrand guardrail for AI-generated UI

Browse all

All recipes →

62 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

43 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