社内デザインシステムをMCPサーバー化したらUI実装が爆速になった

はじめに こんにちは、普段 Ubie で症状検索エンジンユビー(https://ubie.app/)の開発をしている江崎です。 最近、Cursor エディタや GitHub Copilot などのコーディングアシスタントツールが進化し続けていますが、社内固有のデザインシステムとの連携はまだまだ課題が残っていました。そこで社内エンジニアである sosuke とともに、Ubie Vitals というデザインシステムを MCP サーバー化することで、UI 開発の速度と精度が劇的に向上した体験を共有します。 目次 デザインシステムと開発の現状課題 MCP サーバーの登場 Ubie UI MCP の構築 デモ テキストだけで UI 実装が可能に デザイナーの壁打ち相手としての可能性 今後の展望 デザインシステムと開発の現状課題 Ubie では「Ubie Vitals」というデザインシステムに則って

[tokuniimihanai]

MCPサーバーの実装を全く書いておらず何故うまく行ったのかもよくわからないのでモヤモヤする。まあ事例報告レベルの話か

[repon]

figmaのAPIを叩いていないのなら、要は「絵」で行けるから、すべてのデザインに有効かも。「絵」に修正加えたら、一から読ませればいいし。人間には地獄でも、AIは淡々とやるから/ `<div>`だらけってことは無いよね？

[oinume]

デザインシステムがMCPサーバーを用意してくれるとこういうことができるのか。具体的にどういうデータを返してるんだろう

[syu-m-5151]

とても良い活用方法だわね⋯

[shingo-sasaki-0529]

どういうツール定義してどんなデータ返してるのかが知りたい。あとどこでサーバー動かしてるのか。

[phare]

"MCP サーバー化によって、デザインシステムの資産価値が飛躍的に高まった感覚があります。今後もデザインシステムと AI の融合による開発効率化を推進"

[giass]

mcp

[misshiki]

“Ubie Vitals というデザインシステムを MCP サーバー化することで、UI 開発の速度と精度が劇的に向上した体験を共有”

[stealthinu]

最近MCP使ってデザイン系のこと生成させるのよく出てるが、Excelとかオフィス系のことをうまくやれるようになったらもっとインパクトあるのになあ…

[ST0RM]

ユビーだからGoogle cloudでの実装だろうぁ。Azure使うより筋が良い

[hirorinya]

来週言う

[zou_crypto]

実装の具体的な方法をおちえて。。

[michael-unltd]

“「Ubie UI MCP」は、 Ubie UI のコンポーネント情報 デザイントークン（文字サイズ、色など） アイコン情報 などを AI に提供します。MCP サーバー化したことで精度が飛躍的に向上し、UI 実装が驚くほど効率化されました。”

[udddbbbu]

いいなー いまいちMCPサーバの構築方法がよくわからんのよねー

[prjpn]

Figmaからのコーティングは色々ある。要するにdivだらけになるかどうかなの。そこだけ。

[himanahitodesukun]

コメントみるとみんな何やってるのかよくわかってなさそうw

[takezaki]

色々と応用できそうな話だな

[strawberryhunter]

よくわからん。デザインシステムがあればFigmaの絵を用意する必要が無いんじゃないのか？それは本当にデザインシステムか？

[manimoto]

デザイナーがコンポーネントを更新するとフロントエンドエンジニアが記述したロジックをまっさらにするなど起きそう。そこから類推するとReact等で起こった見た目とロジックの融合が逆回転する可能性ありそう

[yoiIT]

FigmaとcursorとかGitHub copilotの連携だけで近しいことがMCP無しでもできると思うんだけど、どのくらい精度とスピードが上がるかは試したいな。

[FreeCatWork]

すごい！爆速にゃ！みんなハッピーにゃ！ ボク、おやつたくさんもらえるかなにゃ？

[mk173]

「こんな感じでよろしく」が実現するのか

[mr_mayama]

デザインシステムの精度を上げるのに便利そう。

[Phenomenon]

ごいすー

[kfly8]

良さそう。

[kvx]

こうなるよね

[hiroomi]

ふと見て、M365の管理コンソール内のアイテムでMCPしてもらってもよさそうね。

[crimson_diamond]

ChatGPTプラグインに費やしてきた時間が笑

[satosssi]

これはすごい