Skip to main content
Automation

CI/CD drift detection

DeveloperEnterprise

Overview

Extract on every release and load into the Dembrandt App to diff against the pinned baseline. Teams that ship frequently catch visual drift before it accumulates into a rebrand.

Requires dembrandt 0.20.1 or later. Run npx dembrandt@0.20.1 --version to verify.

For teams that ship frequently, manual design review cannot keep up with the pace of releases. This is the artifact-based workflow: extract the deployed site after each release cycle, save the output, and archive it as a build artifact for later comparison. The Dembrandt App computes a per-token diff against the pinned baseline: what changed, what drifted, what is new. For hands-off history, pass an API key with --key instead and each run is uploaded and scored against the previous snapshot automatically (see the API-key drift recipe). Automated pass/fail gating in the pipeline is on the roadmap.

Extract after each release

Terminal
dembrandt app.example.com --save-output
CI step: extract and archive
# In your pipeline, after deploy:
- name: Install dembrandt + Chromium
run: |
npm i dembrandt
npx playwright-core install --with-deps chromium
- name: Extract design tokens
run: npx dembrandt ${{ env.SITE_URL }} --save-output
- name: Archive extraction
uses: actions/upload-artifact@v4
with:
name: tokens-${{ github.sha }}
path: output/
Agent prompt: compare two archived extractions
# Download two artifact JSONs, load both into context, then:
"Compare these two extractions from the same site.
Show the token diff as an ASCII table:
TOKEN | BEFORE | AFTER | DELTA
Flag any change above 10% with ⚠️.
Summarize what changed and whether it looks like intentional
update or unintentional drift."
Output

Token snapshots archived per release. Agent produces ASCII diff on demand, no --compare flag needed.

More in Automation

Docker and CI pipeline extractionTrack token driftAutomated drift tracking with an API keyDesign drift detection in GitHub ActionsCI drift gate (GitHub Actions)

Browse all

All recipes →

57 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