Lint rendered pages against a design system in a real browser, across six widths, with the fix.
A design-system conformance gate measured in a real browser. Give it a DTCG token file and a page; it renders the page in Chromium at four fixed widths and two sampled ones, under reduced motion and in print, and checks every computed value against the system's rules. It reports what the browser drew, not what the stylesheet says.
The engine is open so the evidence about it can be checked. Every comparison it is quoted in can be rerun from this repository: the gate beside axe-core and stylelint, the drift survey of public design systems, and the model study and its judging rounds, with every record they were scored from.
npm install @appliedform/engine && npx playwright install chromium
npx af init --pack instrument # load a system: the free Standards pack, or your pack's tokens.json
npx af lint page.html # your page, judged by that system's rules, at every width
With no system loaded, af lint judges a page by the rules that hold for any page (contrast, focus,
target size, overflow, alt text, heading order, motion) and says how to load one. For an agent,
npx af mcp-config prints the server block for Claude Code or Cursor.
npx af lint page.html https://example.com/page # every rule, every width
npx af lint https://example.com/ --register ii # a page that has not declared a register
npx af baseline https://example.com/a --out af-baseline.json
npx af lint https://example.com/a --baseline af-baseline.json
npx af drift https://example.com/ --out drift.json # what system a site actually renders
npx af rules # every rule, its severity and what it checks
npx af-mcp # the same tools for a model, over MCP
Exit status is 1 on any error-severity violation not held in the baseline. af.config.json sets a
rule to error, warn or off; af.config.example.json is a starting point.
tokens/applied-form.tokens.json is the Reference system: the engine's structure (registers,
voices, spacing, floors and every rule's parameters) with a neutral palette derived by af brand.
It exists so the engine can be tested and published. It is not a design to ship. Point the engine
at your own system by replacing the file, or by importing a Standards pack with af system import.
| What | Where | Rerun |
|---|---|---|
| The gate beside axe-core and stylelint on planted defects | eval/compare.mjs, test/compare.test.mjs | npm run eval:compare |
| Drift across public design systems | eval/drift/ | npm run drift:batch -- all |
| Models generating pages with and without the rules | eval/, docs/evaluation-protocol.md | npm run eval -- --models stub offline, then with keys |
| A judging round with anchors and attention checks | eval/judge-run.mjs | npm run eval:judge |
The protocol was written before the runs it governs, and it says what result would count against the engine. These run from a clone of this repository: the npm package carries the engine and nothing that needs a model SDK, axe-core or stylelint.
npm install
npm run check # build, unit tests, and the clean fixture linted in a real browser
Tests use node:test. Set AF_CHROMIUM to a Chromium executable if Playwright has not downloaded
one.
Apache-2.0. See LICENSE and NOTICE. The name Applied Form and its marks are not licensed.
Source-derived launch command. Check the maintainer’s required arguments and credentials before running:
npx -y @appliedform/engineMerge this template into ~/Library/Application Support/Claude/claude_desktop_config.json. Keep existing servers. Add any arguments, credentials, and permissions required by the maintainer; this template has not been install-tested.
{
"mcpServers": {
"io-github-applied-form-engine": {
"command": "npx",
"args": [
"-y",
"@appliedform/engine"
]
}
}
}Restart Claude Desktop completely for changes to take effect. Confirm the server appears connected in the client’s tool list, then try a read-only example from its documentation.
Claude Desktop setup referenceApplied Form engine works with any MCP-compatible client. Copy the config snippet from the Configuration section above and add it to the file shown for your client, then restart the application.
~/Library/Application Support/Claude/claude_desktop_config.jsonRestart Claude Desktop completely for changes to take effect.~/.cursor/mcp.jsonRestart Cursor for changes to take effect..vscode/mcp.jsonReload VS Code window for changes to take effect.~/.codeium/windsurf/mcp_config.jsonRestart Windsurf for changes to take effect..mcp.jsonSave at the project root, then start Claude Code in that project and review the MCP server approval prompt. Keep real credentials out of shared files.