デザインシステムを中心とした AI 開発支援と Generative UI の取り組み

デザインシステムを中心とした開発支援と Generative UI への取り組みについてです。
* AI 開発支援
* MCP Server + Skill で誰でも品質の高い UI をスピード感を持って作成可能
* Generative UI
* A2UI, AG-UI を利用した商品開発エージェントの作成
* デザインシステムをカスタムカタログに追加し、Generative UI にもブランド価値を込める

Transcript

1. デザインシステムを中心とした AI 開発支援と Generative UI の取り組み ©giftee Inc. all rights reserved 2026/02/28 React Tokyo egurinko
2. 江口 徹 (@egurinko) • 株式会社ギフティ EM ◦ デザインシステム ◦ AI 事業活用推進 • React の未来を見せてくれる Next.js が好き 自己紹介
3. ギフティの目指すこと e ギフトを軸として、人、企業、街の間に、 さまざまな縁を育むサービスを提供する キモチの循環を促進することで、 よりよい関係でつながった社会をつくる Vision Mission
4. e ギフトの流通 DP eギフト プラットフォーム 個人 法人 自治体 e ギフトの発行 CP 飲食 小売 体験 流通 eGift API 発券•消込 eGift System 利用者が増えるとe ギフトも増加 eギフトが増えると利用者が増加 ギフティの事業の核であり、e ギフトの発行から流通まで一気通貫で提供しています。 e ギフトプラットフォーム DP = Distribution Partner eギフト流通パートナー CP = Content Partner eギフト発行企業
5. デザインシステムを中心とした AI の取り組みを 2 つ紹介します
6. デザインシステム: Abukuma
7. デザインシステムを軸とした AI の取り組み AI 開発支援 Generative UI
8. { “definition”: “”, “storybooks”: “”, “guidelines”: { “name”:”Button”, “purpose”:”アクションするコンポーネント。”, “props”: {}, “rules”: [], “antiPatterns”: [], “accessibility”: [] } } • list_react_components • get_react_component • validate_react_usage guideline と validation で より正確なコード生成 AI 開発支援: MCP サーバ
9. ブランド価値を守ったUI 構築を 誰もが素早く正確に行える • UI 構築時の MCP 利用推奨 • Search => Validate のフロー強制 AI 開発支援: Skill
10. デザインシステムを軸とした AI の取り組み AI 開発支援 Generative UI
11. ギフティには 2,000 種類以上のギフトがある 皆が知っている便利なギフトは見つけやすい しかし、相手があっと驚くようなギフトを見つけにくい
12. ギフティには 2,000 種類以上のギフトがある 皆が知っている便利なギフトは見つけやすい しかし、相手があっと驚くようなギフトを見つけにくい ギフト提案の AI エージェント
13. ヒアリング 提案 ギフト提案フロー
15. 完全な自由テキストは ユーザには難しい
16. もう少し動的だけど、制限のある UI が良い 予算 3,000 円 取引先のお歳暮 赤ちゃんが 生まれた ？ ？ ヒアリングには無限のパターンがある
17. よーし、Generative UI だ
18. Generative UI の技術コンポーネント • A2UI ◦ Agent が UI を生成するための UI プロトコル ◦ やり取りするデータフォーマットのようなもの • AG-UI ◦ Agent とフロントを繋ぐ通信プロトコル • (MCP Apps) ◦ Agent が生成するミニアプリを iframe で埋め込む
19. Agent [ { "id":"root", "component":"Column", "children":["text1","card1"] }, { "id":"text1", "component":"Text", "text":"ご予算は？", "variant":"headline" }, {"id":"card1","component":"Card", "children":["btn1","btn2"]}, … ] React データ生成 パース
20. • A2UI にカスタムカタログを定義できる • そこにデザインシステムを定義 生成される UI はデザインシステムに統一したい
21. • A2UI にカスタムカタログを定義できる • そこにデザインシステムを定義 生成される UI はデザインシステムに統一したい Generative UI もデザインシステムで作れる
22. 結論 デザインシステムがあれば、 • 足元の開発も品質高くスピードアップできる • Generative UI の品質も高くすることができる
23. 新しい文化をつくっていく仲間たちを募集しています。 WE ARE HIRING giftee 採用ページ