Designesy

Designesy

_{ホームページから録画した12秒のループです。1回再生した後、判定結果で停止します。動きを減らす設定を有効にしている場合は、静止画が表示されます。designesy.orgでの実行を見る。}

AIが生成したUIのデザイン品質ゲートです。任意のURLを45項目の決定論的チェックで採点し、A〜Fで評価します。designesy.orgで公開中です。

クイックスタート

インストール不要で、5秒で任意のURLを採点できます：

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

Claude Desktop、Cursor、または任意のMCPクライアントに追加できます：

# 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

このリポジトリをクローンしますか？ ルートにある.mcp.jsonにより、ローカルサーバー（uvx designesy-mcp）がClaude Codeのプロジェクトサーバーとして追加されます。プロジェクトを初めて開くときに、Claude Codeから承認を求められます。uvが必要です。

デザイン契約への準拠をCIのゲートに設定できます：

- 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)

同じ45項目のチェックエンジンが、MCP サーバー（AIエージェント向けの17個のツール）、必須依存関係のないCLI（npx @designesy/score）、GitHub Actionで利用されています。

Designesy Contract Checkは、任意のURLを45項目のデザインシステム契約（トークン、モーション、アクセシビリティ、ケイデンス、タクト、ポイズ、アイデンティティ、インタラクション、パフォーマンス、レスポンシブ、セマンティック、セキュリティ、仕様、コピーライティング）に照らして採点するGitHub Actionです。スコアまたは評価が設定したしきい値を下回ると、CIワークフローを失敗させます。処理にLLMは使用しません。すべてのチェックは公開された決定論的ルールであるため、同じページには常に同じ判定結果が返されます。

ツール

• designesy_score — 公開中の URL を 45 項目のデザイン契約に照らして採点します。スコア、評価（A～F）、各チェック項目の内訳を返します。
• designesy_tokens_score — DTCG デザイントークンファイルを検証します。W3C DTCG 2025.10 に照らした適合性チェックを 10 項目実施します。
• designesy_a11y_score — WCAG 2.2 AA のアクセシビリティフレームワークと、Playwright/axe-core のスクリプトテンプレートを取得します。
• designesy_motion_score — Lottie アニメーションファイルを検証します。Lottie 仕様 v1.0.1 と §16 のモーション標準に照らしたチェックを 10 項目実施します。
• designesy_contract — デザインシステム契約（トークン、モーション、タクト、ケイデンス、タイポグラフィ、検証）全体、または指定した最上位の sections のみを取得します。
• designesy_catalog — 公開されている Designesy パッケージを、バージョンと URL とともに一覧表示します。件数は package_count で返されます。
• designesy_design_review — 8 つの観点からなる定性的なデザインレビュールーブリックを取得します。
• designesy_skill_md — Cursor、Claude Code、Replit 向けに、エージェントスキル形式の SKILL.md として契約を取得します。
• designesy_agent_json — /.well-known/agent.json ディスカバリードキュメントを取得します。
• designesy_llms_txt — 簡潔な /llms.txt エージェント概要を取得します。
• designesy_llms_full_txt — 参照データとして、完全な /llms-full.txt 概要を取得します（取り込み手順とそのまま貼り付けられるエージェントプロンプトは、公開ファイルに記載されています）。
• designesy_drift_score — 公開中の URL を対象に、UI のドリフトを採点します。カスタムプロパティと var() 参照を 12 項目でチェックします。
• designesy_readiness_score — AI 対応状況を URL で採点します。機械可読なデザインアーティファクト（DTCG トークン、llms.txt、agent.json、MCP エンドポイント、DESIGN.md など）を 10 項目で調査します。
• designesy_guardrails — サイトのトークンから、コーディングエージェント向けのビルド契約バンドルを生成します。DTCG トークン、Stylelint 設定、AGENTS.md ルール、コンポーネント契約、アンチパターン、DESIGN.md が含まれます。
• designesy_monitor_score — 以前のスナップショットに対してドリフトチェックを再実行し、10 項目のモニターチェックを計算します。アラートは結果に含まれます。
• designesy_compare — 2 つの公開中 URL のトークンを比較します。追加、削除、名前変更、値の変更、スケールとコントラストのドリフト、スコアの差分を確認できます。
• designesy_report — URL の総合レポート（スコア × 0.5 + ドリフト × 0.3 + 対応状況 × 0.2）を作成します。MCP Apps をサポートするホストでは、インタラクティブなダッシュボードも表示されます。

