CI/CD integration

Wiring designdrop into CI keeps your design system honest as the codebase evolves. Two patterns cover most teams.

Validate on every PR

Add a step to your CI pipeline that runs the validator. If DESIGN.md drifts (someone hand-edits the CSS, breaks contrast, drops a required role), the PR fails.

# .github/workflows/ci.yml
name: CI
on:
  pull_request:
jobs:
  validate-design:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v3
        with: { version: 10 }
      - uses: actions/setup-node@v4
        with: { node-version: 22 }
      - run: pnpm dlx designdrop validate apps/web/DESIGN.md

Exit code is the gate: 0 = passes, non-zero = fails.

Emit derived tokens at build time

Don't commit tokens.css / theme.css / tokens.dtcg.json if you can avoid it — they're derivations of DESIGN.md and committing both lets them drift. Instead, emit them at build time:

{
  "scripts": {
    "prebuild": "designdrop validate apps/web/DESIGN.md --emit",
    "build": "next build"
  }
}

Now every pnpm build regenerates the derived files from DESIGN.md, then runs the regular build. Your repo only commits the source of truth.

Dependabot / Renovate

The designdrop CLI is a normal npm package. Keep it pinned and let Dependabot bump it on its own schedule:

# .github/dependabot.yml
version: 2
updates:
  - package-ecosystem: 'npm'
    directory: '/'
    schedule:
      interval: 'weekly'
    groups:
      designdrop:
        patterns: ['designdrop']

When a new CLI version ships with new validators, you'll get a PR that includes the bump and any validation surface changes.

Pre-commit hook (optional)

For strict teams, run validation pre-commit so issues never reach the remote:

# .husky/pre-commit
pnpm dlx designdrop validate apps/web/DESIGN.md || exit 1