Check every design pull request
drepo ci runs the checks DesignRepo runs in the Changes pane, on the frames a pull request touches, and sums them up in one comment. Run it on your machine, or add the GitHub Action and forget about it.
Run it locally
From the design repo, on a branch. It compares against --base (default the config's baseBranch; a ref missing locally is tried as origin/<ref>), finds the changed frames, then checks, renders and diffs only those.
$ drepo ci --base origin/dev check ok manifest ok · fresh health 3 frames · 1 language · 0 errors · 1 warning visual diff 3 frames changed 01 Home 1a 6.40% 01 Home 1b 2.10% 03 Checkout 3a 0.40% → wrote .shots/ci/report.json and .shots/ci/comment.md → exit 0 · warnings only
--out <dir> (default .shots/ci) gets report.json, comment.md and the PNGs under health/ and diff/. --no-health and --no-diff skip those parts, --a11y adds the accessibility lint, --json prints the report, and --comment posts comment.md on the branch's pull request through gh.
drepo ci serves the checkout on a private port, so it needs no running DesignRepo and sees exactly the files in the branch. Health and the diff need Node and Playwright, as drepo shoot does.
Add the action
One workflow file in the design repo. It runs on pull requests that touch boards, sidecars or tokens, and needs write access to pull requests only to post its comment.
# .github/workflows/design.yml name: Design checks on: pull_request: paths: ["**/*.dc.html", "**/*.spec.json", "**/tokens.json", "manifest.json", "designrepo.json"] jobs: design: runs-on: ubuntu-latest permissions: { contents: read, pull-requests: write } steps: - uses: actions/checkout@v4 with: { fetch-depth: 0 } - uses: designrepo-dev/designrepo/action@main with: base: ${{ github.base_ref }} comment: true fail-on: error
It sets up Python, Node and the pinned Playwright with Chromium, runs drepo ci --comment with the job's token, writes the comment to the job summary too, and uploads the report and PNGs as the drepo-ci artifact. A @v1 tag follows the public release; until then use @main.
Inputs
Outputs: report (the path of report.json), errors, warnings and changed (frames whose pixels changed).
What it checks
- drepo check
The repo's own rules: boards in place, imports resolve, sidecars keyed by real frames.
- manifest --check
manifest.json is fresh, so the viewer and agents see the same index as the files.
- Render health
Each changed frame, in every language: console errors, broken fonts and images, overflow, clipping, overlap and empty frames.
- Visual diff
Base and head shot at the same size; the share of changed pixels and a heat PNG per frame. It never fails a run.
The PR comment
One comment per pull request, edited in place on every push (found by a hidden marker). Frames with errors and warnings come first, then the ones that moved most.
Design checks
check ok0 errors1 warning01 Home · 1b [en] overflow: “Spring, sorted. Fresh picks every week” is clipped by the hero's right edge.
Full report and PNGs: the job's artifacts
Exit codes
- 0Clean, or only findings below --fail-on.
- 1Findings at or above --fail-on, or drepo check or the manifest check failed.
- 2It could not run: no designrepo.json, the base ref missing, no Chromium for the health check.