ツールリファレンステーブル

ツール	説明
designesy_score	ライブ URL を 45 項目のデザイン契約に照らして採点します — スコア、グレード（A–F）、項目ごとの内訳を返します
designesy_tokens_score	DTCG デザイントークンファイルを検証します（10 項目の適合性チェック、W3C DTCG 2025.10）
designesy_a11y_score	WCAG 2.2 AA アクセシビリティフレームワークと、Playwright/axe-core のスクリプトテンプレートを取得します
designesy_motion_score	Lottie アニメーションファイルを検証します（10 項目のチェック、Lottie spec v1.0.1 と §16 motion standards）
designesy_contract	デザインシステム契約（トークン、モーション、タクト、ケイデンス、タイポグラフィ、検証）をすべて、または指定したトップレベルの sections のみ取得します
designesy_catalog	公開されている Designesy パッケージを、バージョンと URL とともに一覧表示します
designesy_design_review	8 つの観点からなる定性的なデザインレビュールーブリックを取得します
designesy_skill_md	エージェントスキル形式の SKILL.md として契約を取得します（Cursor/Claude Code/Replit 用）
designesy_agent_json	/.well-known/agent.json ディスカバリードキュメントを取得します
designesy_llms_txt	簡潔な /llms.txt エージェント概要を取得します
designesy_llms_full_txt	参照データとして、/llms-full.txt の完全な概要を取得します（取り込み手順とそのまま貼り付けられるエージェントプロンプトは、公開ファイルに記載されています）
designesy_drift_score	ライブ URL の UI ドリフトを採点します（カスタムプロパティと var() 参照に関する 12 項目のチェック）
designesy_readiness_score	URL の AI 対応状況を採点します（機械可読なデザイン成果物を対象とする 10 項目のプローブ）
designesy_guardrails	サイトのトークンをもとに、コーディングエージェント向けのビルド契約バンドルを生成します（6 ファイル）
designesy_monitor_score	以前のスナップショットと比較してドリフトチェックを再実行します。モニターチェックは 10 項目で、結果にアラートが含まれます
designesy_compare	2 つのライブ URL のトークンを差分比較し、スコアの差分を表示します
designesy_report	1 つの URL に対する複合レポート（スコア、ドリフト、対応状況）を、MCP App ダッシュボードとともに表示します

公開中

• サイト： designesy.org
• MCP エンドポイント： designesy.org/api/mcp（Streamable HTTP、認証不要）
• サイトを採点： designesy.org/score
• 方法論： designesy.org/methodology — 45 項目の採点方法の詳細
• 契約： designesy.org/contracts/design-system
• 機械可読エクスポート： designesy.org/contracts/design-system.json

契約の検証

ライブサイトは、デザインシステム契約に照らして検証されています。トークンまで追跡できる、決定論的な 45 項目のチェックを行います。2 つのバッジには、サイト自身が /api/badge?site=designesy.org に記録したスコアが表示され、測定日も含まれます。すべてのチェックを含む最新の結果は、designesy.org を今すぐ採点してください。スコアの算出方法については、方法論のページをご覧ください。

コントラクト

• 14 の重み付けカテゴリにわたる 45 の検証チェック — トークン、モーション、アクセシビリティ、ケイデンス、タクト、落ち着き、アイデンティティ、インタラクション、パフォーマンス、レスポンシブ、セマンティック、セキュリティ、仕様、コピーライティング
• コピーライティングの原則（v0.4.0 で追加） — 16 の UX コピー原則と 4 つの検証チェック（ボタンの動詞句、末尾にピリオドを付けない、説明的なリンクテキスト、すべて大文字にしない）
• 譲れないモーション基準 10 項目 — 意図的なイージング、プロパティの明示、表示時の不透明度変化、キーボード操作時の静止、レイアウトアニメーションなし、タッチ操作の制限、継続時間の上限、視覚効果を抑えるモードへの対応、非対称な押下表現、イーズインなし
• 10 個の音響キュートークン — カスタム $type: sound（W3C DTCG 2025.10 にはない新機能）、Cuelume 0.2 エンジン（MIT）、インタラクション専用。音響トークンのドキュメントでは、9 個の拡張フィードバックキューが追加され、合計 19 個になります
• 10 個の未解決の論点 — 隠さずに文書化
• スプリング物理 — カスタム $type: spring によるデフォルトトークンとモーメンタムトークン
• 機械可読 — W3C DTCG 2025.10 形式とカスタム拡張

