Analyse la conformité des pages web rendues par rapport aux règles du design system dans un véritable navigateur Chromium pour garantir le respect des aspects visuels et de l'accessibilité.
Aussi connu sous Applied-Form/engine, engine, @appliedform/engine
- Étoiles
- 0
- Outils
- —
- Téléchargements, 30 jours
- 563
- Dernière version
- 3.3.1
- Dernier commit
- 6 nov. 2026
- Licence
- Apache-2.0
Qu'est-ce que Applied Form Standards MCP ?
Applied Form Standards est un serveur MCP. Analyse la conformité des pages web rendues par rapport aux règles du design system dans un véritable navigateur Chromium pour garantir le respect des aspects visuels et de l'accessibilité.
Résumé généré à partir du README du projet
À propos du MCP server Applied Form Standards
Le moteur Applied Form agit comme une barrière de conformité pour votre design system en rendant les pages web dans un véritable navigateur Chromium. Il évalue les propriétés visuelles et d'accessibilité en comparant les valeurs calculées à des règles spécifiques, au lieu de se contenter d'inspecter les feuilles de style. Cet outil est conçu pour les développeurs et les designers qui doivent s'assurer que le contenu rendu respecte les design tokens et les normes d'accessibilité sur différentes largeurs de viewport, y compris les modes d'impression et de réduction de mouvement.
Les utilisateurs peuvent exécuter le serveur localement via npm et Playwright. Le système nécessite un fichier de token DTCG pour définir les règles de design, bien qu'il puisse effectuer des vérifications de base pour le contraste, le focus et l'ordre des titres sans système personnalisé chargé. Pour l'intégration avec les agents IA, le serveur fournit un bloc de configuration pour Claude Code ou Cursor. Il inclut des outils spécifiques comme standards_lint pour vérifier les pages et standards_fix pour appliquer automatiquement certaines corrections aux fichiers HTML.
Ce que vous pouvez faire avec
- 1Vérifier la conformité au design systemVérifiez si une page web respecte des design tokens et des règles spécifiques en la rendant dans un véritable navigateur.
- 2Effectuer des audits de pages en masseGénérez un rapport complet pour un dossier entier de pages web afin d'identifier les problèmes de design et de conformité WCAG.
- 3Détecter la dérive du design systemAnalysez un site web en direct pour déterminer quel design system il utilise réellement lors du rendu.
Extrait du README du projet. Chaque cas d'utilisation est vérifié par rapport à une citation du document.
Comment installer Applied Form Standards MCP
Formats vérifiés le 10 nov. 2026Installer Applied Form Standards MCP dans Claude Code
$ claude mcp add engine -- npx -y @appliedform/engineInstaller Applied Form Standards MCP dans Cursor
~/.cursor/mcp.json
{
"mcpServers": {
"engine": {
"command": "npx",
"args": [
"-y",
"@appliedform/engine"
]
}
}
}Installer Applied Form Standards MCP dans VS Code
.vscode/mcp.json
{
"servers": {
"engine": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@appliedform/engine"
]
}
}
}Installer Applied Form Standards MCP dans Claude Desktop
claude_desktop_config.json
{
"mcpServers": {
"engine": {
"command": "npx",
"args": [
"-y",
"@appliedform/engine"
]
}
}
}Installer Applied Form Standards MCP dans Codex
~/.codex/config.toml
[mcp_servers.engine] command = "npx" args = ["-y", "@appliedform/engine"]
Installer Applied Form Standards MCP dans Gemini CLI
~/.gemini/settings.json
{
"mcpServers": {
"engine": {
"command": "npx",
"args": [
"-y",
"@appliedform/engine"
]
}
}
}Vérifications automatisées
Exécuté le 13 nov. 2026Rapport complet →A passé nos vérifications automatisées. Il ne s'agit pas d'un audit de sécurité : lisez le code et donnez au serveur l'accès le plus restreint dont il a besoin. Fonctionnement des vérifications
- Dépôt source lié et accessibleapplied-form/engine is public and reachablegithub.com/applied-form/engine ↗Réussi
- Le paquet cite ce dépôt comme source@appliedform/engine names applied-form/engine as sourcenpmjs.com/package/@appliedform/engine ↗Réussi
- Provenance du build (attestation Sigstore)Sigstore attestation for @appliedform/enginenpmjs.com/package/@appliedform/engine/v/3.3.1#provenance ↗Réussi
- Licence open source (OSI)Apache-2.0spdx.org/licenses/Apache-2.0.html ↗Réussi
- Commit ou version publiée au cours de l'année écouléeLast commit or release 2026-11-06github.com/applied-form/engine ↗Réussi
- OpenSSF ScorecardNon vérifié
- Nom du package non proche d'un package populaireNo popular package one edit away from @appliedform/engineRéussi
- Aucun avis critique dans le paquet ni ses dépendances3 resolved dependencies checked; no critical advisoryosv.dev ↗Réussi
- Aucune instruction cachée destinée au modèle0 tool descriptions and the README read; no override phrases, credential paths or hidden charactersRéussi
- Les outils destructifs sont étiquetésNon vérifié
- L'endpoint distant répond au handshake MCPNon vérifié
README
Voir sur GitHubStandards by Applied Form
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.
Standards 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.
Start
npm install @appliedform/standards && npx playwright install chromium
npx standards init --pack instrument # load a system: the free Standards pack, or your pack's tokens.json
npx standards lint page.html # your page, judged by that system's rules, at every width
With no system loaded, standards 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 standards mcp-config prints the server block for Claude Code or Cursor.
Use
npx standards lint page.html https://example.com/page # every rule, every width
npx standards lint https://example.com/ --register ii # a page that has not declared a register
npx standards baseline https://example.com/a --out standards-baseline.json
npx standards lint https://example.com/a --baseline standards-baseline.json
npx standards fix page.html # apply the fixes it can make; writes page.fixed.html
npx standards audit pages/ --fix # every page in a folder, as found and as the fixer would leave it, as one report
npx standards drift https://example.com/ --out drift.json # what system a site actually renders
npx standards rules # every rule, its severity and what it checks
npx standards mcp # the same tools for a model, over MCP
standards fix exits 0 when the fixed page passes every checked rule, 1 when violations remain, and lists
what it could not fix by rule and element. standards audit writes one self-contained HTML page (and --json)
with the findings by rule and by page, the WCAG criteria the rules touch, what is not checked, and
the command that repeats the run. standards lint exits 1 on any error-severity violation not
held in the baseline. standards.config.json sets a
rule to error, warn or off; standards.config.example.json is a starting point. The exception is a
mandatory rule: contrast, text-too-small, target-size, focus-hidden, link-not-underlined,
alt-missing, horizontal-overflow and wordmark-live-text, listed under
$extensions["form.applied"].levels.mandatory in the token file. A config that sets one of them to
warn or off is refused, and standards lint exits 2 (decision 0027 in the Applied Form repository).
A system loaded over the token file may raise the thresholds contrast and text-too-small read
(floors.body-contrast, display-contrast, large-text-px, large-bold-text-px, text-min-px)
and is refused if it lowers one below the token file's own value. A system that declares a pack
and states no register.pack is refused too: it judged every page by register alone and then
dropped that house rule, so no mandatory rule was measured. So is a system with a register whose
background is not a colour. Four gaps are known. On a page whose register the loaded
system does not define, with or without a system, a config that lowers register leaves the
mandatory rules unmeasured. A system
file that declares itself a pack is judged without text-too-small, link-not-underlined and
wordmark-live-text. On a page that paints no ground, contrast measures against the ground the
system names. The MCP tools standards_lint and standards_fix measure only the widths a caller names, so a
call without 320 never measures horizontal-overflow at 320px.
Names that changed
Standards 5.0.0 removed the names the product had before it was called Standards: the af and af-mcp
commands, the af_* MCP tools, AF_BRAND and AF_CHROMIUM, af.config.json, af-baseline.json and
.af/. They are not read: standards stops with exit status 2 and one line naming the replacement when a variable or file under an old name is in use. standards, the standards_* tools,
STANDARDS_SYSTEM, STANDARDS_CHROMIUM, standards.config.json, standards-baseline.json and
.standards/ replace them, and the default report file is standards-audit.html. Uninstall
@appliedform/engine before installing @appliedform/standards: both ship the af and af-mcp bins,
so a global install of one over the other fails with EEXIST. The full list, with what to change, is in
docs/migrating-to-5.md.
Documents recorded before the rename, such as the decision records and the evaluation protocol and its results, use the old names, and are not rewritten.
The token file
tokens/applied-form.tokens.json is the Reference system: Standards' structure (registers,
voices, spacing, floors and every rule's parameters) with a neutral palette derived by standards brand.
It exists so Standards can be tested and published. It is not a design to ship. Point it
at your own system by replacing the file, or by importing a Standards pack with standards system import.
Evidence
| 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 Standards. These run from a clone of this repository: the npm package carries Standards and nothing that needs a model SDK, axe-core or stylelint.
Develop
npm install
npm run check # build, unit tests, and the clean fixture linted in a real browser
Tests use node:test. Set STANDARDS_CHROMIUM to a Chromium executable if Playwright has not downloaded
one.
Licence
Apache-2.0. See LICENSE and NOTICE. The name Applied Form and its marks are not licensed.
Questions sur Applied Form Standards MCP
Comment ajouter Applied Form Standards MCP à Claude Code ?
Exécutez claude mcp add engine -- npx -y @appliedform/engine dans votre terminal. Ajoutez --scope user pour le rendre disponible dans tous les projets.
Comment ajouter Applied Form Standards MCP à Cursor ?
Ouvrez ~/.cursor/mcp.json et ajoutez le serveur sous mcpServers, avec la configuration Cursor indiquée dans la section d'installation ci-dessus.
Comment puis-je utiliser cet outil avec un agent IA comme Claude Code ou Cursor ?
Vous pouvez générer la configuration nécessaire en exécutant la commande npx standards mcp-config.
L'outil peut-il corriger automatiquement les violations du design system ?
Oui, la commande standards fix applique des corrections lorsque cela est possible et écrit le résultat dans un nouveau fichier HTML.
Que se passe-t-il si j'essaie de désactiver les règles d'accessibilité obligatoires ?
L'outil refusera de s'exécuter et s'arrêtera avec le code de statut 2 si vous tentez de passer des règles obligatoires, comme le contraste ou la taille des cibles, en mode 'warn' ou 'off'.
Vérifie-t-il le rendu réel ou seulement le CSS ?
Il vérifie les valeurs calculées telles qu'elles sont rendues par le navigateur, plutôt que de simplement inspecter les feuilles de style.