Designesy

io.github.LE-VAI由 GitHub 帳號 LE-VAI 發布v1.13.10更新於 Nov 5, 2026

Design quality gate for AI-generated UI: score any URL on 45 deterministic checks, A–F grade.

已驗證Streamable HTTP可網頁執行開發者工具媒體與設計

概覽

AI 產生的概覽

依 Designesy 設計系統契約對線上網址做確定性評分,回傳檢查結果、等級與設計權杖報告。

可以做什麼
  • 對線上網址依 45 項設計契約檢查評分並給出等級,另含漂移、AI 就緒度與綜合報告
  • 驗證設計權杖檔是否符合 W3C DTCG,並驗證 Lottie 動畫是否符合動效契約
  • 比對兩個線上網址的權杖差異,並對歷史快照重跑漂移檢查
  • 從網站權杖產生建置契約包(權杖、Stylelint 設定、AGENTS.md 規則、DESIGN.md)
  • 取得契約、設計審查量表、SKILL.md、agent.json 與 llms.txt 等參考文件
適用情境
適合審查網站或 AI 生成的介面是否符合設計系統、在 CI 中把關設計品質,或為編碼代理提供契約與護欄以依規範建構介面。
執行需求
可使用無需驗證的遠端 Streamable HTTP 端點 designesy.org/api/mcp,或以 uvx 執行 PyPI 套件 designesy-mcp 的本機 stdio 服務(需要 uv)。評分時需能連線目標網址。
安裝前請注意
工具自稱唯讀,但評分會把目標網址傳送給 Designesy 服務,結果快取 24 小時。護欄工具會將產生的檔案寫入專案。另有獨立 CLI 提供可選的遠端回退,會把網址送到評分伺服器。

安裝

在 SourceWeft 中

  1. 開啟 儀表板中的 Designesy,將其新增到工作區。
  2. 為需要使用其工具的對話啟用該服務。

Web executable,透過 Streamable HTTP。 遠端服務在工作區中設定後即可從網頁執行環境執行。

交給代理程式安裝

把這段提示詞貼上到 Claude Code、Codex、Cursor 等代理程式,或 SourceWeft 對話中。代理程式會讀取該伺服器的安裝指南,先向你展示發布者、端點和登入方式,經你同意後再把它新增到你的客戶端。金鑰不會寫進任何命令。

閱讀 https://sourceweft.com/mcp/io.github.LE-VAI%2Fdesignesy-org/install.md,並按其中說明把這個 MCP 伺服器接入我的客戶端。修改任何設定之前,先告訴我它的發布者、端點和登入方式,等我確認。不要把 API 金鑰寫進命令或我會提交的檔案;問我金鑰應從哪裡取得。

檢視代理程式所依據的安裝指南

其他 MCP 客戶端

把它新增到你客戶端的 mcpServers 設定中。

{
  "mcpServers": {
    "designesy": {
      "type": "http",
      "url": "https://www.designesy.org/api/mcp"
    }
  }
}

README

Designesy

[PyPI] [npm] [MCP Registry] [Glama] [License: MIT]

[The verify console scoring designesy.org against its own design contract. It opens on the verdict, grade A at 100% with 42 checks run, then runs again: one cell per check, in one row per category, lights as each of the 45 checks runs while a log names it, and the verdict lands again. Recorded from the homepage on 2026-10-13.]

A 12-second loop, recorded from the homepage. It plays once and rests on the verdict, and shows a still frame if you prefer reduced motion. Watch it run on designesy.org.

Design quality gate for AI-generated UI: score any URL on 45 deterministic checks, A–F grade. Live at designesy.org.

Quick Start

Score any URL in 5 seconds — no install:

bash
npx @designesy/score@latest https://your-site.com

Add to Claude Desktop, Cursor, or any MCP client:

bash
# Claude Code, remote (zero install, no auth):claude mcp add --transport http designesy https://www.designesy.org/api/mcp
# Or local stdio via PyPI:pip install designesy-mcp && designesy-mcp

Clone this repo? The .mcp.json at root adds the local server (uvx designesy-mcp) to Claude Code as a project server. Claude Code asks you to approve it the first time you open the project. It needs uv.

Gate your CI on design-contract compliance:

yaml
- uses: LE-VAI/designesy-org@v1  with:    url: https://your-app.vercel.app    min-score: 70    min-grade: C    post-comment: true   # posts a summary comment on PRs (default)