採用の経緯について詳しくは、コントラクトのページをご覧ください。

GitHub Action

デザインコントラクトへの準拠を CI のゲートに設定できます。

- 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)

稼働中の /api/score エンジンで URL を採点し、スコアまたはグレードがしきい値を下回るとワークフローを失敗させます。node24 で実行され、依存関係なしで GitHub REST API を直接使用して PR コメントを投稿します。詳しい使い方は action/README.md をご覧ください。

CLI

ローカル開発、コミット前フック、スクリプト向けに、コマンドラインから URL を採点できます。

# 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

必須の依存関係はありません。エンジンは Designesy サーバーを使わずにローカルで実行され、ブラウザーが必要なチェックは MANUAL を返します。すべてのオプションについては --help を、リファレンス全体については packages/score/README.md をご覧ください。

このリポジトリをクローンした場合： エンジンの dist/ フォルダーはコミットされていないため、先にビルドしてください。

npm --prefix packages/score ci
npm run build:score
node packages/score/dist/cli.js designesy.org

旧版の cli/designesy-score.mjs（npm run score）も同じビルドを読み込みます。これは @designesy/score に置き換えられています。--api フラグ（または SCORE_API 環境変数）は、ローカル採点の代わりに URL を採点サーバーへ送信する、任意で有効化するリモートフォールバックです。デフォルトでは無効です。

リポジトリ

サイトは Next.js 16 App Router アプリ（React 19、webpack ビルド）で、Vercel にデプロイされています。npm パッケージと MCP サーバーは、同じリポジトリ内にあります。

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 Action
cli/                                   designesy-score, the older CLI (superseded by @designesy/score)
scripts/                               repo-level scripts
docs/designesy                         founding notes from May 2026: mission, architecture, contracts, labs
DESIGN.md                              operating principles and agent rules (v0.1)
AGENTS.md                              agent operating rules

独自の DESIGN.md または DTCG トークンファイルに照らしてページを採点するコントラクトモードの仕様は、docs/contract-mode-spec.md に記載されています。

DESIGN.md 形式のデザインコントラクトは、コントラクトのソースから生成され、designesy.org/DESIGN.md で提供されています。ルートにある DESIGN.md ファイルは、旧版 v0.1 の規約です。

Designesy ではないもの

Designesy はテンプレートギャラリーではありません。汎用の AI デザインツールでも、ムードボードでもありません。

Designesy はシステムです。

関連ツール

• Lyse — コードベースを対象にした 258 項目のデザインシステム健全性スコアリング（6 軸）。Designesy は公開 URL を採点し、Lyse はリポジトリを採点します。互いに補完するツールです。
• axe-core — WCAG アクセシビリティテスト。Designesy はデザインコントラクトへの準拠（トークン、モーション、タイポグラフィ）をチェックします。対象とするレイヤーが異なり、互いに補完します。
• Lighthouse — パフォーマンス、アクセシビリティ、SEO の監査。Designesy はデザインコントラクトへの準拠をチェックします。Lighthouse はデザイントークンを認識しません。

FAQ

API キーは必要ですか？ いいえ。MCP エンドポイントは認証なしのステートレスな Streamable HTTP です。17 個のツールはすべて読み取り専用です。

判定結果は決定論的ですか？ はい。スコアリングの処理に LLM は使われていません。すべてのチェックは決定論的で、再現可能です。同じページ、エンジン、コントラクトを使用すれば、常に同じ判定結果が得られます。また、レシートのダイジェストによって、誰でもそれを確認できます。ライブ URL は実行ごとに変更される可能性があり、結果は 24 時間キャッシュされます。

何を基準にスコアリングしますか？ 現在の Designesy デザインシステムコントラクトです。14 の重み付けカテゴリ（トークン、モーション、アクセシビリティ、ケイデンス、タクト、ポイズ、アイデンティティ、インタラクション、パフォーマンス、レスポンシブ、セマンティック、セキュリティ、仕様、コピーライティング）にわたる 45 項目のチェックがあります。

CI で使用できますか？ はい。GitHub Action は、コントラクトへの準拠状況に基づいてワークフローをゲートします。スコアがしきい値を下回ると、ビルドを失敗させます。

コントラクトはどこで公開されていますか？ designesy.org/contracts/design-system（人間が読める形式）と designesy.org/contracts/design-system.json（機械可読形式、W3C DTCG 2025.10）です。

ライセンス

MIT — LICENSE を参照してください。コントラクトは公開されており、コードは MIT ライセンスのオープンソースです。