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

MCPとデザインシステムに立脚したデザインと実装の融合 @yukukotani 2025/09/04 - Offers.DeepDive / MCPで変わる爆速UI/UX実装

自己紹介 Yuku Kotani CTO @ Ubie, Inc. @yukukotani @yukukotani

https://zenn.dev/ubie_dev/articles/f927aaff02d618

その後どうなった？

その後プロダクト開発全体の生産性は期待していたほど上がらなかった・何を作るかがなかなか決まらない・作ってみたはいいが、あまり価値のないものだった・認知負荷に耐えきれず、結局直列に進んでしまう・人と人の認識合わせや仕事の受け渡しがボトルネックに → より各プロセスを密に融合させたい！この辺りだけが速くなった

そもそもFigma MCPやUbie UI MCPが何を意味するか FigmaとUI実装の変換容易性がグッと上がった → デザインと実装の距離が接近したことを意味するそのとき... 問1: UI実装の鏡であるところのFigmaの価値とは？
問2: デザイナーとエンジニアの役割とは？協業とは？

問1 UI実装の鏡であるところの Figmaの価値とは？

UI実装の鏡であるところのFigmaの価値とは？ Figma Make的に自然言語でデザインができる。 Claude Code的に自然言語でUI実装ができる。そのとき敢えてFigmaを介する嬉しさは・・・デザイナーがインタラクティブにデザインできるチームで共有して見れる、触れるこれらをクリアすれば「自然言語でUI実装しながらデザイン」できるのではないか

プレビュー環境の整備 PRごとにアプリケーション全体とStorybookをデプロイ。 Devin等で開発して検証するまでクラウドで完結。できるように → デザイナー、PdMも実装に参加

Figma/Ubie UI MCPをリモートMCPサーバにローカル前提のFigma公式MCPではなく、 3rd-partyのGLips/Figma-Context-MCPをカスタムしてホスト。アクセストークン等を扱わずに平易に利用可能 → ローカルでもデザイナーがClaude Codeをブン回すように

Figma/Ubie UI MCPをリモートMCPサーバに Cloud Runに載せてGoogle CloudのIAM認証をかけている https://github.com/yukukotani/mcp-gcloud-adc-proxy

デザインシステムの定性面を強化トークンやコンポーネントだけでなく、定性的な原則・哲学の言語化も加速 AIへのガイドラインとして、していく ”ユビーらしさ”を暗黙知から形式知に https://vitals.ubie.life/principles/

デザインシステムの定性化 https://vitals.ubie.life/ux-writing/

Figmaは複雑UIのコンテキストとしてとはいえデザインシステムで表現できる領域が少ない複雑UIは、いまのところ自然言語でパキっと出すのは難しいその場合に、脳内のイメージを視覚的にAIのコンテキストに渡す手段として使うそのため、 → 代わりに実装を正としてStorybookを見ていく Figmaをマスタとして運用することはやめた

問2 デザイナーとエンジニアの役割とは？協業とは？

デザイナーとエンジニアの役割役割はシフトデザイナー：デザインをして成果物（Figma等）を出すエンジニア：実装をして成果物（コード）を出すデザイナー：成果物が良いデザインであることを担保するエンジニア：成果物が良い実装であることを担保する ”作業”から”担保”へいままでこれから

デザイナーとエンジニアの役割つまり作業者はもはや誰でもよく、できればAIがよい成果物の質を協働で担保するために最適な開発プロセスが必要

開発における2種類のAIエージェント各チーム専属AIエージェント AIパートナー全社横断の開発AIエージェント Uvin

実装までしちゃうPBI起票まずチームのコンテキストを持つAgentと会話しながらPBI作成 PBIが作成されたら、自動的にAgentがプロトタイプ実装してくれる（投機的実装） Designer, QAなどが協働して仕様の妥当性を担保。 Figmaは書いたり書かなかったり Figma, Ubie UI
MCPを駆使して Uvinが仕様に即した画面を実装

実装までしちゃうPBI起票 Jiraのチケットだけをもとに投機的にPRを作らせることで認知負荷に制約されずにスケール

プロトタイプ前提のスプリントプランニング Agentのプロトタイプ実装を前提として見積もり・プランニングをするここでデザイン/実装の両面で手を加えるポイントを洗い出す（質の担保）

プロトタイプを活かしたデリバリーなるべくプロトタイプを最大限に活かし、そのまま出せる水準の場合は出しちゃう

プロトタイプを活かしたデリバリープロトタイプが使い物にならない場合は、まだAI単独では”作業”できないということ人間のデザイナー/エンジニアにフォールバックして進める

デザインシステムがAI自律駆動のレバーデザインの良し悪しは”仕様”で表しにくく、右側に落ちてしまう主要因 “Ubieらしさ”をうまく伝えることで左側を増やしていく徐々に左側を増やしていく

まとめデザイナーとエンジニアの分担は融けていくそのデザインの民主化を支えるべく、デザインシステムも質的に変化するそのアセットに立脚して開発プロセス全体もリデザインされていく

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

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

Yuku Kotani

More Decks by Yuku Kotani

Other Decks in Programming

Featured

Transcript