The same 45-check engine powers an MCP server (17 tools for AI agents), a CLI with no required dependencies (npx @designesy/score), and a GitHub Action.

Designesy Contract Check is a GitHub Action that scores any URL against a 45-check design-system contract (tokens, motion, accessibility, cadence, takt, poise, identity, interaction, performance, responsive, semantic, security, spec, copywriting) and fails your CI workflow when the score or grade drops below your threshold. No LLM in the loop: every check is a published, deterministic rule, so the same page gives the same verdicts.

Tools

  • designesy_score — Score a live URL against the 45-check design contract. Returns score, grade (A–F), and per-check breakdown.
  • designesy_tokens_score — Validate a DTCG design-token file. 10 conformance checks against W3C DTCG 2025.10.
  • designesy_a11y_score — Get the WCAG 2.2 AA accessibility framework and Playwright/axe-core script template.
  • designesy_motion_score — Validate a Lottie animation file. 10 checks against Lottie spec v1.0.1 and §16 motion standards.
  • designesy_contract — Get the design-system contract (tokens, motion, takt, cadence, typography, verification), whole or only the top-level sections you name.
  • designesy_catalog — List the published Designesy packages with versions and URLs (the count comes back in package_count).
  • designesy_design_review — Get the 8-dimension qualitative design review rubric.
  • designesy_skill_md — Get the contract as an agent-skill-format SKILL.md for Cursor, Claude Code, or Replit.
  • designesy_agent_json — Get the /.well-known/agent.json discovery document.
  • designesy_llms_txt — Get the short /llms.txt agent brief.
  • designesy_llms_full_txt — Get the full /llms-full.txt brief as reference data (its ingest steps and paste-ready agent prompt stay in the published file).
  • designesy_drift_score — Score a live URL for UI drift: 12 checks on its custom properties and var() references.
  • designesy_readiness_score — Score a URL for AI readiness: 10 probes for machine-readable design artifacts (DTCG tokens, llms.txt, agent.json, an MCP endpoint, DESIGN.md and more).
  • designesy_guardrails — Generate a build-contract bundle for coding agents from a site's tokens: DTCG tokens, Stylelint config, AGENTS.md rules, component contract, anti-patterns and DESIGN.md.
  • designesy_monitor_score — Re-run the drift checks against earlier snapshots and compute 10 monitor checks; alerts come back in the result.
  • designesy_compare — Diff the tokens of two live URLs: added, removed, renamed, changed values, scale and contrast drift, and the score delta.
  • designesy_report — One composite report for a URL (score × 0.5 + drift × 0.3 + readiness × 0.2), with an interactive dashboard in hosts that support MCP Apps.

Tool reference table

ToolDescription
designesy_scoreScore a live URL against the 45-check design contract — returns score, grade (A–F), per-check breakdown
designesy_tokens_scoreValidate a DTCG design-token file (10 conformance checks, W3C DTCG 2025.10)
designesy_a11y_scoreGet the WCAG 2.2 AA accessibility framework + Playwright/axe-core script template
designesy_motion_scoreValidate a Lottie animation file (10 checks, Lottie spec v1.0.1 + §16 motion standards)
designesy_contractGet the design-system contract (tokens, motion, takt, cadence, typography, verification), whole or only the top-level sections you name
designesy_catalogList the published Designesy packages with versions and URLs
designesy_design_reviewGet the 8-dimension qualitative design review rubric
designesy_skill_mdGet the contract as an agent-skill-format SKILL.md (for Cursor/Claude Code/Replit)
designesy_agent_jsonGet the /.well-known/agent.json discovery document
designesy_llms_txtGet the short /llms.txt agent brief
designesy_llms_full_txtGet the full /llms-full.txt brief as reference data (its ingest steps and paste-ready agent prompt stay in the published file)
designesy_drift_scoreScore a live URL for UI drift (12 checks on custom properties and var() references)
designesy_readiness_scoreScore a URL for AI readiness (10 probes for machine-readable design artifacts)
designesy_guardrailsGenerate a build-contract bundle for coding agents from a site's tokens (6 files)
designesy_monitor_scoreRe-run drift checks against earlier snapshots; 10 monitor checks; alerts in the result
designesy_compareDiff the tokens of two live URLs, with the score delta
designesy_reportComposite report for one URL (score, drift, readiness), with an MCP App dashboard

