Storybookの情報をMCPサーバー化する

「THE UI EXPERTS - AIとMCPの現在地」の登壇資料です。
日時: 2025/5/12 (月) 18:30-21:30
URL: https://the-ui-expert.peatix.com/view

Transcript

1. Storybookの情報をMCPサーバー化する THE UI EXPERTS - AIとMCPの現在地 iwamatsu @shota8511_tech
2. iwamatsu @shota8511_tech 自己紹介 LayerX 2023/08~ バクラク事業部 カード開発チーム ソフトウェアエンジニア © LayerX Inc. 2
3. バクラク © LayerX Inc. 3
4. 今日話すこと © LayerX Inc. アジェンダ バクラクのデザインシステムについて Storybookの情報をMCPサーバー化した話 4
5. バクラクのUI開発
6. バクラクのUI開発の特徴 © LayerX Inc. バクラクのUI開発 複数プロダクト: 複数のプロダクトを展開しており、UI/UXの一貫性が求められる。 爆速開発: 半年に1個のペースで新規プロダクトが生まれる。 フルスタック: フロントエンド専門ではないエンジニアやPdMが開発することもある。 6
7. UIエキスパートでなくても、バクラクらしいUIを、爆速で開発したい © LayerX Inc. バクラクのUI開発 7
8. バクラクのデザインシステム
9. バクラクのデザインシステム © LayerX Inc. バクラクのデザインシステム ガイドライン デザイントークン (色・タイポグラフィ・余白 etc) アイコン UIコンポーネント UIパターン 9
10. Storybookの活用 © LayerX Inc. バクラクのデザインシステム 社内のメンバーが参照しやすいようにStorybookで管理している。 10
11. UI開発におけるAI活用
12. 昨今の開発 © LayerX Inc. UI開発におけるAI活用 AIによる開発が当たり前になっている。 Cursor, Cline, Roo Code など。 MCPの登場によりAIが外部リソースを利用できるようになった。 AIがFigmaのデザインデータを参照するなど。 12
13. 指定したデザイン通りにAIが実装してくれる！ © LayerX Inc. UI開発におけるAI活用 13
14. ...がUIコンポーネントやデザイントークンを使ってくれない © LayerX Inc. UI開発におけるAI活用 14
15. そんな時... © LayerX Inc. UI開発におけるAI活用 15
16. これだ！！！ https://zenn.dev/ubie_dev/articles/f927aaff02d618 © LayerX Inc. UI開発におけるAI活用 16
17. デザインシステムMCPとは © LayerX Inc. UI開発におけるAI活用 デザインシステムの情報をMCPサーバーから提供する。 利用可能なコンポーネントの一覧 指定したコンポーネントの詳細情報 必要な情報のみ取ってこれるので、AIがノイズに惑わされにくい。 コンポーネントにまつわる情報は量が多い (Props定義・ドキュメント・内部実装など)。 Rulesやプロンプトで全ての情報を渡そうとすると、AIがノイズの影響を受けやすい。 MCP化することで、AIが概要→詳細とドリルダウンしながら必要十分な情報を参照できる。 17
18. MCP活用例
19. プロンプト © LayerX Inc. MCP活用例 CursorなどにFigmaのURLを渡して実装を依頼する。 19
20. 処理の流れ MCP活用例 Figmaからデザインを取ってくる。 UIコンポーネント一覧を取ってくる。 デザイントークン一覧を取ってくる。 UIコンポーネントの使い方を調べる。 実装する。 © LayerX Inc. 20
21. 成果物サンプル MCP活用例 若干の齟齬はあるが、それなりに精度 高くUIを再現してくれる。 極力デザインシステムのUIコンポーネ ントやデザイントークンを使って実装 してくれる。 © LayerX Inc. 21
22. MCPの内部実装
23. バクラクのアプローチ 方針 理由 © LayerX Inc. MCPの内部実装 Storybookの情報をデータソースにする。 Storybookにドキュメントや用例集を集約しているので、その資産を活用したい。 コンポーネントが複数ファイルに跨っており、ソースコードを全部返すのは厳しい。 23
24. コンポーネント情報を返すTools © LayerX Inc. MCPの内部実装 コンポーネント一覧 AIに 「何があるか」 を伝える。 最低限の情報のみ返す (コンポーネント名・ファイルパスなど)。 コンポーネント詳細情報 AIに 「どう使うか」 を伝える。 コンポーネントの使い方を理解するために必要十分な情報を返す (Props定義・利用例など)。 24
25. コンポーネント一覧 © LayerX Inc. MCPの内部実装 StorybookのStory一覧を以下のように整形して返す。 Story一覧は index.json から取得している。 25
26. コンポーネント詳細情報 ↓ Storybookで表示しているProps定義 © LayerX Inc. MCPの内部実装 react-docgen-typescript でコンポーネントのメタデータをパースして返す。 react-docgen-typescript はStorybookで内部的に使われているパッケージ。 ソースコードから型定義やコメントなどを抽出できる。 26
27. 詳細はブログで！ https://zenn.dev/layerx/articles/7e9f87fca65e94 © LayerX Inc. MCPの内部実装 27
28. その他のTools © LayerX Inc. MCPの内部実装 デザイントークン (Tailwind CSS の theme) を返すTool アイコン一覧を返すTool GraphQLのスキーマ情報を返すTool 28
29. 使用感と今後の展望
30. 実際の使用感 © LayerX Inc. 使用感と今後の展望 UIの再現度は肌感70点くらい。 複雑なUIだとコンポーネントの配置などを間違えることが多々ある。 適切なUIコンポーネントが用意されてない箇所は再現度が下がる。 UIコンポーネント及びデザイントークンの使い方は比較的精度高い。 元々人間向けに整備していた情報がAIにとっても役立っている。 ただし時々独自実装してくるときもある。 UI以外の情報 (インタラクションなど) を伝えるのが難しい。 日付フォームだからDatePicker使うとかまではやってくれない。 30
31. 今後の展望 使用感と今後の展望 AIが理解しやすい情報設計 AIに提供する情報をブラッシュアップして精度を向上させる。 デザインシステムのUIコンポーネントを充実させることも必要。 究極的には v0 のようにチャットだけでUI開発が完結できると理想。 AIによるデザインレビュー AIによるデザイン評価アプリも試験的に作っている (右図)。 開発初期段階でデザインを評価できるようにしたい。 © LayerX Inc. 31
32. まとめ © LayerX Inc. まとめ バクラクではデザインシステムの情報をStorybookで管理している。 Storybookの情報をMCP経由でAIが参照できるようにした。 AIがUIコンポーネントやデザイントークンを使って開発してくれるようになった。 32
33. We Are Hiring! © LayerX Inc. 33