CONFIDENTIAL デザインシステムMCPは ”配って終わり”じゃなかった。 IGNITE YOUR HEART IGNITE YOUR HEART AIで変わる設計と判断 デザイン フロントエンド、複数社が語る失敗と工夫 現場の課題を"仕組み"に変える、albersの次の一手 Hiroshi Muto PRIVATE and CONFIDENTIAL © SUPER STUDIO Inc, All Rights Reserved. 1 

CONFIDENTIAL 自己紹介 武藤 広 - カスタマーエクスペリエンス室 / フロントユニット - ecforce check / ecforce ma / ecforce AIdp の開発エンジニア - 自社デザインシステムのalbersの運用開発 PRIVATE and CONFIDENTIAL © SUPER STUDIO Inc, All Rights Reserved. IGNITE YOUR HEART IGNITE YOUR HEART 役割 2 

CONFIDENTIAL はじめに フロント実装はAIに移行していく アクション デザイン、エンジニアリングを 民主化して、誰もが デザイン、フロントエンドの 属人化と人員不足🥲 ミッション デザインシステム MCPの構築 アイデアを形にできる未来✨ albersのルールやコンテキ ストは複雑。利用者に優しく 唯一無二の体験価値を 品質高く、どこよりも早く ない🥲 市場に届ける✨ PRIVATE and CONFIDENTIAL © SUPER STUDIO Inc, All Rights Reserved. IGNITE YOUR HEART IGNITE YOUR HEART 目の前の課題 3 

CONFIDENTIAL 現場での使われ方 AIが、実装フローの起点になる Notionに紐づいたFigmaURLからデザ インデータを取得しalbers MCPと連携 してフロント実装を自動化 IGNITE YOUR HEART IGNITE YOUR HEART 実装の自動化 Figma MCP チケット AIエージェント デザインシステムMCP PRIVATE and CONFIDENTIAL © SUPER STUDIO Inc, All Rights Reserved. 4 

CONFIDENTIAL 現場での使われ方 AIが、実装フローの起点になる デザインシステムに準拠しないコンポーネ ントを、 albersのコンポーネントに一括置換 AIエージェント PRIVATE and CONFIDENTIAL IGNITE YOUR HEART IGNITE YOUR HEART リファクタリングの一括置換 デザインシステムMCP © SUPER STUDIO Inc, All Rights Reserved. 5 

CONFIDENTIAL 運用中の課題 MCPがあれば、100点のコードが生成されるわけではない MCP側のカラートークンとFigma MCP 側のカラーの指定方法が異なる 既定バリアントの誤認 AIはprimaryが主要カラーと判断 デザインシステムはbasicを利用 PRIVATE and CONFIDENTIAL デザインが崩れる classが上書きされデザインが崩れる Figmaで表現しきれていないデザイン仕 様は実装が不安定になる IGNITE YOUR HEART IGNITE YOUR HEART カラートークンのずれ AIがデザインシステムMCPを起動しない Skillsやagentを正しく設定しないと、 albers MCPを使わずに独自実装を始める © SUPER STUDIO Inc, All Rights Reserved. 6 

CONFIDENTIAL では、 どう解決していたのか？ メンバー個々人の工夫で解決 あるメンバーは・・・ あるメンバーは・・・ reference.mdにFigmaの コンポーネントの詳細な挙 Skillsに起動条件やコン カラーコードに対応するカ 動の仕様をプロンプトに記 ポーネントのルールをまと ラートークンをまとめた✨ 載して修正を繰り返した✨ めた✨ PRIVATE and CONFIDENTIAL © SUPER STUDIO Inc, All Rights Reserved. IGNITE YOUR HEART IGNITE YOUR HEART あるメンバーは・・・ 7 

CONFIDENTIAL インタビューの結果・・・ ルールを明確にしたチームほど、精度が上がった 課題 アクション 結果 カラートークンのずれ コンポーネントの利用規約 デザインが崩れる コンポーネントの詳細仕様 既定バリアントの誤認 classの上書き禁止 AIがデザインシステムMCPを起動しない albers MCPの起動条件 出力が安定し、 ハルシネーションが激減 IGNITE YOUR HEART IGNITE YOUR HEART skillsやagentsに を明確に記載 PRIVATE and CONFIDENTIAL © SUPER STUDIO Inc, All Rights Reserved. 8 

精度の正体は、 モデルの賢さよりも、 判断とプロセスをどれだけ明確に渡せるか PRIVATE and CONFIDENTIAL IGNITE YOUR HEART IGNITE YOUR HEART CONFIDENTIAL © SUPER STUDIO Inc, All Rights Reserved. 9 

CONFIDENTIAL 何が重要なのか モデルが賢くなっても、埋まらないもの どこに正しい情報があるか。 モデルの中には無い。 照合の手順 作って終わりでなく、 突き合わせて直すプロセス。 IGNITE YOUR HEART IGNITE YOUR HEART 一次情報の所在 判断基準 何を正しいと判断し、何を禁止とするか。 デザインシステムの意志。 PRIVATE and CONFIDENTIAL © SUPER STUDIO Inc, All Rights Reserved. 10 

CONFIDENTIAL 我々の取り組み 個人の工夫から、組織の仕組みへ HARNESS IGNITE YOUR HEART IGNITE YOUR HEART GUARDRAIL ガードレール ハーネス やってはいけないことを、生成前に止める。 正しく動かすための足場。取得・照合・修正を。 賢さに依存させず、 「ハズれない仕組み」。 私たちは、 これを組織で整えていきます。 PRIVATE and CONFIDENTIAL © SUPER STUDIO Inc, All Rights Reserved. 11 

CONFIDENTIAL いま作っているもの ガードレール・ハーネスの整備 コンポーネントの利用基準 Do/Donʼtの整備 IGNITE YOUR HEART IGNITE YOUR HEART design-docsの整備 ex) rules.json / DESIGN.md / design-pattern.json ※イメージ画像になります。 PRIVATE and CONFIDENTIAL © SUPER STUDIO Inc, All Rights Reserved. 12 

CONFIDENTIAL いま作っているもの ガードレール・ハーネスの整備 デザインエンジニアの暗黙知をskillsに 1人の検証を組織のナレッジへ IGNITE YOUR HEART IGNITE YOUR HEART デザインエンジニアの知識配布 ex) skills / agents 機械的判断の検証 albersのコンポーネントが正しく使われているか 禁止ルールが実行されていないか ex) デザインlint / 違反検知の自動化 PRIVATE and CONFIDENTIAL © SUPER STUDIO Inc, All Rights Reserved. 13 

CONFIDENTIAL まとめ コンポーネントを配るだけでは、AIは使いこなせない。 判断とプロセスを渡して、初めて真価を発揮する。 それを個人の工夫ではなく、組織の仕組みとして整える。 PRIVATE and CONFIDENTIAL © SUPER STUDIO Inc, All Rights Reserved. IGNITE YOUR HEART IGNITE YOUR HEART 配るだけでは、機能しない 14 

CONFIDENTIAL IGNITE YOUR HEART AI活用について発信していきます👋 IGNITE YOUR HEART 新しくXのアカウントを開設しました！ プロダクト開発での学びやデザインシステムでの @164̲̲95 PRIVATE and CONFIDENTIAL © SUPER STUDIO Inc, All Rights Reserved. 15