Live

Contract verification

[Designesy contract score] [Last scored]

The live site is verified against the design system contract — 45 deterministic checks with provenance back to tokens. Both badges read the site's own recorded score from /api/badge?site=designesy.org, which carries the date it was measured; for a fresh reading with every check, score designesy.org now. See the methodology page for how the score is computed.

The contract

  • 45 verification checks across 14 weighted categories — tokens, motion, accessibility, cadence, takt, poise, identity, interaction, performance, responsive, semantic, security, spec, copywriting
  • Copywriting principles (added in v0.4.0) — 16 UX copy principles + 4 verification checks (button verb phrases, no trailing periods, descriptive link text, no ALL CAPS)
  • 10 Non-Negotiable Motion Standards — deliberate easing, explicit properties, opacity entrances, keyboard stillness, no layout animation, touch gating, bounded duration, reduced-motion paths, asymmetric press, no ease-in
  • 10 acoustic cue tokens — custom $type: sound (net-new vs W3C DTCG 2025.10), Cuelume 0.2 engine (MIT), interaction-only. The acoustic token document adds 9 extended feedback cues, 19 in all
  • 10 open tensions — documented, not hidden
  • Spring physics — default + momentum tokens via custom $type: spring
  • Machine-readable — W3C DTCG 2025.10 format + custom extensions

See the contract page for the full adoption history.

GitHub Action

Gate your CI on design-contract compliance:

yaml
- uses: LE-VAI/designesy-org@v1  with:    url: https://your-app.vercel.app    min-score: 70    min-grade: C    post-comment: true   # posts a summary comment on PRs (default)

Scores a URL via the live /api/score engine and fails the workflow if the score or grade drops below your threshold. Runs on node24, posts PR comments via bare GitHub REST API (zero dependencies). See action/README.md for full usage.

CLI

Score a URL from the command line — for local development, pre-commit hooks, or scripts:

bash
# No install needed:npx @designesy/score designesy.org
# With gating (exit 1 on failure):npx @designesy/score linear.app --min-score 70 --min-grade B
# JSON output for piping:npx @designesy/score vercel.com --format canonical --json

No required dependencies. The engine runs locally, with no Designesy server; the checks that need a browser return MANUAL. See --help for all options and packages/score/README.md for the full reference.

From a clone of this repo: the engine's dist/ folder is not committed, so build it first.

bash
npm --prefix packages/score cinpm run build:scorenode packages/score/dist/cli.js designesy.org

The older cli/designesy-score.mjs (npm run score) reads the same build. It is superseded by @designesy/score. Its --api flag (or the SCORE_API env var) is an opt-in remote fallback that sends the URL to a scoring server instead of scoring locally; it is off by default.

Repository

The site is a Next.js 16 App Router app (React 19, webpack build), deployed on Vercel. The npm packages and the MCP server live beside it.

apps/site                              the site, its API routes (/api/score, /api/mcp) and its build checks (scripts/)packages/score                         @designesy/score: the scoring engine and CLI (npm)packages/cli                           @designesy/cli: one CLI for tokens and score (npm)packages/tokens                        @designesy/tokens: DTCG token validator (npm)packages/stylelint-plugin-dtcg-tokens  @designesy/stylelint-plugin-dtcg-tokens (npm)packages/lab-builder                   @designesy/lab-builder (npm)packages/designesy-mcp                 designesy-mcp: the local stdio MCP server (PyPI)packages/vai-icons, vai-motion         @vai/icons and @vai/motion (not yet published)action.yml, action/dist                the Designesy Contract Check GitHub Actioncli/                                   designesy-score, the older CLI (superseded by @designesy/score)scripts/                               repo-level scriptsdocs/designesy                         founding notes from May 2026: mission, architecture, contracts, labsDESIGN.md                              operating principles and agent rules (v0.1)AGENTS.md                              agent operating rules

Contract mode, which scores a page against your own DESIGN.md or DTCG token file, is specified in docs/contract-mode-spec.md.

The design contract in DESIGN.md format is generated from the contract source and served at designesy.org/DESIGN.md. The root DESIGN.md file is the older v0.1 charter.

What Designesy is not

Designesy is not a template gallery. Designesy is not a generic AI design tool. Designesy is not a moodboard.

Designesy is a system.

