SUPER STUDIOでは、UIコンポーネントやブランド基準、資料テンプレートなどを体系化し、プロダクトや資料づくりの品質とスピードを上げるための共通基盤として「albers」というデザインシステムがあります。私が所属するプロダクトデザインユニットでは、このalbersとAIを連携させるMCPサーバー「albers MCP」を構築し、UI開発の効率化に取り組んでいます。
この仕組みはすでにプロダクト開発のフローに組み込まれており、特にフロントエンド開発において1時間かかる作業が20分に短縮されるなど、生産性の向上に役立っています。
今回は、albers MCPの導入背景や活用方法、導入成果、それらを踏まえて私たちが実現したいと考えている「誰もがアイデアを形にできる未来」についてまとめます。
albers MCPは、デザインシステム「albers」の情報をCursorなどのAIエージェントに安全に橋渡しするMCPサーバーです。
詳細な仕組みは後述しますが、これを活用すれば、Figmaのデザインデータをもとに実装する際、AIエージェントに「このFigmaデザインをalbersを使って実装してください」と指示するだけで、albersに準拠したコードを素早く生成することができます。
下図は、Figma上のデザインデータとalbers MCPを使って実装されたデザインの比較です。デザインデータ通りに精度高くコードが生成されていることが分かります。
デザインデータからコードを生成するまでの流れは以下となります。
Figmaのデザインデータのリンクをコピー
コピーしたリンクをもとに、必要なalbersのパーツをAIエージェントに洗い出してもらう
Figma MCPでデザイン情報を取得し、albers MCPでパーツ情報を取得
それぞれの情報をもとにコード生成を行う
課題はいくつか残されていますが、albers MCPでAIにデザインシステムの情報を付与することで、フロントエンド開発の工数が削減できました。
albers MCPを導入した背景には、SUPER STUDIOが提供する「ecforce」のためのデザインシステムとしてalbersの開発・運用を続けてきた経緯があります。
ecforceはAIコマースプラットフォームとして、「ecforce ma」や「ecforce bi」、「ecforce AI 」など複数のアプリケーションを提供しています。マルチプロダクトで、一貫したブランド体験を効率的に提供し続けるため、私たちはalbersの開発・運用に力を入れてきました。
albersの開発・運用を担う「albersチーム」は、プロダクトデザインユニットに所属するデザイナーとエンジニアで構成されています。albers MCPの構築においては、albersチーム内の4名が携わり、技術検証から実運用までを推進しました。
albersチームでは、デザインシステムの開発・運用を担いながら、次の2点の実現をミッションとして掲げています。
デザイン、エンジニアリングを民主化して、誰もがアイデアを形にできる未来を実現する
唯一無二の体験価値を品質高く、どこよりも早く市場に届ける
一方で、このような未来を実現するには、解決すべき課題も山積みです。
例えば、デザインやフロントエンドの属人化・人員不足といった組織的な課題に加え、albersのルールやコンテキストが複雑で、利用者にとってわかりづらいといった課題もあります。
こうした現状を抜本的に打開していくためにも、AIの活用は不可欠だと考えました。
そこで、プロダクト開発フローにおける各プロセスの業務で、AIに代替できるものはないか検討しました。
検討を重ねていくなかで、デザイナーが作成したUIデザインをフロントエンジニアが引き継いで実装するというプロセスは、AI活用で大幅な生産性向上が見込めるのではないかと判断し、優先的に取り組むことにしました。
しかし、FigmaのデザインデータをAIエージェントに渡してコード生成するだけでは、デザインシステム等のコンテキストが考慮されず、コード品質が低いことが課題でした。
そこで、MCPサーバーとデザインシステムを組み合わせるというアプローチを知り、albers MCP 構築に踏み切りました。
ここからは、albers MCPの仕組みを簡単に紹介します。
albers MCPはデザインシステムであるalbersの情報をAIエージェントに伝えるための橋渡し役です。下図のとおり、Figma MCPがFigmaで作成されたデザイン情報を、albers MCPがalbersをもとにしたUIコンポーネントの情報を、それぞれAIエージェントに提供します。
その後、albers MCPはReact実装ファイル（.tsx）とStorybookの情報を返します。Storybookを含める理由は、利用パターンに応じたprops定義などが充実しているためです。MCPとして単に実装ファイルだけを渡すよりも、利用シーンごとの使い方まで提示することで、コード生成の精度向上が見込めるのではないかという仮説のもとに実装しました。
より詳細な実装方法については、各社からいくつか解説記事が公開されているので、そちらも参照すると理解が深まるかと思います。
現在albers MCPを導入したことで、新規画面やシンプルなUIの実装において高精度なコード生成が実現できています。さらに、コンポーネントのプロパティや使い方の確認もスムーズになり、たとえば「ModalとDialogの違いとユースケースを教えて」といった問いかけも簡単に行うことができます。実際に、これまで1時間かかっていた作業が20分に短縮されるといった成果も出ています。
一方で、課題も明確になりました。既存画面の改修や複雑なUIの実装では精度が下がる傾向にあり、最終的に人手での調整が必要になるケースもあります。この要因はMCPの仕組みだけでなく、Figma上の命名規則やデータ構成が、AIにとって十分に読み取り・解釈しやすい状態に整っていないことにあると考えられます。
今後はツール側の改善に加えて、AIが理解しやすいルール・ガイドラインを整備し、デザインと実装の橋渡しをより強固にすることで、MCP全体の精度を底上げしていきたいと思います。最終的には、複雑なUIでも高い再現性でコード生成でき、デザインと実装間で生じる細かなレイアウト差分を最小限に抑えるような、AIフレンドリーなワークフローの実現を目指しています。
現状は利用シーンが限られているalbers MCPですが、進化の先にはさまざまな可能性があると考えています。
たとえば近い将来、営業担当者が商談中に出た要望をその場でAI×albers MCPに伝えるだけで、ecforceブランドのデザインに沿ったデモ画面を即座に生成し、具体的なイメージを見せながら会話を進められるようになるかもしれません。
また、PMは、将来的に目指す理想のUIをAI×albers MCPで即座にプロトタイプ化し、意思決定の議論を加速させることができるようになります。
さらにUIデザイナーは、Figma上でのUIデザインをAI×albers MCPに任せることで、「唯一無二の顧客体験とは何か」といった高度な判断に集中できるようになっていくでしょう。
このように、AI×albers MCPが進化した先では、職種・職能を問わず、さまざまな視点から生まれたアイデアやイメージを逃すことなく、簡単に具体化することができます。今よりももっと“Creativity”に溢れ、より良いサービスが生まれやすい環境になり、顧客に求められ続けるサービスづくりを強固に支える土台になっていくはずです。
デザイナー視点で見ると、今まで担っていたUIデザインの業務を意図的に手放していく活動とも言えます。これは前向きに楽しむべき変化だと捉えており、新たな価値を発見するディスカバリーや、ドメイン理解を組織の強みにする仕組みづくり、根本的なUIのアップデートなど、より良いサービスを生み出すために自らの役割を広げていくことに繋がります。
SUPER STUDIOの全社月例では、社内の応援したいプロジェクトに投票する「プロジェクト総選挙」を実施しています。そこで今回の取り組みを発表したところ、第一位を獲得することができました。これは全社的な期待の表れだと受け止めています。
現在、デザイン領域でのAI活用は、各社で試行錯誤を重ねているところだと思います。これからもSUPER STUDIOでの取り組みを積極的に公開していき、皆さまと情報交換をしたいと思っているので、興味があればぜひお話しましょう。