Skip to main content
Home/Recipes/CI/CD drift detection
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.

For teams that ship frequently, manual design review cannot keep up with the pace of releases. The workflow: extract the deployed site after each release cycle, save the output, and load it into the Dembrandt App alongside the pinned baseline. The App computes a per-token diff: what changed, what drifted, what is new. CI/CD pipeline integration with automated pass/fail gating is on the Pro platform roadmap. The current workflow is: extract on release, review in App, act on the diff before the next cycle.

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 driftDesign drift detection in GitHub ActionsCI drift gate (GitHub Actions)

Browse all

All recipes →

52 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