Related tools

  • Lyse — 258-check design system health scoring from your codebase (6 axes). Designesy scores any public URL; Lyse scores your repo. Complementary.
  • axe-core — WCAG accessibility testing. Designesy checks design-contract compliance (tokens, motion, typography) — a different layer. They complement each other.
  • Lighthouse — Performance, accessibility, and SEO auditing. Designesy checks design-contract compliance — Lighthouse doesn't know what a design token is.

FAQ

Does it need an API key? No. The MCP endpoint is stateless Streamable HTTP with no authentication. All 17 tools are read-only.

Is it deterministic? Yes. There is no LLM in the scoring loop: every check is deterministic and reproducible. The same page, engine and contract always produce the same verdicts, and the receipt's digest lets anyone check that. A live URL can change between runs, and results are cached for 24 hours.

What does it score against? The current Designesy design-system contract — 45 checks across 14 weighted categories (tokens, motion, accessibility, cadence, takt, poise, identity, interaction, performance, responsive, semantic, security, spec, copywriting).

Can I use it in CI? Yes. The GitHub Action gates your workflow on contract compliance — fail the build if the score drops below your threshold.

Where is the contract published? At designesy.org/contracts/design-system (human-readable) and designesy.org/contracts/design-system.json (machine-readable, W3C DTCG 2025.10).

License

MIT — see LICENSE. The contract is public; the code is open-source under MIT.

來源:README.md,提交 f3421a7

工具

17

designesy_catalog

List Designesy packages

List the published Designesy packages with versions, URLs, and statuses. Use this to discover what Designesy publishes before fetching a specific contract. When NOT to use: if you already know which package you need, skip this and call designesy_contract directly. Read-only — no side effects. Returns JSON: { package_count, packages[{id, kind, title, version, status, human_url, machine_url}], standing_rules[], machine_exports[] }. No parameters — accepts empty input.

無需輸入參數。

designesy_contract

Get design contract

Get the Designesy design-system contract: the canonical tokens, motion, acoustic, takt, cadence, typography, components, and verification rules that define what the Designesy org considers legitimate design. Use this when you need the actual contract values (token names and values, motion timings, accessibility rules) to author, check, or bind a design. When NOT to use: for a pass/fail score of a live site, use designesy_score; for an agent-skill-format export, use designesy_skill_md. Read-only; this server caches the fetched contract for 5 minutes. With no arguments it returns the full contract JSON, which is large (on the order of 100 KB, tens of thousands of tokens). To return less, pass sections, a list of top-level keys such as ["motion", "colors"]: the result holds id, version, and only those keys. section (one name) is the older form and returns { section, data }. An unknown name returns an error that lists every valid key.

輸入參數sectionsections

designesy_design_review

Get design review rubric

Get the Designesy Design Review rubric for a qualitative design critique: eight dimensions (Purpose, Clarity, Context, Inclusion, System coherence, Durability, Delight, Responsibility), the output format, and the verification checklist, from the published Design Review kit. Use this when you want a structured rubric to critique a design holistically, rather than a numeric compliance score. When NOT to use: for a deterministic numeric score, use designesy_score; this tool gives you a rubric, not a number. Read-only: it returns reference data and does not evaluate the design. Returns JSON: { kind: "review_rubric", source_url, note, inputs (only when passed), kit { id, title, version, status, purpose, quality_bar, permission }, when_to_use[], required_inputs[], dimensions[8] { num, title, desc }, output_format[], verification_checklist[], anti_patterns[], rationalizations[], kit_prompt_url, kit_prompt_note, omitted_fields[] }. The kit's copy-ready agent prompt is not included; kit_prompt_url is the page where a person can read it. Pass artifact, purpose, context, or rules to have them recorded in inputs (rules defaults to the current contract version).

輸入參數rulescontextpurposeartifact

designesy_skill_md

Get contract as SKILL.md

Get the Designesy SKILL.md: the agent-skill-format export of the design-system contract, for a user to save into .agents/skills/ or a system prompt so a coding agent builds UI to the contract (tokens, anti-patterns, rules, verification). Use this when the user wants the contract in that form. When NOT to use: for the raw contract JSON, use designesy_contract; for scoring, use designesy_score. Read-only: no side effects. Returns JSON: { kind: "published_document", source_url, media_type: "text/markdown", note, omitted_sections[], content }, where content is the SKILL.md markdown (tens of thousands of characters) with any section written as steps or a prompt for an AI agent replaced by a one-line marker and named in omitted_sections. No parameters.

