designlang

Why it's ranked here

It measures its own claims. The repository ships a head-to-head benchmark against a pinned rival extractor on hand-checked sites, runs both tools in alternating order, and writes losses into the results too. The clone fidelity check pixel-diffs a rebuild made only from extracted tokens and says which token family cost the points. The design comparison keeps missing measurements missing instead of inventing midpoints. Add an MIT license, a published npm package, a GitHub Action and an MCP server, and the tool covers extraction, checking and agent use in one install.

What's good

Failure paths are designed, not accidental. The crawler caps network idle waits at five seconds so beacon-heavy pages do not hang, retries navigation three times with backoff, and treats screencast or coverage failures as non-fatal. The CI runner is tested against an unreachable host and must return a structured failure with a partial report rather than throw. The GitHub Action pins the matching release so a gate does not change behaviour under you, and escapes values from the audited site before printing workflow annotations. Browser download is a separate step, so installing the package works in CI, Docker and behind proxies.

Tradeoffs

Every extractor is wrapped so an exception silently becomes an empty result, and only thirteen of them report a warning, so a thin output can hide a failure. Multi-page crawling stops at fifteen internal links. The token linter matches text and background colours by name and flags near-duplicates by raw RGB distance, which is cruder than the perceptual maths elsewhere. The security policy's supported-version table trails the current package major. The optional smart mode sends data to a third-party model provider. The surface is very large, with well over a dozen subcommands, and the README opens with sponsor links.

How to use it well

Best for a front-end team that wants to pull a starting token set from a live site, or to catch unintended design drift: commit a baseline token file and let the Action fail the pull request when tokens change. Install the browser once, or point it at an installed Chrome. For logged-in pages pass cookies or a storage-state file. Use the fidelity score with a minimum threshold when rebuilding a site. It reads rendered pages only, so it will not tell you how a codebase organises its tokens, and closed shadow roots stay unreadable.

Observed

License

MIT

Language

JavaScript (ES modules), Node 20 or later

Install

npm package with a CLI binary; browser fetched by a separate install-browser step or system Chrome

Interfaces

CLI, library exports, MCP server over stdio, GitHub composite Action

Browser engine

Playwright Chromium, local or remote over CDP

Benchmark

Checked-in head-to-head benchmark against dembrandt with hand-checked ground truth

Tests

Node built-in test runner; CI failure path tested against an unreachable host

Optional LLM use

Smart mode accepts Atlas Cloud, OpenAI or Anthropic API keys