品質評価(evals)

AI 生成の定期健康診断

AI エージェントに UI を作らせる時代、「AI がデザインシステムのルール通りに作れているか」は誰も確かめていませんでした。relay では固定のお題を AI に解かせ、ルール通りに作れたかを採点する回帰テスト(evals)を運用しています。デザインシステムやドキュメントを変えたとき、また AI モデル自体が更新されたときに、生成品質が静かに劣化していないかをスコアで検知します。

hooks と evals — 防ぐ仕組みと測る仕組み

relay には以前から hooks(AI がコードを書いた直後にハードコード違反を検知してその場で直させる、利用者側のガードレール)があります。evals はこれを置き換えるものではなく、ルールに従えているかを測って記録する、デザインシステム側の定期健康診断です。防ぐ × 測るの両輪で品質を守ります。

例えると hooks = 車線逸脱防止アシスト evals = 定期健康診断
いつ動く AI がコードを書いた直後 週 1 回 + ルール変更時
何をする 違反をその場で直させる 従えるかを測って記録する
動く場所 利用者のプロジェクト デザインシステムのリポジトリ

採点は 2 段構え

「アカウント削除の前に確認を挟んで」のような意図レベルの曖昧なお題を AI に解かせます(コンポーネント名は伝えません — デザインシステムが選定を導けているかを測るためです)。生成された UI を 2 種類のチェックで採点します。

機械チェック

コードで判定 — 決定的・無料

  • 色・余白などのハードコード(配布中の hooks と同一判定)
  • 実在しないクラスの捏造(例: btn-outline のような架空 variant)
  • 必須マークアップ(aria-current など)

AI 審査員

機械で測れない判断を判定

  • 明文化された選定ルールの遵守判定(例: 削除確認は modal + negative ボタン)
  • 採点基準は各コンポーネント仕様の「機能 / 使用法」など、デザインシステムが文書化したルールから作成
  • 判定に迷う場合は不合格に倒す設定(甘い採点をしない)

定点観測 — 静かな劣化をスコアで検知

毎回同じ試験を回し、結果をスコアとして蓄積します。推移表で「いつから・どのお題が落ち始めたか」を追えるため、利用者からの「最近生成が変」という報告より先に劣化へ気づけます。

実行日 削除確認 招待フォーム 契約一覧 空状態 設定ナビ
2026-07-21 PASS PASS PASS PASS PASS 5/5

2026-07-21 時点のベースライン。以降、週次の実行で行が増えていきます。

これから

  • 週 1 回の定点観測でスコアの安定性を検証する
  • ルール(MCP・DESIGN.md・コンポーネント仕様)を変更する PR は、前後で evals を回して効果を測定する
  • スコアが安定したら CI に組み込み、試験に落ちたルール変更はマージできないようにする
  • 新しいコンポーネントを追加したら試験のお題も 1 本追加し、デザインシステムが育つほど試験も育てる

デザイナーは「なぜこちらを選ぶのか」という判断軸を明文化し、それがそのまま試験になります。relay Design System は「UI パーツの提供」から「品質を保ち続ける仕組みの提供」へ。

仕組みの詳細・実行方法は GitHub の evals/README.md を参照してください。