無需輸入參數。

designesy_agent_json

Get agent discovery document

Get the Designesy agent discovery document (/.well-known/agent.json) as reference data: the org identity, authority, discovery endpoints, package index, machine exports, permission policy, contact, and citation templates. Use this when integrating with or enumerating Designesy and need the canonical discovery manifest rather than one specific contract. When NOT to use: for the package list, use designesy_catalog (lighter); for the contract, use designesy_contract. Read-only: no side effects. Returns JSON: { kind: "published_document", source_url, media_type: "application/json", note, omitted_fields[], document }, where document is the published object (schema, name, identity, authority, topics, discovery, ingest, packages, machine_exports, contact, permission, cite, and the rest) with any field written as steps for an AI agent (such as ingest.steps) removed and its path listed in omitted_fields. No parameters.

無需輸入參數。

designesy_llms_txt

Get llms.txt brief

Get the Designesy /llms.txt brief as reference data: what Designesy is, canonical links, topics, the published package list, machine exports, standing rules, and contact. Use this first when you don't know what Designesy is; at a few thousand characters it is the cheapest orientation path before pulling heavier artifacts. When NOT to use: for the longer brief, use designesy_llms_full_txt; for the contract itself, use designesy_contract. Read-only: no side effects. Returns JSON: { kind: "published_document", source_url, media_type: "text/plain", note, omitted_sections[], content }, where content is the published text with any section written as steps for an AI agent (such as the ingest steps) replaced by a one-line marker and named in omitted_sections. No parameters.

無需輸入參數。

designesy_llms_full_txt

Get llms-full.txt brief

Get the Designesy /llms-full.txt brief as reference data: authority, discovery endpoints, topics, every published package with its links, standing rules, and anti-patterns. Use this for a fuller picture of the Designesy ecosystem when the short brief from designesy_llms_txt is not enough. When NOT to use: for a quick orientation, use designesy_llms_txt (a few thousand characters; this one runs over ten thousand); for the contract itself, use designesy_contract. Read-only: no side effects. Returns JSON: { kind: "published_document", source_url, media_type: "text/plain", note, omitted_sections[], content }, where content is the published text with any section written as steps or a prompt for an AI agent (such as the ingest protocol and the paste-ready agent prompt) replaced by a one-line marker and named in omitted_sections. No parameters.

無需輸入參數。

designesy_score

Score URL against contract

Score a live URL against the Designesy design contract with the deterministic 45-check verification engine at https://www.designesy.org/api/score. Returns a numeric score, a letter grade (A-F), and the check results. Use this to audit whether a website or AI-generated UI complies with a real design contract (tokens, motion, accessibility, cadence, takt, typography, copywriting). When NOT to use: for token-file validation only, use designesy_tokens_score; for a Lottie file, use designesy_motion_score; for a qualitative critique, use designesy_design_review. The engine fetches the URL server-side, extracts its CSS, and runs 45 checks. Results are cached ~24h server-side per URL and scope. Checks that need a live browser (Core Web Vitals, sound toggle, overflow) return MANUAL; the full audit (/api/score/audit) resolves them. Checks that do not apply to the site (no tokens, no buttons, no DESIGN.md) return SKIP (N/A). format selects the output. designesy (the default) returns JSON: { url, contract_version, summary { total, pass, fail, warn, skip, manual, score (0-1), score_percent (0-100), grade }, tokens_extracted, checks[{ id, item, category, status, detail }], note }. canonical returns the engine's review-findings.json schema JSON unchanged. review returns the engine's markdown report unchanged (coverage by category, a findings table of the FAIL and WARN checks, and a verdict). google returns the engine's @google/design.md-compatible JSON unchanged. scope sets the scoring scope: contract or universal. Omit it and the engine auto-detects: contract for designesy.org, universal for every other site. If the network fails before the request reaches the engine (no DNS, no route, a refused connection), format designesy falls back to the offline engine: 27 of the 45 checks run locally, each mirroring the live engine's verdict, under the same scope. Its result adds engine (kind offline, the engine version it mirrors, and the checks it did not run) and scope, and its note says

輸入參數urlscopeformat

designesy_tokens_score

Validate DTCG tokens

