デザインシステムの MCP サーバーの 精度を高めるために

2025/05/28 のレバテックラボ主催の資料です。

Transcript

1. デザインシステムの MCP サーバーの 精度を高めるために ~ Figma MCP を添えて ~ Kota Esaki
2. Kota Esaki - Ubie 株式会社 - 症状検索エンジンユビーのプロダクトエンジニア - デザインが得意なわけではない 自己紹介
3. Ubie Vitals - Ubie のデザインシステム - 誰でも、効率よく、迷わずに、Ubieらしい表現 - https://vitals.ubie.life/
4. Ubie Vitals の MCP サーバー化 - このデザインシステムを MCP サーバー化したら、UI 実装の工数がかなり削減でき た - https://zenn.dev/ubie_dev/articles/f927aaff02d618 - コンポーネント(Button, Text など) - デザイントークン（文字サイズ、色など） - アイコン
5. どんなことが可能になったか - Text to Ubie UI - テキストベースの指示だけで Ubie UI を使った実装が可能に - Figma to Ubie UI - Figma で描かれた UI デザインを Figma MCP を介して取得
6. どんなことが可能になったか - Text to Ubie UI - テキストベースの指示だけで Ubie UI を使った実装が可能に - Figma to Ubie UI ← この話をメインで話す - Figma で描かれた UI デザインを Figma MCP を介して取得
7. 精度どうなった？ かなり再現性が高くアウトプットが可能に 1. Figma MCP から Figma の情報を取得 2. 次に Ubie UI MCP が呼び出され、コンポーネント情報やトー クン、アイコン情報を取得 3. Figma の情報をもとに、Ubie UI を使って実装を提案
8. 本当にこんな精度高いの？
9. できない時がある Figma 実装したコンポーネント
10. できない時がある Figma 実装したコンポーネント 横並びになっているし、 radio コンポー ネントになっていない ...
11. 何が原 因？
12. 精度を高めるために何が重要？ Figma を Ubie Vitals のコンポーネントの構造、命名に合わせる
13. Figma MCP はどんな情報を AI に提供しているのか FigmaのLayers
14. Figma MCP はどんな情報を AI に提供しているのか
15. Figma MCP はどんな情報を AI に提供しているのか yml で300行くらいの情報 で返ってくる
16. Figma MCP はどんな情報を AI に提供しているのか
17. Figma MCP はどんな情報を AI に提供しているのか Figma Figma MCPから返ってくる情報
18. Figma MCP はどんな情報を AI に提供しているのか Figma Figma MCPから返ってくる情報 テキストのStyle
19. Figma を Ubie Vitals のコンポーネントの構造、命名に合わせることが 重要 ✅良い例 Ubie Vitals のコンポーネントと 構造、命名があっている 横並びは Flex 縦並びは Stack
20. Figma を Ubie Vitals のコンポーネントの構造、命名に合わせることが 重要 Figma 実際に実装されたコンポーネント
21. Figma を Ubie Vitals のコンポーネントの構造、命名に合わせることが 重要 Figma 実際に実装されたコンポーネント 想定通りのコンポーネントが使われ、構造も意図 したものになっている
22. Figma を Ubie Vitals のコンポーネントの構造、命名に合わせることが 重要 💩ダメな例 命名からどのコンポーネントか 理解できない 構造から実装がイメージできな い
23. Figma を Ubie Vitals のコンポーネントの構造、命名に合わせることが 重要 同じ階層で返って くるため、Figma のデータからだと 何がなんだかよく わからない
24. Figma を Ubie Vitals のコンポーネントの構造、命名に合わせることが 重要 Figma 実際に実装されたコンポーネント 独自のStyleを あててしまう 新しくコンポーネント 実装しちゃってる
25. 精度を高めるために何が重要？ Figma を Ubie Vitals のコンポーネントの構造、命名に合わせる
26. 「MCP だからできる」ではなくなると思う - Ubie Vitals を MCP 化するのは、今後モデル特性次第で必要なくなる可能性が高 い - というのも、Ubie Vitals で提供するコンテキストは膨大ではなく、静的なデータであ る - 重要なのは、MCPで取得するということではなく、AIが情報を飲み込みやすいよう に整備してあげること
27. まとめ - Figma x デザインシステムで精度を高めるために重要なことは、命名や構造が揃えら れていること - MCP という How が重要ではなく、如何に AI が認識しやすいような情報提供を整備で きるかが最も重要
28. ありがとうございました！