デザインシステムと生成AIの相性について考える

2025/05/12 THE UI EXPERTS

Transcript

1. デザインシステムと⽣成AI の相性について考える THE UI EXPERTS 2025/05/12
2. ⾃⼰紹介 • Sosuke Suzuki • https://x.com/__sosukesuzuki • ユビー株式会社 ソフトウェアエンジニア ◦ アプリケーション基盤チームで、社内で広く使われるバックエン ドサービスの開発‧メンテナンスや、プロダクト開発エンジニア の開発⽣産性を向上させる⽅法について考えている
3. ユビーのデザインシステム Ubie Vitals ユビーはUbie Vitalsというデザインシステムを開発している デザイントークン、Reactコンポーネント、アイコン集などが含まれている Ubie Vitalsは @ubie/ubie-ui というnpmパッケージとして配布されてている OSSだから誰でも使える https://github.com/ubie-oss/ubie-ui プロダクト開発エンジニアはUbie Vitalsをライブラリとして使ってReactアプリ ケーションを開発している
4. デザインシステムを使った開発フローの課題 ユビーのプロダクト開発エンジニアの多くはCursorを使って開発をしている Cursor（というかその裏側にいるモデル）は Ubie Vitalsのことを知らない Cursorにただ命令するだけではUbie Vitalsを使ったコードを書いてくれない Ubie Vitalsを適切に使ったUIを構築するには、⼿直しや書き直しが必要になる 新しい機能の施策を打ちまくるチームだと、UI実装が開発のボトルネックに
5. Ubie Vitals MCP サーバー その課題を解決するために、デザインシステムの情報を提供するMCPサーバーを 開発して社内に公開した Reactコンポーネントのソースコード（TypeScript）をテキストとして返すだ けのシンプルな実装だが、意外と上⼿く機能する ユビー社内にインターナルに配布し、エンジニアは npx 経由でローカルで実⾏す る これで、CursorはUbie Vitalsのことを知ることができる
6. Zennがバズった
7. 従来のやり⽅ テキスト エディタ エンジニア Figma React コンポーネント エンジニアがFigmaを⽬で⾒て、Ubie Vitalsのドキュメントを参照しながらReact コンポーネントにする Ubie Vitals のドキュメント
8. Figma × Ubie Vitals × Cursor のやり⽅ Cursor Figma MCP Server Ubie Vitals MCP Server Ubie Vitals Figma Reactコンポーネント デザインデータをFigmaからMCPサーバー経由で取得。そのデザインを実装する ための情報をUbie Vitals MCP Serverから取得。それを使ってCursorがReactコン ポーネントを書く
9. エンジニアの声
10. UI実装と⽣成AIの相性 実は、MCPが流⾏る前から「デザインシステムと⽣成AIは相性が良いのでは？」 という仮説があった。 ⽣成AIにHTMLとCSSを使ったUIを実装させると、今のところまだ結構めんどい 変なマークアップをされてしまったとき、思っていたのと微妙に⾒た⽬が 違ったとき、やりたいことが変わったとき、など修正やデバッグが必要なと きに、かなりめんどい ブランディングやアクセシビリティなどの品質が、場合によっては⼤きく損 なわれる
11. デザインシステム × ⽣成AIの嬉しいポイント 1 ⽣成AIが扱う解空間を狭くできる HTMLとCSSはできることが多すぎる。⾃分たちの⽬的に合うように道具の表現⼒ を弱くする。より期待に近い出⼒がされやすくなるし修正が楽になる。 https://speakerdeck.com/yukukotani/ai-coding-agent-enablement
12. デザインシステム × ⽣成AIの嬉しいポイント 2 品質の境界をシフトレフトできる ブランディング、アクセシビリティ、などなどの品質をデザインシステムの段階 で品質を確保できる。⽣成AIが⽣成したUIがつねに「ユビーっぽく、誰にとって も使いやすいもの」になる。 雑に⾼速に⽣成させたものが⾼品質だと当然嬉しい。
13. まとめ ⽣成AIにデザインシステムを使ったコードを⽣成させることは、解空間を狭く し、品質の境界をシフトレフトすることにつながる MCPサーバーを構築することは、現時点においてはその⼿段として有⽤である 逆に⾔うと、今後はMCPサーバー以外のデータソースが有⽤になってくるか もしれないのでそこはキャッチアップが必要 ユビーでは実際にデザインシステムの情報を提供するMCPサーバーを構築するこ とによってUIの実装を加速させている