Validate a design token file against the W3C Design Tokens Community Group (DTCG) 2025.10 Final Community Group Report (the spec's first stable version, published Oct 28 2025 as a Candidate Recommendation and considered stable). Returns 10 conformance checks (t01-t10) with PASS, FAIL, WARN or SKIP. Use this to verify a tokens.json (or any DTCG token export) is structurally correct: $type (direct or inherited) present, one $value or $ref per token (a JSON Pointer $ref must resolve), structured colors (colorSpace + components rather than bare hex), dimensions in the 2025.10 { value, unit } form, and a $schema pointer to designtokens.org (a Designesy policy: DTCG does not require $schema). With 84% of teams now using design tokens (zeroheight Design Systems Report 2025, up from 56% in 2024) and the spec finally stable, every adopting team needs a validator. When NOT to use: for scoring a whole live site (not just its token file), use designesy_score. Executable: fetches the URL or parses the raw JSON you provide, runs 10 checks server-side. No browser needed. Score: PASS=1, WARN=0.5, FAIL=0, SKIP is not scored; points / scored checks x 100. Returns JSON: { contract_id, contract_version, contract_status, url, total_tokens, score (0-100), grade (A-F), pass_count, fail_count, warn_count, skip_count, scoring, checks[{id (t01-t10), name, status (PASS, FAIL, WARN or SKIP), detail}], provenance, validator_note }. Pass url to fetch a remote token file, or dtcg_file to validate an inline JSON string. Provide exactly one.

輸入參數urldtcg_file

designesy_a11y_score

Get WCAG audit kit

Get the Designesy WCAG 2.2 AA accessibility verification framework: 11 conformance checks (a01-a11) plus a ready-to-run Playwright + axe-core 4.13.0 script template targeting your URL. Use this to audit a site for accessibility violations. When NOT to use: for a full design-contract score (not just a11y), use designesy_score. Does NOT run the scan: axe-core needs a real browser DOM. Returns the 11 checks + a Playwright script you execute locally (npm i -D @axe-core/playwright). The score comes from your local run, not from this tool. Returns JSON: { checks[{id (a01-a11), name, status: "PENDING_EXECUTION"}], playwright_script, install_command, run_command }. Pass config (JSON string) to customize axe.configure(), for example with branding overrides or rule disables. Omit for standard WCAG 2.2 AA.

輸入參數url必填configruleset

designesy_motion_score

Validate Lottie animation

Validate one Lottie animation file against the Designesy motion contract: its ten checks (m01-m10), drawn from the Lottie spec v1.0.1 and the Designesy §16 Ten Non-Negotiable Motion Standards. Each check returns PASS, FAIL, WARN or SKIP under the contract's own name for its id: m01 the schema's top-level animation object (layer contents are not validated, so a clean file returns SKIP, not PASS), m02 the required fields (v, fr, ip, op, w, h, layers), m03 no deprecated 4.x Bodymovin version, m04 a markers array, m05 a meta object, m06 a reduced-motion path (a marker or slot named for it, or a meta note of an external prefers-reduced-motion wrapper), m07 keyframe easing (linear, ease and ease-in curves fail), m08 duration within 300 ms (longer returns WARN, since a justification cannot be read from a file), m09 layout-property animation and m10 keyboard-initiated motion (both SKIP: they concern the page that embeds the file). Use this to check that a motion asset is well formed and carries reduced-motion support. When NOT to use: for the motion CSS of a whole site, use designesy_score. Executable: fetches the URL or parses the inline JSON; no browser needed. Score: PASS=1, WARN=0.5, FAIL=0, SKIP is not scored; points / scored checks x 100. Returns JSON: { contract_id, contract_version, contract_status, url, lottie_version, layer_count, score (0-100), grade (A-F), pass_count, fail_count, warn_count, skip_count, scoring, checks[{id (m01-m10), name, status (PASS, FAIL, WARN or SKIP), detail}], ten_non_negotiable, provenance, validator_note }. Pass url to fetch a remote Lottie file, or lottie_file to validate an inline JSON string. Provide exactly one.

輸入參數urllottie_file

designesy_drift_score

Score UI drift

Score a live URL for AI-generated UI drift. Its 12 checks detect the four documented 2026 drift failure modes: token fabrication (var() references with no fallback to custom properties declared nowhere: not in a stylesheet, a <style> block or a style attribute), within-session drift (spacing/color/radius value variance), between-session amnesia (inconsistent font stacks, shadows, transitions), and silent breaking changes (z-index chaos, alias chains that end in an undeclared property). Use this when you need to verify whether a site (especially an AI-generated one) is drifting off its own declared token system. When NOT to use: for a full 45-check design-contract score, use designesy_score; for token-file format validation, use designesy_tokens_score. Executable: fetches the URL server-side, extracts all CSS (inline + linked stylesheets), parses custom property declarations (stylesheets, <style> blocks and style attributes) and var() references, runs 12 drift checks. No browser needed. Returns JSON: { ok, url, scope, score (0-100), grade (A-F), pass, warn, fail, skip, total, tokensExtracted, checks[{id, item, category, status, detail}] }. Results cached ~24h per URL.

輸入參數url

designesy_readiness_score

Score AI readiness

Score a URL for design-system AI readiness — the 6th maturity axis (zeroheight 2026). 10 checks probe the target origin for machine-readable artifacts: DTCG token files, llms.txt, agent.json, MCP endpoint (tools/list), DESIGN.md, token $description, component schemas, sitemap.xml, robots.txt, and Open Graph/Twitter meta. Use this to verify whether a design system is the default context AI tools build from, or whether AI is silently working around it. When NOT to use: for full design-contract scoring, use designesy_score; for AI-drift detection, use designesy_drift_score. Executable — fetches the URL and probes the origin via HEAD/GET for each artifact. No browser needed. Returns JSON: { ok, url, score (0-100), grade (A-F), pass, warn, fail, total, checks[{id, item, category, status, detail}] }. Results cached ~24h server-side per URL.

輸入參數url

designesy_guardrails

Generate build-contract bundle

Generate a frozen build-contract bundle for AI coding agents from any design system URL (the product layer). Ingests a site, extracts its :root tokens, and emits 6 outputs: (1) DTCG-format token file, (2) Stylelint config generated from token values, (3) AGENTS.md-format rules with token allowlist, (4) component contract with allowed prop patterns, (5) anti-pattern documentation, (6) DESIGN.md file (Google open spec, google-labs-code/design.md), the de-facto AI-readable design-context standard: YAML front matter plus a markdown body. Use this when you need to turn a design system into the file AI agents read and the lint that enforces it. When NOT to use: for design-contract scoring, use designesy_score; for token-file validation, use designesy_tokens_score; for drift detection, use designesy_drift_score. Executable: fetches the URL, extracts CSS + :root custom properties, generates the bundle. No browser needed. The full bundle grows with the number of tokens a site declares: about 7 KB to about 530 KB of JSON on the 26 sites measured (about 110 KB for designesy.org). To trim it, pass parts, a list of bundle file names such as ["designMd"] or ["tokens", "lintConfig"]: the result keeps score, grade, counts and checks, and its bundle holds only those files, in the order asked. Valid parts: tokens, lintConfig, agentRules, componentContract, antiPatterns, designMd. A single part can still be large on a site with many tokens. An unknown name returns an error that lists the valid parts. Returns JSON: { ok, url, score (0-100, emission completeness), grade, pass, warn, fail, total, tokensExtracted, bundle: { tokens, lintConfig, agentRules, componentContract, antiPatterns, designMd }, checks[{id, item, category, status, detail}] }; with parts it adds parts, and bundle holds only the named files. Results cached ~24h per URL.

輸入參數urlparts

designesy_monitor_score

Monitor drift with email alerts

Score a URL for continuous design-drift governance — the temporal layer over the drift radar. Re-runs the 12 drift checks (d01-d12) on the URL and computes 10 monitor checks (m01-m10): schedule registered, last run fresh, drift delta vs baseline, trend slope (3-run trajectory), new violations since last run, resolved since last run (the healing signal), score degradation threshold, token-set mutation, contract version drift, and alert delivered. When alerts fire and an email address is provided, sends an HTML drift-alert email via Resend (requires RESEND_API_KEY env var). Pass a history array of prior snapshots to compute deltas; omit it for a first-run baseline. Use this to watch a design system over time — 'weekly audits at cents per report' (Into Design Systems 2026). When NOT to use: for a single point-in-time drift check, use designesy_drift_score; for design-contract scoring, use designesy_score. Executable — fetches the URL, extracts CSS + :root tokens, runs checks, computes deltas. No browser needed. Returns JSON: { ok, url, score (0-100, governance health), grade (A-F), pass, warn, fail, total, currentSnapshot, baseline, previous, driftChecks, monitorChecks, alerts, emailAlert }. Results cached ~24h server-side per URL.

輸入參數urlemailhistory

designesy_compare

Compare two design systems

Diff two design systems from live URLs — the only URL-scoped design-token diff engine. Fetches both URLs in parallel, extracts their :root custom properties, and produces a structured diff across 8 dimensions: tokens added (in A not B), removed (in B not A), renamed (heuristic Levenshtein ≤ 2), value-changed (same name, different value), scale-stop-changed (spacing/radius/color scale steps), contrast-drift-per-pair (WCAG contrast ratio change for shared color tokens), structure-delta (token count + category distribution), and score-delta (runs /score on both URLs and diffs). Use this to answer 'what actually changed between two design systems' or 'how does our design system differ from a reference'. When NOT to use: for single-site drift detection, use designesy_drift_score; for continuous monitoring, use designesy_monitor_score. Executable — fetches both URLs, extracts CSS + tokens, computes diff. No browser needed. Returns JSON: { ok, urlA, urlB, score (0-100, diff completeness), grade, pass, warn, fail, total, tokensA, tokensB, added[], removed[], renamed[], valueChanged[], scaleDiff, structureDelta, contrastDrift[], scoreDelta, checks[] }. Results cached ~24h server-side per URL pair.

輸入參數urlA必填urlB必填

designesy_report

Build composite design report

Generate a unified design-intelligence report for a single URL, the synthesis capstone. Fires /score (45-check audit), /drift (12-check drift radar), and /readiness (10-check AI readiness) in parallel, then computes a weighted composite: score × 0.5 + drift × 0.3 + readiness × 0.2. One input, one output, one composite grade. Use this when you need a single holistic assessment instead of three separate scans, or when sharing a design-intelligence verdict (the report is the most shareable surface). When NOT to use: for just the audit score, use designesy_score; for just drift, use designesy_drift_score; for just AI readiness, use designesy_readiness_score. Executable: fires 3 internal APIs in parallel, each fetches the target URL. No browser needed. The full result is large: about 75 to 100 KB of JSON on the ten sites measured, on the order of 20,000 tokens or more, because it carries each engine's whole result beside the merged check list. To trim it, pass detail "summary": the same keys with fewer rows, about 4 to 31 KB on the same sites. It keeps the composite, the totals, each engine's score, grade and counts, and only the checks and synthesis entries that did not PASS; omitted counts what was left out. detail "full" (the default) returns everything. Returns JSON: { ok, url, compositeScore (0-100), compositeGrade (A-F), score { sub-result }, drift { sub-result }, readiness { sub-result }, totalChecks, totalPass, totalWarn, totalFail, totalSkip, totalManual, checks[] (all checks across all engines, tagged with engine), synthesis[] (8 synthesis checks verifying the report ran correctly), appUrl (standalone interactive dashboard URL) }; with detail "summary" it adds detail and omitted. Results cached ~24h per URL. MCP Apps: hosts that support io.modelcontextprotocol/ui render an interactive dashboard inline; others get the JSON plus an appUrl link.

輸入參數url必填detail

版本歷史

11
  1. v1.13.10最新Oct 22, 2026
  2. v1.13.9Oct 14, 2026
  3. v1.13.8Oct 11, 2026
  4. v1.13.7Oct 11, 2026
  5. v1.13.6Oct 10, 2026
  6. v1.13.5Oct 10, 2026
  7. v1.13.4Oct 10, 2026
  8. v1.13.2Oct 9, 2026
  9. v1.13.1Oct 9, 2026
  10. v1.12.2Sep 29, 2026
  11. v1.12.0Sep 16, 2026

評分

已滿足適用檢查項的 100%

該評分衡量此收錄條目的完整程度,依據註冊中心條目、端點與公開來源計算得出。它不是對伺服器本身的評價,也不表示伺服器安全或目前可用:可連通性是帶日期的檢查結果,評分也不包含安裝量或使用者評價。

  • 近 30 天內可連通必需25 分
  • 已宣告認證方式必需10 分
  • 已列出工具必需15 分
  • 描述必需15 分
  • 圖示10 分
  • 文件15 分
  • 授權條款10 分