AIエージェント対応が進むデザインシステムの最近の動きをまとめてみた - Meta Astryx・v0・Serendie・SmartHR
はじめに
デザインシステムをAIエージェントに正しく使わせるための仕組みが、今年に入ってから各社で相次いで公開・拡充されています。
- 2026年6月 MetaがAstryxをOSSとして公開。
- 2026年6月 v0のDesign Systems 2.0が、デザインシステムライブラリの刷新と生成品質の向上を発表。
- 2026年5月 SmartHR Design SystemがClaude Code / Cursor向けプラグインを新設。
- 2026年2月〜 三菱電機のSerendie Design SystemがMCP Serverを公開。その後、Agent SkillsやFigma PluginなどAIエージェント向けの仕組みを拡充。
本記事では、上記デザインシステムの仕組みがそれぞれ何が可能で、どんな狙いを持っているのかを調査し、アプローチの違いを整理しました。
Meta Astryx
AstryxはMetaが2026年6月にOSSとして公開した、React + StyleXベースのデザインシステムです。
社内で8年間育てられ、Meta社内の13,000以上のアプリを支えてきたデザインシステムの外部公開版とされています。
技術構成はReact + StyleX。150以上のアクセシブルなコンポーネント、7種のテーマ、ready-to-ship templates、CLIが付属します。
AI対応として特徴的なのはCLIです。CLIはJSON APIとCapability Manifestを備えており、astryx manifest --json によって、CLIの使い方をAIエージェントが読み取りやすいJSON形式で出力できます。人間が使うCLIと、エージェントが読むAPIを同じ面に置いている点が特徴です。
vibe-tests — 生成の質を測るハーネス
Astryxで個人的に一番注目したのがvibe-testsです。これはLLMがデザインシステムを使ってどれだけ正しくUIコードを生成できるかを、構造化して評価するハーネスです。
internal/vibe-tests/README.md では、同じプロンプトを異なるデザインシステム構成に投げ、結果を測定可能にし比較するものとして説明されています。比較対象はAstryx、shadcn/uiベースライン、素のHTML + inline CSSの3つです。
また、評価ロジックは各ターゲットで同等に保つ、expectedComponents は評価専用でエージェントに開示しない、サブエージェントは毎回コンテキストなしで新規起動する、などの原則が明記されています。エージェントに答えを知らせず、各システムが提供するドキュメントやツールから発見させる設計です。
静的評価の5次元
静的評価（src/universal-eval.ts）は5つの次元で、それぞれ0〜100点で採点します。
- Correctness: TypeScriptエラー、存在しないprops、DOMイベントの誤用など
- Accessibility: aria-labelなしのアイコンのみボタン、labelなしinput、非インタラクティブ要素への
onClick、alt欠落など - Code Quality: ネスト、分岐数、長すぎる関数、
any、console.log、map時のkey欠落など - Efficiency: 装飾過多、ボイラープレート、重複、要素あたりのスタイリング判断数など
- Maintainability: ハードコードした色・spacing・typography、semantic token比率、stateの局所性など
Correctnessの減点ロジックを見ると、TypeScriptエラー1件ごとに -15。React DOMでは発火しないonPressなどのphantom propも検出します。onPressはcriticalとして -15、button要素へのonChangeなどはmoderateとして -8 などとなっています。
design-judge — 見た目をVision LLMで採点
静的解析では測れないデザインの質は、src/design-judge.tsのdesign-judgeが担っています。生成物のスクリーンショットと、ideals/ に置かれた理想状態のPNGを比較し、Vision LLMで視覚的な忠実度を採点します。
正解画像は、Figma、HTMLをもとにしたPNGで、Astryx・baseline・HTMLのいずれの生成物でもないことが要件になっています。ideals/README.md では、1920×1200のPNGであること、少なくとも1名のデザイナーがレビューすべきことも記載されています。現在は55 prompt ID、62 images totalが用意されています。
採点は1回で決めず、通常3回実行して中央値を採用します。
degradationモード — 途中で崩れないかを測る
degradationモードは、会話が長くなるにつれてAIがデザインシステムの制約を忘れ、自前スタイルへ流れていかないかを測るためのモードです。10ターンの会話を通して成果物を作らせ、その途中に「How do I center a div?」のような無関係な質問を挟みます。そしてターン0・6・10で成果物を記録します。
狙いは、反復開発の中でもデザインシステムのパターンを使い続けられるかを確認することです。単発生成の品質だけでなく、会話が続いたときのinstruction persistenceやcontext rotに近い問題まで評価対象にしている点が特徴です。
v0 Design Systems 2.0
v0のDesign Systems 2.0は、生成ツール側に自社デザインシステムを教え込むアプローチです。
自社のデザインシステムを一度v0に登録しておくと、以降のチャットで自社のコンポーネント・トークン・規約に沿ったUIが生成されるようになります。登録されたものはskill（v0が保持する指示セット）としてワークスペースに保存されます。
インポート元はGitHubリポジトリ、Figmaフレーム、Storybookなどのドキュメントリンク、添付ファイル、プライベートnpm用の環境変数など幅広く対応しています。
登録の流れの中に検証のステップが挟まっています。v0はソースを読み込んだあと、理解が正しいかを検証するためのスターターアプリを一度構築し、ユーザーがそれをレビューして承認するとskillとして保存されます。いきなり本番生成に入らず、検証を挟むことで確実性を高める方針になっています。
方針として明記されているのが、グラウンディングです。コンポーネント・prop・トークンがソースから検証できない場合、v0はそれを使うべきでないとされています。存在しないものをでっち上げないという仕組みです。
また、v0のデザインシステムは2026年2月25日にGitHubからのインポート、3月16日にチームskillとの直接リンク、そして6月26日にデザインシステムライブラリの刷新と生成品質の向上、と段階的に改善が進んでおり現在も様々な機能が追加されてきています。
三菱電機Serendie
Serendieは三菱電機のデザインシステムです。
2024年11月に公開され、ReactコンポーネントなどGitHub上の各パッケージや、Figma Communityで公開されているSerendie UI Kitなどが提供されています。
AI対応は以下で構成されています。
- リモートMCPサーバー
- Agent Skills（serendie-overview）
- Figma Plugin
加えてllms.txt（簡易版と詳細版のllms-full.txt）も用意されています。
Serendie MCPサーバーは、https://serendie.design/mcp をエンドポイントとして設定するだけで利用できます。MCPのツールは4種で、Serendie UIコンポーネントの一覧とプロパティ、デザイントークン、Serendie Symbols、各種ガイドラインを取得できます。
MCPサーバーやAgent Skillsは、Claude Code、Codex、Cursorなど主要なコーディングエージェント向けの設定例・導入方法が用意されています。
Claude Codeの場合はPluginにMCPとSkillが同梱されていて、以下のコマンドで導入できます。
/plugin marketplace add serendie/serendie
/plugin install serendie@serendie
SmartHR Design System
SmartHR Design SystemはSmartHRのデザインシステムです。
実装基盤はReactライブラリのsmarthr-uiです。
2026年5月以降、Claude Code / Cursor / Codex向けのプラグインが整備され、現在はcomponent-guidelinesとdesign-pattern-guidelinesの2種類のAgent Skillsが提供されています。MCPサーバーではなく、コンポーネントやデザインパターンの使い方をスキルとして配布する構成です。
スキルは以下の2種です。
- component-guidelines: smarthr-uiの各コンポーネントを正しく使うためのガイド。104件のコンポーネントガイドがあり、Props・型情報、eslint-plugin-smarthr由来のDo/Don't、チェックリストで構成されています。
- design-pattern-guidelines: SmartHRプロダクトのページレイアウトやUIパターンを正しく実装するためのガイド。22件のパターンガイドが用意されています。
component-guidelinesの個別ガイドは、metadata、eslint-plugin-smarthrのルールREADME、チェックリストをもとに自動生成される運用です。AI向けのガイドを手書きで別管理すると更新が追いつかず古びていきがちですが、その乖離が起きにくい作りになっています。
/plugin marketplace add kufu/smarthr-design-system
/plugin install smarthr-design-system@smarthr-design-system
4つのアプローチの整理
同じ「デザインシステムをAIに渡す」取り組みでも、評価する、取り込む、参照させる、ガイド化する、などどこに重点を置いているかが違います。
| 対象 | アプローチ | 提供物 | 特徴 |
|---|---|---|---|
| Meta Astryx | 評価・検証 | デザインシステム + 評価ハーネス（vibe-tests） | エージェントの成果物を静的評価とVision LLMで採点し、途中で崩れないかまで測る |
| v0 Design Systems 2.0 | 取り込み・グラウンディング | 生成ツール側のskill化 | 自社ソースを読み込ませ、検証できないコンポーネント・prop・トークンは使わせない |
| 三菱電機Serendie | 参照インターフェース | リモートMCP + Agent Skills + llms.txt + Figma Plugin | コンポーネント・トークン・アイコン・ガイドラインを、エージェントやFigmaから取得できるようにする |
| SmartHR Design System | 実装ガイドのスキル化 | Agent Skills / プラグイン | smarthr-uiのコンポーネントやUIパターンの使い方を、Claude Code / Cursor向けに提供する |
SerendieとSmartHRは、エージェントがデザインシステムの情報にアクセスするための入口を整える方向です。SerendieはMCPやllms.txt、Figma Pluginまで含めて参照チャネルを広く用意しているのに対し、SmartHRはsmarthr-uiのコンポーネントやUIパターンの使い方をAgent Skillsとして整理しています。
一方で、Astryxはデザインシステムを使わせるだけでなく、「正しく使えたかの計測」まで踏み込んでいます。情報を渡す、生成ツールに取り込ませる、という段階の先にある評価の仕組みを持っている点が特徴です。
またv0のグラウンディングとAstryxの存在しないpropsの減点はハルシネーションという課題に対するアプローチを別角度から行なっていて、対比として面白いです。
「検証できないものは使わせない」と生成側で縛るか、「存在しないpropsを使ったら減点する」と評価側で測るか。同じ課題への手の入れ方が分かれています。
まとめ
今回4つの取り組みを調査し、デザインシステムをAIエージェントに渡すためのアプローチを整理しました。MCP・Agent Skills・評価ハーネスなどの部品が相次いで登場し、エージェントとデザインシステムを組み合わせることが現実的な選択肢になりつつあります。
評価する、取り込む、参照させる、ガイド化する、といった方向性から、自分たちのデザインシステムをAIにどう渡すかを考えるうえで、まず何を解決したいのかからアプローチを選べる状況になってきています。
