Verify & Fix

Verify & Fix closes the loop on AI-built UI. Your editor builds a screen, then calls the verify_ui tool. designlang renders the page at 390, 768 and 1280px (and in dark mode when it has one), checks it against your confirmed brand and returns pass or fail, an on-brand score, a generic-look score and every drift with the expected and actual value. The editor fixes what drifted and checks again until it passes. localhost works.

Get your brand token

1. Confirm your brand at app.designlang.app/brand: designlang reads your site, and you check the colours, type and spacing it found.
2. Copy the brand token and the brand id shown there. The token lets the local server read your confirmed brand; keep it out of git.

Set it up in Claude Code

claude mcp add designlang -e DESIGNLANG_BRAND_TOKEN=<token> -- npx -y designlang mcp

Set it up in Cursor or another MCP client

Add the server to .cursor/mcp.json (or your client’s MCP config):

{
  "mcpServers": {
    "designlang": {
      "command": "npx",
      "args": [
        "-y",
        "designlang",
        "mcp"
      ],
      "env": {
        "DESIGNLANG_BRAND_TOKEN": "<your brand token>"
      }
    }
  }
}

Tell the editor to use it

Add one line to your rules file (CLAUDE.md, AGENTS.md or a Cursor rule) so the editor checks its own work:

After building or changing a screen, call verify_ui with the page url and brand "<your brand id>". Fix every issue it reports and call it again until it passes.

From the command line

The same check runs in a terminal or CI. It exits 1 on drift, so it can fail a build. --brand also takes a DESIGN.md or tokens file.

npx designlang verify-ui <url> --brand <id>

On pull requests

To check every pull request against the same brand, set up PR checks at app.designlang.app/guard.