Design drift detection in GitHub Actions

Name: Dembrandt
Author: Dembrandt

Developer

Overview

Add a design extraction step to your GitHub Actions pipeline. Archive tokens as build artifacts on every push so drift is traceable across every release.

Every GitHub Actions workflow that deploys a frontend can also capture its design token state. Adding a Dembrandt extraction step after deploy creates a per-commit token snapshot archived as a GitHub Actions artifact. Compare any two artifacts to trace exactly when a color changed, a radius drifted, or a spacing value disappeared. No additional infrastructure needed beyond the CLI and artifact storage.

Extract after deploy

Terminal

npx dembrandt $SITE_URL --no-sandbox --json-only > tokens.json

GitHub Actions workflow step

- 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 }} --no-sandbox --json-only > tokens.json

- name: Archive tokens

uses: actions/upload-artifact@v4

with:

name: design-tokens-${{ github.sha }}

path: tokens.json

retention-days: 90

Agent prompt: compare two workflow runs

# Download tokens.json from two GitHub Actions runs, then:

"Compare these two token snapshots from the same site.

Output an ASCII diff table:

TOKEN | RUN A (sha: xxxx) | RUN B (sha: yyyy) | DELTA | ⚠️

Flag any change above 10% as ⚠️.

Summarize: what changed between these two deployments?"

Output

Per-commit token snapshots in GitHub Actions artifacts. Traceable drift across every deployment.

More in Automation

Docker and CI pipeline extraction Track token drift CI/CD drift detection CI drift gate (GitHub Actions)

Browse all

All recipes →

52 workflows

Design drift detection in GitHub Actions

Overview

More in Automation

Continue reading

Getting started

MCP

Skills