MCPとデザインシステムに立脚したデザインと実装の融合

Offers.DeepDive どこまで簡略化できてる？サイバーエージェント／Ubieに聞く MCPで変わる爆速UI/UX実装
https://offers-jp.connpass.com/event/365001/

Transcript

1. MCPとデザインシステムに立脚した デザインと実装の融合 @yukukotani 2025/09/04 - Offers.DeepDive / MCPで変わる爆速UI/UX実装
2. 自己紹介 Yuku Kotani CTO @ Ubie, Inc. @yukukotani @yukukotani
3. https://zenn.dev/ubie_dev/articles/f927aaff02d618
5. その後どうなった？
6. その後 プロダクト開発全体の生産性は期待していたほど上がらなかった ・何を作るかがなかなか決まらない ・作ってみたはいいが、あまり価値のないものだった ・認知負荷に耐えきれず、結局直列に進んでしまう ・人と人の認識合わせや仕事の受け渡しがボトルネックに → より各プロセスを密に融合させたい！ この辺りだけが速くなった
7. そもそもFigma MCPやUbie UI MCPが何を意味するか FigmaとUI実装の変換容易性がグッと上がった → デザインと実装の距離が接近したことを意味する そのとき... 問1: UI実装の鏡であるところのFigmaの価値とは？ 問2: デザイナーとエンジニアの役割とは？協業とは？
8. 問1 UI実装の鏡であるところの Figmaの価値とは？
9. UI実装の鏡であるところのFigmaの価値とは？ Figma Make的に自然言語でデザインができる。 Claude Code的に自然言語でUI実装ができる。 そのとき敢えてFigmaを介する嬉しさは・・・ デザイナーがインタラクティブにデザインできる チームで共有して見れる、触れる これらをクリアすれば「自然言語でUI実装しながらデザイン」できるのではないか
10. プレビュー環境の整備 PRごとにアプリケーション全体とStorybookをデプロイ。 Devin等で開発して検証するまでクラウドで完結。 できるように → デザイナー、PdMも実装に参加
11. Figma/Ubie UI MCPをリモートMCPサーバに ローカル前提のFigma公式MCPではなく、 3rd-partyのGLips/Figma-Context-MCPをカスタムしてホスト。 アクセストークン等を扱わずに平易に利用可能 → ローカルでもデザイナーがClaude Codeをブン回すように
12. Figma/Ubie UI MCPをリモートMCPサーバに Cloud Runに載せてGoogle CloudのIAM認証をかけている https://github.com/yukukotani/mcp-gcloud-adc-proxy
13. デザインシステムの定性面を強化 トークンやコンポーネントだけでなく、定性的な原則・哲学の言語化も加速 AIへのガイドラインとして、 していく ”ユビーらしさ”を暗黙知から形式知に https://vitals.ubie.life/principles/
14. デザインシステムの定性化 https://vitals.ubie.life/ux-writing/
15. Figmaは複雑UIのコンテキストとして とはいえデザインシステムで表現できる領域が少ない複雑UIは、 いまのところ自然言語でパキっと出すのは難しい その場合に、脳内のイメージを視覚的にAIのコンテキストに渡す手段として使う そのため、 → 代わりに実装を正としてStorybookを見ていく Figmaをマスタとして運用することはやめた
16. 問2 デザイナーとエンジニアの 役割とは？協業とは？
17. デザイナーとエンジニアの役割 役割は シフト デザイナー：デザインをして成果物（Figma等）を出す エンジニア：実装をして成果物（コード）を出す デザイナー：成果物が良いデザインであることを担保する エンジニア：成果物が良い実装であることを担保する ”作業”から”担保”へ いままで これから
18. デザイナーとエンジニアの役割 つまり作業者はもはや誰でもよく、できればAIがよい 成果物の質を協働で担保するために最適な開発プロセスが必要
19. 開発における2種類のAIエージェント 各チーム専属AIエージェント AIパートナー 全社横断の開発AIエージェント Uvin
20. 実装までしちゃうPBI起票 まずチームのコンテキストを持つAgentと会話しながらPBI作成 PBIが作成されたら、自動的にAgentがプロトタイプ実装してくれる（投機的実装） Designer, QAなどが協働して 仕様の妥当性を担保。 Figmaは書いたり書かなかったり Figma, Ubie UI MCPを駆使して Uvinが仕様に即した画面を実装
21. 実装までしちゃうPBI起票 Jiraのチケットだけをもとに投機的にPRを作らせることで 認知負荷に制約されずにスケール
22. プロトタイプ前提のスプリントプランニング Agentのプロトタイプ実装を前提として見積もり・プランニングをする ここでデザイン/実装の両面で手を加えるポイントを洗い出す（質の担保）
23. プロトタイプを活かしたデリバリー なるべくプロトタイプを最大限に活かし、そのまま出せる水準の場合は出しちゃう
24. プロトタイプを活かしたデリバリー プロトタイプが使い物にならない場合は、まだAI単独では”作業”できないということ 人間のデザイナー/エンジニアにフォールバックして進める
25. デザインシステムがAI自律駆動のレバー デザインの良し悪しは”仕様”で表しにくく、右側に落ちてしまう主要因 “Ubieらしさ”をうまく伝えることで左側を増やしていく 徐々に左側を増やしていく
26. まとめ デザイナーとエンジニアの分担は融けていく そのデザインの民主化を支えるべく、デザインシステムも質的に変化する そのアセットに立脚して開発プロセス全体もリデザインされていく