CI drift gate (GitHub Actions)

Name: Dembrandt
Author: Dembrandt

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

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:

- run: npm i -g dembrandt playwright

- run: npx playwright install --with-deps chromium

# production is the pinned baseline; any token change shows as drift

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

- run: dembrandt "$PREVIEW" --compare baseline.json --html report.html

- uses: actions/upload-artifact@v4

if: always()

with: { name: drift-report, path: report.html }

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 extraction Track token drift CI/CD drift detection Design drift detection in GitHub Actions

Browse all

All recipes →

50 workflows