Vueでも! デザインシステムをMCPサーバー化してみた - GMO MAKESHOP engineer blog

こんにちは。コアグループ 第1開発チーム エンジニアの原田です。 業務で利用しているデザインシステム向けに、最近注目されているMCP (Model Context Protocol) サーバーを開発しました。この記事では、その実装方法、得られた効果、そして開発を通じて見えてきた課題などを詳しくご紹介します。 はじめに そもそもMCPとは なぜデザインシステム用のMCPサーバーを作るのか？ 実装結果の紹介 コンポーネントの確認 デザイン画像からのページ生成支援 入力 出力比較 開発概要 作り方: デザインシステムMCPサーバーの実装ステップ 前提： 開発環境とデザインシステムの現状 開発環境 デザインシステム 実装方針： 提供する情報の決定 1. コンポーネント情報のJSONデータ準備 vue-component-meta から取得できる情報の例 MCPサーバー用に整形した最終的なコンポーネ