Automation
41.Design drift detection in GitHub Actions
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: 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.
Browse all
All recipes →