Connect your tools

Slack alerts and a weekly report, a pull request gate, Figma variables and your coding agent, all reading the same saved project.

Slack

Alerts and a weekly report, in a channel

Confirmed design changes on the sites you monitor arrive as Slack messages with the change summary, colour swatches and a link to the diff. On Mondays you also get a report of every monitored site's changes and drift trend.

  1. In Slack, open api.slack.com/apps and choose Create New App, From scratch.
  2. Open Incoming Webhooks, switch it on, then Add New Webhook to Workspace and pick the channel.
  3. Copy the webhook URL. It starts with https://hooks.slack.com/services/.
  4. Paste it below. We send a test message first and only save the URL if Slack accepts it.

Loading…

Only hooks.slack.com webhooks are accepted. The URL is encrypted before it is stored and is never shown again, only a masked hint.

What you get

The same alerts, wherever you work

Email stays on. Slack adds instant delivery and a weekly summary. The GitHub Action and the Figma plugin read the same saved project, so they never disagree about what the brand is.

Set up monitors
GitHub Action

Preview Gate: check every pull request

On each pull request it reads your preview deploy, compares its tokens with your saved project (or a committed tokens file), runs Brand Check on the changed files and keeps one comment up to date with the token diff, new contrast failures and brand violations. It fails the job only if you set a severity.

  1. On your project page, open Connect and create a token that follows the latest snapshot.
  2. In GitHub, add it as a repository secret named DESIGNLANG_KEY.
  3. Add this workflow. Pin the action to a release tag.
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' }

      # Wait for your host's preview and expose its URL (Vercel shown).
      - uses: patrickedqvist/wait-for-vercel-preview@v1.3.2
        id: preview
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          max_timeout: 300

      - uses: Manavarya09/design-extract/github-action@v13.3.2
        with:
          preview-url: ${{ steps.preview.outputs.url }}
          designlang-key: ${{ secrets.DESIGNLANG_KEY }}
          fail-on: major          # none | patch | minor | major
          fail-on-a11y: true
          fail-on-brand: error    # none | error | warn

Read the preview in your runner with the free engine (the default), or set extract: hosted to have designlang read it (1 credit, Pro). Full options are in the action README.

Figma plugin

Variables and styles from your project

Creates Primitives and Semantic variable collections with light and dark modes, keeps semantic tokens aliased to primitives, adds text and effect styles, and updates in place when you sync again. No Enterprise plan needed.

  1. Create a context key on your project page (Connect). A key that follows the latest snapshot can pick snapshots and a dark-mode capture.
  2. In Figma, choose Plugins, Development, Import plugin from manifest, and select figma-plugin/manifest.json from the designlang repo.
  3. Run the plugin, paste the key and press Add project, then Sync to Figma.
  4. Capture the site again later and sync again: variables, aliases and styles update in place.
MCP

Give your coding agent the brand

Claude Code, Cursor and any MCP client can read a saved project's current tokens, rules and a code checker, so what they write matches the site.

  1. Open a saved project and go to Connect.
  2. Create a token and copy the one-line command for Claude Code, Cursor or any MCP client.
  3. Ask your agent to build UI. It reads the project's current tokens and rules instead of guessing.
Pick a projectOpen Connect