GitHub Action (Preview Gate)

Diff the design of every preview deploy and comment on the pull request.

Preview Gate reads a pull request’s preview deploy, diffs its tokens against a baseline, checks contrast and Brand Check on the changed files, and posts one comment. It can fail the check on severity.

Set up

  1. Pick a baseline: a committed tokens file (baseline), or a saved project through a dlk_ token stored as the repository secret DESIGNLANG_KEY.
  2. Add the workflow below. It waits for the preview, then runs the action.
name: Preview Gate
on:
  pull_request:
    paths: ['src/**', 'app/**', '**/*.css', 'tailwind.config.*']
permissions:
  contents: read
  pull-requests: write
jobs:
  gate:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: '22' }
      - uses: Manavarya09/design-extract/github-action@v13.3.2
        with:
          preview-url: ${{ steps.preview.outputs.url }}
          designlang-key: ${{ secrets.DESIGNLANG_KEY }}
          fail-on: major

Add a step before it that exposes your host’s preview URL as steps.preview.outputs.url. The integrations page has the full workflow, with a Vercel wait step.

Inputs that matter

InputDefaultMeaning
preview-urlThe preview deploy to read.
baselinePath to a committed DTCG tokens file. Wins over the key.
designlang-keyA dlk_ token. Fetches the project’s latest snapshot as the baseline.
extractlocallocal reads the preview in the runner for free. hosted uses the API for 1 credit.
fail-onnoneFail at this token-drift severity: none, patch, minor or major.
fail-on-a11yfalseFail when a contrast pair that passed AA now fails.
fail-on-brandnoneFail on Brand Check findings: none, error or warn.
commenttruePost or update the pull request comment.

Outputs are result, changed-count, severity, a11y-regressions, brand-errors and version.