Skip to main content
Automation

CI drift gate (GitHub Actions)

DeveloperQA

Overview

Stop off-brand UI from merging. Extract the deploy preview, compare it against a baseline, and fail the build when design tokens drift.

AI coding tools and quick fixes ship subtle visual regressions: a slightly wrong blue, a spacing step that no longer matches, a shadow that crept in. The --compare flag turns Dembrandt into a CI gate. Capture a baseline once from the design you have approved, then on every pull request extract the deploy preview and compare. Dembrandt exits 1 when the drift score crosses the threshold, so the check goes red exactly like a failing test, and writes a self-contained HTML report you can attach as a build artifact. No design review meeting required to catch that the button color changed.

Capture the baseline once (same environment you will check against)

Terminal
dembrandt https://example.com --json-only > baseline.json

In CI: compare the preview, fail on drift, write a report

Terminal
dembrandt "$PREVIEW" --compare baseline.json --html report.html

Accept an intentional change as the new baseline

Terminal
dembrandt https://example.com --compare baseline.json --approve
GitHub Actions: drift gate on every preview deploy
name: Design drift
on: deployment_status # fires when the host finishes a preview deploy
jobs:
drift:
if: github.event.deployment_status.state == 'success'
runs-on: ubuntu-latest
env:
PREVIEW: ${{ github.event.deployment_status.environment_url }}
steps:
# Local install pulls the pinned browser driver (playwright-core);
# installing 'playwright' globally risks a version mismatch.
- run: npm i dembrandt
- run: npx playwright-core install --with-deps chromium
# production is the pinned baseline; any token change shows as drift
- run: npx dembrandt https://example.com --json-only > baseline.json
- run: npx dembrandt "$PREVIEW" --compare baseline.json --html report.html
- uses: actions/upload-artifact@v4
if: always()
with: { name: drift-report, path: report.html }
# Fuller version — a PR comment listing the exact tokens that changed,
# plus --approve to accept intended drift — is in examples/drift-gate.yml.
Output

Red check on drift (exit 1), green when stable. Self-contained HTML report as a build artifact, plus a 0-100 drift score per page.

More in Automation

Docker and CI pipeline extractionTrack token driftAutomated drift tracking with an API keyCI/CD drift detectionDesign drift detection in 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