デザインシステムの知識を、AIエージェントが使える形に。

Aikoは、Figmaやコード、ドキュメントに分散したデザインシステムの知識を、関係性と根拠を備えた「Canonical Design Graph」に整理します。AIエージェントには作業に必要な設計・実装要件をコントラクトとして提供し、生成された実装がその要件に沿っているかまで検証します。

先行利用に応募する 仕組みを見る

対応するツール・技術

  • React
  • Angular
  • Web Components
  • Figma
  • Penpot
  • Tailwind
  • デザインツール
  • ドキュメント
  • コンポーネントコード
  • デザイントークン

グラフを読み込んでいます。

デザインシステムは、判断の積み重ねです。

デザインシステムは、単なるコンポーネントの集まりではありません。

操作方法やアクセシビリティ、コンポーネントの振る舞い、実装方法など、デザイナーやエンジニア、アクセシビリティの専門家が長年にわたって積み重ねてきた判断が含まれています。

その知識は、Figmaのデザイン、コンポーネントのコード、Storybookのストーリー、デザイントークン、ドキュメント、そして日々の設計に関する議論の中にあります。

チームのメンバーは、それぞれの情報がどうつながっているかを、経験から理解できます。

一方、AIエージェントは、参照したファイルだけでは設計判断の背景まで把握できるとは限りません。

必要なのは、ドキュメントをさらに増やすことではありません。すでに蓄積されている知識とその背景を、意味を損なわずにAIエージェントが利用できるようにすることです。

コンポーネントコード Button.tsx 
export function Button({
  intent = "primary",
  disabled,
  ...props
}) {
  return <button data-intent={intent} />
}
アクセシビリティ Accessibility.md

ダイアログを閉じた後は、フォーカスをダイアログを開いた要素に戻す。

デザイントークン tokens.json
space.300
12px
radius.md
6px
motion.ease
cubic
デザインツール Figma Component

Dialog / Modal / Default

Storybook Dialog.stories.tsx
  • Default
  • Nested focus
  • Dismissal blocked
設計上の判断 ADR-014

削除などの重要な操作を確認するダイアログは、外側をクリックしても閉じない。

プルリクエスト #4821

ReactとAngularで、Escapeキーによるダイアログの動作を統一する。

散らばった知識を、つながりのある構造へ。

デザインシステムを構成する情報は、もともと互いに関係しています。

コンポーネントには状態や振る舞いがあり、それぞれにアクセシビリティ要件やインタラクションのルールが関わっています。デザイントークンは、見た目や実装の一貫性を支えています。

しかし、こうした関係性は、さまざまなツールやファイル形式の中に分散しています。

Aikoは、それらの情報を「Canonical Design Graph」という一つの構造にまとめます。情報同士の関係だけでなく、その根拠となる元の資料もひも付けます。

これにより、人もAIエージェントも、個々のファイルから意味を推測するのではなく、同じ関係性を参照できるようになります。

既存の情報源を置き換えるのではなく、それらを意味のある形でつなぎます。

コンテキストを読み込んでいます。

必要な情報だけを、必要なときに。

AIエージェントに、デザインシステム全体を読み込ませる必要はありません。必要なのは、今取り組んでいる作業に関係する情報だけです。

たとえば、ダイアログを実装する場合。Aikoは、関連する動作や状態、アクセシビリティ要件、参照資料などをグラフから抽出します。

そして、実装時に守るべき要件を「コントラクト」としてまとめ、AIエージェントに提供します。エージェントは必要な情報を自分で探し回る代わりに、明確な要件を参照しながら実装を進められます。

グラフ全体は保持したまま、エージェントに渡すコンテキストだけを絞り込みます。

余分な情報を減らし、必要な要件を明確に。

コンテキストを読み込んでいます。

コンテキストバンドル dialog.contract
コンポーネント
Dialog
抽出した情報
6ノード / 11の関係
動作要件
  • フォーカスの復元
  • オーバーレイの閉じ方
  • Escapeキーの操作
状態
  • 開いた状態
  • モーダル
リソース
  • タイポグラフィ
  • モーション
  • 余白
根拠
  • アクセシビリティ
  • インタラクション仕様
  • コンポーネントAPI

普段使っているAIエージェントへ

生成したUIは、要件に照らして検証する。

AIでUIを生成できても、それがデザインシステムの意図に沿っているとは限りません。重要なのは、生成された実装が、チームの定めた要件を満たしているかどうかです。

Aikoは、AIエージェントに渡したコントラクトと生成された実装を照合します。さらに、コントラクトの根拠となったデザイン、コード、ドキュメントを参照し、どの要件を満たし、どこに不一致があるのかを示します。

別のAIに「問題なさそう」と判断させるのではありません。明確な基準と根拠に基づいた検証です。

実装に不一致があれば、どこが要件と異なるのか、期待される動作がどの資料に定義されているのかを確認できます。

検証結果

87% コントラクトの適合率
124
適合
13
不一致
5
未検証

コントラクトで定義された 動作

ダイアログを閉じると、フォーカスが元の操作要素に戻る。

不一致

実際の 実装

フォーカスがドキュメントのbody要素に移っている。

根拠 複数の情報源に基づく
Figmaコンポーネント

Dialog / v12

バリアント

Modal / Default

モーダル
閉じる操作の許可
サイズ
大
インタラクション仕様

Focus restoration

onDismiss() { restoreFocus(trigger) }
コンポーネントコード

Dialog.tsx

return (<DialogContent>...</DialogContent>)
アクセシビリティ

WCAG 2.4.3 · 2.4.7 · APG Dialog

  • フォーカスの移動順序
  • フォーカスの視認性
  • フォーカスを内部に保持
  • フォーカスを元に戻す
デザイントークン

motion.ease.out / 160ms

radius.modal = 12px

コントラクトで要件を明確に。検証で、その遵守を確認。

何が違うのか。その根拠まで、たどれるように。

一つのグラフを、さまざまな環境で。

フレームワークは変わります。

デザインツールも進化します。

AIの開発環境も変わり続けます。

しかし、技術が変わるたびにデザインシステムを作り直す必要はありません。

Aikoは、設計上の判断やルールをグラフで管理し、それぞれの環境に必要な形で情報を提供します。ReactやAngularなどのフレームワークから、Figma、Penpot、Storybook、ドキュメント、デザイントークンまで。異なるツールや技術を使っていても、共通の設計情報を参照できます。

同じ設計情報を、それぞれの環境に合った形で。

Canonical Design Graph
  • React
  • Angular
  • Web Components
  • SwiftUI
  • Figma
  • Penpot
  • Storybook
  • Zeroheight
  • Confluence
  • DTCG
  • CSS

デザインシステムの知識は、すでにある。

次は、AIエージェントが使える形に。

先行利用に応募する