Serendie MCPサーバーは、Serendie Design SystemをAIエージェントから効率的に活用するためのModel Context Protocolサーバーです。

このMCPサーバーを、各種AIエージェントに接続することで、Serendie Design Systemが提供するガイドラインやベストプラクティス、コンポーネントやアイコンをはじめとするリソース一覧などをAIが自律的に入手できるようになります。これにより、Serendie Design Systemに則ったアプリケーション開発ワークフローを実現できます。

Serendie MCP サーバーは、リモートMCPサーバーとして公開しており、下記のエンドポイントを設定するだけで使い始めることができます。

https://serendie.design/mcp

なお、お使いのAIエージェントがAgent Skillsに対応している場合は、合わせて導入することを推奨します。 MCPサーバーが提供するツールをAIエージェントが効果的に活用できます。

MCPサーバーでは「ツール」という単位で、AIエージェントに道具の提供を行います。どのツールを使うのかは、AIエージェントが、プロンプトやコンテキストに基づいて決定します。現在Serendie MCPサーバーが提供しているツールは以下の通りです。

• Serendie UIコンポーネントの一覧とプロパティなどの詳細取得ツール
• デザイントークンの一覧・詳細取得ツール
• Serendie Symbolsの一覧・詳細取得ツール
• 本サイトで提供している各種ガイドラインの取得ツール

各種ツールの実装は、GitHubリポジトリ (serendie/serendie-web) にて確認できます。

自然言語によるプロトタイピング

Claude CodeやFigma Makeなど、各種AIエージェントを用いることで自然言語によるプロトタイピングが可能ですが、ここにSerendie MCPサーバーを用いることで、Serendie UIを用いた実装がスピーディーに実現できます。

MCPサーバーを通してガイドラインなどを参照しつつ、Serendie UIの基礎知識やベストプラクティスをAIエージェントが入手できるため、自律的で質の高いプロトタイピングの実現に繋がります。

デザインから実装する

Serendie UIは、Figmaコンポーネント（デザイン）とReactコンポーネント（実装） がセットで提供され、Figma Code Connectによる対応付けがされています。これにより、Serendie MCPサーバーとFigma MCP サーバーを併用することで、Serendie UI Kitで作られたデザインを、高速かつ高品質に実装することが可能です。

Figma MCPサーバーを用いることで、AIエージェントは、デザインデータの読み取りが可能になります。MCPサーバーを設定のうえ、「現在選択しているFigma上のデザインを、Serendie UIで実装して」 のようにお使いのAIエージェントに伝えることで、Serendie UIのセットアップ、各種コンポーネントの使い方などの知識を自律的に得ながら、プロジェクト環境に応じた高品質なコードを生成できます。

Claude Code

Claude Codeは、Plugin形式のインストールに対応しています。Agent SkillsとMCPサーバーの設定が同梱され、管理や更新も容易なため、Claude CodeではPluginとしての導入を推奨します。

Claude Codeを起動した上で、下記を順に実行してください。

/plugin marketplace add serendie/serendie
/plugin install serendie@serendie
/reload-plugins

Pluginではなく、MCPサーバーのみ導入したい場合は、下記のコマンドをターミナルから入力してください。

claude mcp add --transport http serendie-mcp https://serendie.design/mcp

Codex

下記のコマンドをターミナルから入力してください

codex mcp add serendie-mcp --url https://serendie.design/mcp

Cursor

下記のリンクをクリックすることで、自動的にMCPサーバーが追加されます。

GitHub Copilot

Visual Studio Code内のコマンドパレットからMCPの設定を開き、mcp.json内に下記を追記してください。

{
  "inputs": [],
  "servers": {
    "serendie-mcp": {
      "url": "https://serendie.design/mcp",
      "type": "http"
    }
  }
}

Figma Make

Figma Makeでは、Figmaワークスペースの管理者がカスタムコネクターを設定することで、Serendie MCPサーバーを利用できます。カスタムコネクター内では、エンドポイント https://serendie.design/mcp を指定してください。

三菱電機向け

三菱電機内では、スムーズに利用できるように推奨環境を準備しています。詳しくはSharePointを参照してください。

LLMs.txtは、Serendie UIの各種ドキュメントを、AIエージェントが効率よく利用できるようにサポートするファイルです。MCPサーバーを利用できないシーンなどで、このLLMs.txtをお使いのAIエージェントに指定することで、本サイトで提供しているガイドライン相当の情報を得ることができます。

下記のリンクから、簡易版と詳細版の2つを提供しています。AIエージェントにはこのURLを指定してください。

• LLMs.txt — ドキュメントの簡易な説明とURLの一覧
• llms-full.txt — ドキュメントの全文