MCP サーバー

AI コーディングツール連携

AI（Claude Code / Cursor / claude.ai など）で UI を書くとき、relay デザインシステムのコンポーネント仕様・トークン・必須ルールを AI に直接読ませるための MCP（Model Context Protocol）サーバーを提供しています。Cloudflare 上で稼働しており、URL を登録するだけで使えます（npm / Node のインストール不要・認証不要）。ハードコード値や規約違反（text-sm 直書きなど）を避けた relay 準拠の UI を生成しやすくなります。

セットアップ

接続先はこの URL です（認証なし）。各ツールへの登録方法は下記のとおりです。

接続先 URL

各ツールにこの URL を登録します（認証なし）

https://relay-design-system-mcp.s-taguchi.workers.dev/mcp

claude.ai（Web）

カスタムコネクタとして URL を追加するだけ

Settings → Connectors →「カスタムコネクタを追加」を開き、上記の URL を貼って保存してください。以降、チャットから relay のツールが使えるようになります。

Claude Code

コマンド（方法A）または .mcp.json 直書き（方法B）

方法A: コマンドで追加（--transport http の指定が必須）

claude mcp add --transport http relay-ds https://relay-design-system-mcp.s-taguchi.workers.dev/mcp

方法B: .mcp.json に直接書く（プロジェクト直下。チーム共有向け）

{
  "mcpServers": {
    "relay-ds": {
      "type": "http",
      "url": "https://relay-design-system-mcp.s-taguchi.workers.dev/mcp"
    }
  }
}

claude mcp list で relay-ds が connected か確認できます。Cursor / Windsurf も各ツールの MCP 設定に同じ URL を登録すれば使えます。

使えるツール

登録すると、AI から次の 9 つのツールが使えるようになります。「relay のスタイルでログイン画面を作って」のように頼むと、AI がこれらを呼び出して規約準拠の UI を生成します。

ツール	内容
`get_setup`	最初に呼ぶ。CSS 導入手順と確認方法（未導入だと relay クラスが効かない）
`list_components`	全コンポーネント一覧（英名 / 和名 / 概要 / 主要クラス）
`get_component`	指定コンポーネントの完全仕様（props・状態・色・usage・クラス・コピペ HTML・Figma リンク）
`get_tokens`	デザイントークン（color / typography / spacing / radius / shadow）
`get_design_principles`	必須ルール（ハードコード禁止・semantic color 等）+ 禁止パターン Top 10
`get_accessibility`	WCAG 2.2 チェックリスト（DS 担保範囲＋プロダクト必須実装）。個別対応は get_component の「アクセシビリティ」節
`list_assets`	ブランドアセット（ロゴ / イラスト）一覧 + 直リンク URL
`search`	コンポーネント / トークン / 規約 / アセットの横断検索
`get_sprint_kit`	スプリント開発キット（planner / generator / evaluator subagent + sprint workflow）の配布。Claude Code 向け

公開データは DESIGN.md / docs/ACCESSIBILITY.md / src/components / src/tokens / snippets / .claude から生成されています。