実際のChromiumブラウザでレンダリングされたWebページをデザインシステムのルールに照らしてリントし、視覚的およびアクセシビリティの適合性を確認します。
別名 Applied-Form/engine, engine, @appliedform/engine
- スター
- 0
- ツール
- —
- ダウンロード数(30日間)
- 563
- 最新バージョン
- 3.3.1
- 最終コミット
- 2026年11月6日
- ライセンス
- Apache-2.0
Applied Form Standards MCPとは
Applied Form StandardsはMCPサーバーです。 実際のChromiumブラウザでレンダリングされたWebページをデザインシステムのルールに照らしてリントし、視覚的およびアクセシビリティの適合性を確認します。.
プロジェクトのREADMEから生成された概要
Applied Form Standards MCP server について
Applied Form engineは、実際のChromiumブラウザでWebページをレンダリングすることで、デザインシステムの適合性を検証するゲートを提供します。スタイルシートを検査するだけでなく、特定のルールに対して計算済み(computed)の値をチェックすることで、視覚的およびアクセシビリティのプロパティを評価します。このツールは、印刷モードや低モーションモードを含むさまざまなビューポート幅において、レンダリングされたコンテンツがデザイントークンやアクセシビリティ基準に準拠していることを確認する必要がある開発者やデザイナー向けに設計されています。
ユーザーはnpmとPlaywrightを使用して、ローカルでサーバーを実行できます。システムにはデザインルールを定義するためのDTCGトークンファイルが必要ですが、カスタムシステムをロードしなくても、コントラスト、フォーカス、見出しの順序に関する基本的なチェックを実行できます。AIエージェントと統合するために、サーバーはClaude CodeやCursor用の設定ブロックを提供します。ページをチェックするためのstandards_lintや、HTMLファイルに特定の修正を自動適用するstandards_fixなどの特定のツールが含まれています。
できること
- 1デザインシステムの適合性検証Webページを実際のブラウザでレンダリングし、特定のデザイントークンやルールに従っているかを確認します。
- 2ページの一括監査Webページのフォルダ全体に対して包括的なレポートを生成し、WCAGやデザインの問題を特定します。
- 3デザインシステムの乖離検知稼働中のWebサイトを分析し、実際にどのデザインシステムがレンダリングされているかを判断します。
プロジェクトの README から作成されています。すべてのユースケースは、その引用と照らし合わせて確認されています。
Applied Form Standards MCPのインストール方法
フォーマット検証日 2026年11月10日Claude CodeにApplied Form Standards MCPをインストール
$ claude mcp add engine -- npx -y @appliedform/engineCursorにApplied Form Standards MCPをインストール
~/.cursor/mcp.json
{
"mcpServers": {
"engine": {
"command": "npx",
"args": [
"-y",
"@appliedform/engine"
]
}
}
}VS CodeにApplied Form Standards MCPをインストール
.vscode/mcp.json
{
"servers": {
"engine": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@appliedform/engine"
]
}
}
}Claude DesktopにApplied Form Standards MCPをインストール
claude_desktop_config.json
{
"mcpServers": {
"engine": {
"command": "npx",
"args": [
"-y",
"@appliedform/engine"
]
}
}
}CodexにApplied Form Standards MCPをインストール
~/.codex/config.toml
[mcp_servers.engine] command = "npx" args = ["-y", "@appliedform/engine"]
Gemini CLIにApplied Form Standards MCPをインストール
~/.gemini/settings.json
{
"mcpServers": {
"engine": {
"command": "npx",
"args": [
"-y",
"@appliedform/engine"
]
}
}
}自動チェック
実行日 2026年11月13日詳細レポート →自動チェックに合格しました。これはセキュリティ監査ではありません。コードを読み、サーバーに必要最小限のアクセス権を与えてください。 チェックの仕組み
- ソースリポジトリがリンクされており、アクセス可能applied-form/engine is public and reachablegithub.com/applied-form/engine ↗合格
- パッケージがこのリポジトリをソースとして示している@appliedform/engine names applied-form/engine as sourcenpmjs.com/package/@appliedform/engine ↗合格
- ビルドの来歴(Sigstore 証明)Sigstore attestation for @appliedform/enginenpmjs.com/package/@appliedform/engine/v/3.3.1#provenance ↗合格
- オープンソースライセンス (OSI)Apache-2.0spdx.org/licenses/Apache-2.0.html ↗合格
- 過去1年以内にコミットまたはリリースありLast commit or release 2026-11-06github.com/applied-form/engine ↗合格
- OpenSSF Scorecard未チェック
- パッケージ名が有名なパッケージに酷似していないNo popular package one edit away from @appliedform/engine合格
- パッケージと依存関係に重大なアドバイザリがない3 resolved dependencies checked; no critical advisoryosv.dev ↗合格
- モデルへの隠れた指示がない0 tool descriptions and the README read; no override phrases, credential paths or hidden characters合格
- 破壊的なツールがラベル付けされている未チェック
- リモート endpoint が MCP ハンドシェイクに応答する未チェック
README
GitHubで見るStandards 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.
Applied Form Standards MCPのよくある質問
Applied Form Standards MCPをClaude Codeに追加するには
ターミナルでclaude mcp add engine -- npx -y @appliedform/engineを実行します。すべてのプロジェクトで利用するには--scope userを追加します。
Applied Form Standards MCPをCursorに追加するには
~/.cursor/mcp.jsonを開き、上記のインストールセクションに示すCursor設定を使ってmcpServersの下にサーバーを追加します。
Claude CodeやCursorなどのAIエージェントでどのように使用できますか?
npx standards mcp-configコマンドを実行することで、必要な設定を生成できます。
デザインシステムの違反を自動的に修正できますか?
はい、standards fixコマンドを使用すると、可能な範囲で修正を適用し、結果を新しいHTMLファイルに書き出します。
必須のアクセシビリティルールを無効化しようとするとどうなりますか?
コントラストやターゲットサイズなどの必須ルールをwarnやoffに設定しようとすると、ツールは実行を拒否し、ステータス2で終了します。
実際のレンダリング結果をチェックするのですか、それともCSSのみをチェックするのですか?
単にスタイルシートを検査するのではなく、ブラウザによってレンダリングされた計算済み(computed)の値をチェックします。