🌟

AI駆動開発時代の新しいフロントエンド：デザインシステムとMCPが生み出す一貫性

kentaro_nishida

2025/09/09に公開

frontend

Model Context Protocol

 AI駆動開発時代の新しいフロントエンド：デザインシステムとMCPが生み出す一貫性
 はじめにこんにちは！satto workspaceでエンジニアをしているkentaro_nishidaです。
私たちsatto workspaceでは、生成AIプロダクトの開発を手がける一方で、自分たち自身も生成AIを活用した開発効率化に積極的に取り組んでいます。しかし、AI駆動開発を活用していく中、フロントエンド開発における課題に直面しました。それは「デザインの一貫性」です。
AIが生成するコードは確かに動作しますが、ハードコードされたスタイルや、統一感のないコンポーネントの使い方が頻発し、結果的に手直しのコストが膨らんでしまう問題がありました。
そこで私たちは、自社のデザインシステム「Sakutto UI」を開発し、さらにそれを効果的に活用するためのMCP（Model Context Protocol）サーバーも自社開発しました。これをFigma MCPと組み合わせることで、AI時代でも一貫性のあるフロントエンド開発を実現しています。
satto workspaceの詳細や私たちが採用している技術スタックについては、以下の動画でご紹介していますので、よろしければご覧ください。


画像の赤い領域が、今回ご紹介するアプローチです

 解決アプローチ：デザインシステム中心のMCPワークフローAI駆動開発におけるデザイン一貫性の課題に対して、私たちが採用したのはMCPを活用してデザインシステム情報をAIツールに直接提供するというアプローチでした。
FigmaやUIライブラリの情報をMCP経由でClaude、CursorなどのAIツールに連携させることで、AIが組織のデザインシステムを理解した状態でコードを生成できるようになります。その結果、手直しが必要な「AIっぽいコード」ではなく、最初から一貫性のあるコンポーネントが出力されるようになりました。

 システムアーキテクチャ以下の図は、Figmaで定義したデザインシステムが、MCP経由でAIツールに伝わり、最終的に統一されたコードが生成される流れを示しています。
このワークフローの重要なポイント：

どんなAIツールでも対応可能: Claude、Cursor、その他のMCPクライアント対応ツールなら切り替えるだけで利用可能

複数プロダクトへのスケーラビリティ: 一度作成すれば、あらゆるプロダクトで同じデザインシステムを活用

 構築ガイド
 1. Figmaでデザインシステムを定義Figma上で以下の要素を定義していきます：

 デザインシステムの構成要素Typography（タイポグラフィ）
フォントファミリー、サイズ、ウェイト、行間の定義
見出し、本文、キャプションなどの用途別スタイル
Colors（カラー）
Primitive Colors: 基本となる色のパレット
Semantic Colors: 用途別の色（primary、secondary、error等）
Icons（アイコン）
システム全体で使用するアイコンセット
統一されたサイズとストロークの太さ
UI Components（UIコンポーネント）
ボタン、フォーム、カード、モーダルなど
各コンポーネントのバリアント（状態やサイズ）

 2. Figma MCPでデザイン情報を取得Figma MCPを使うことで、FigmaとMCPクライアント（Claude、Cursor等のAIツール）が直接連携できるようになります。Figmaデスクトップ上で選択しているデザイン情報を直接MCPクライアントに送ることができるのです。

 Figma MCPのセットアップステップ1: Figmaデスクトップアプリの準備Figmaデスクトップアプリをインストール

Figma Downloadsからダウンロード
デスクトップアプリでのみMCPサーバー機能が利用可能
開発者モードを有効化
Figmaデスクトップアプリの設定 → 「開発者向け」
「MCPサーバーを有効にする」をON
ステップ2: MCPクライアント側の設定// mcp.json
{
  "mcpServers": {
    "figma-dev-mode-mcp-server": {
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}

 3. 自社UIパッケージの作成Figmaで定義したデザインシステムを、実際のコードに変換します。UIパッケージ（@your-org/ui-library）はnpmパッケージとして管理し、開発者が直接インポートして使用できるようにします。

 デザインシステムからコードへの変換マッピングデザインシステムの構成要素を、それぞれ最適な技術で実装します：
1. Typography → Tailwind CSS v4のCSS変数/* Typography */
@theme {
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
}
2. Colors → Tailwind CSS v4のCSS変数（Primitive + Semantic）/* Primitive Colors (基本色) */
@theme {
  --color-blue-50: #eff6ff;
  --color-blue-500: #3b82f6;
  --color-blue-900: #1e3a8a;
  --color-red-50: #fef2f2;
  --color-red-500: #ef4444;
  --color-red-900: #7f1d1d;
}

/* Semantic Colors (意味を持つ色) - Primitiveを参照 */
@theme {
  --color-primary: var(--color-blue-500);
  --color-destructive: var(--color-red-500);
}
3. Icons → SVGコンポーネントexport const CheckIcon = ({ className, ...props }: SVGProps<SVGSVGElement>) => (
  <svg
    className={cn("h-4 w-4", className)}
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    {...props}
  >
    <path d="M20 6L9 17l-5-5" />
  </svg>
);
4. UI Components → Reactコンポーネントで実装Figmaで定義されたUIコンポーネントは、shadcn/uiと同じ技術スタックでReactコンポーネントとして実装します（shadcn/uiを採用するわけではない）：

Radix UI: アクセシビリティ対応のヘッドレスコンポーネント

Tailwind CSS: ユーティリティファーストCSS

cva: バリアント管理ライブラリ

cn: クラス名結合ユーティリティ
import { cva, type VariantProps } from "class-variance-authority"

const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors",
  {
    variants: {
      variant: {
        primary: "bg-primary text-white shadow hover:bg-primary/90",
        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        destructive: "bg-destructive text-white hover:bg-destructive/90",
        outline: "border border-input bg-background hover:bg-accent",
        ghost: "hover:bg-accent hover:text-accent-foreground",
      },
      size: {
        sm: "h-8 px-3 text-xs",
        md: "h-9 px-4 py-2",
        lg: "h-10 px-8",
      },
    },
    defaultVariants: {
      variant: "primary",
      size: "md",
    },
  }
)

// 実際の使用例
<Button variant="primary" size="md">Submit</Button>
shadcn/uiの実績あるアーキテクチャで、自社デザインシステムに準拠したコンポーネントを構築できます。

 4. Storybookでドキュメント化生成されたコンポーネントをStorybookで可視化し、開発者とデザイナーが同じビジョンを共有できるようにします。

このタイミングでデザイナーにレビューしてもらい、Figmaのデザインが正しくコード化されているか確認することが重要です。

 5. 自社UIパッケージ用MCPサーバーの作成MCPクライアントがUIパッケージを理解し、適切に使用できるようにするMCPサーバー（@your-org/ui-mcp）を作成します。これもnpmパッケージとして管理し、MCPクライアントがコンポーネントを理解するために使用します。

 必要なMCPツール以下の6つのツールを実装することで、MCPクライアントがUIパッケージを活用できるようになります：

get_available_components - 利用可能なコンポーネント一覧を取得

get_component - 特定コンポーネントの詳細（props、バリアント、使用例）を取得

get_available_icons - 利用可能なアイコン一覧を取得

get_icon - 特定アイコンのSVGコードやReactコンポーネントを取得

get_available_styles - 利用可能なスタイル（カラー、タイポグラフィ等）一覧を取得

get_style - 特定スタイルの詳細（CSS変数、値）を取得

 実装の参考私たちがUIパッケージ用のMCPサーバーを実装する際に、以下の記事を大いに参考にさせていただきました。

 6. npmパッケージとして社内配布上記で作成した2つのパッケージをGitHub Packagesにプライベート公開します。

 パッケージの公開（publish）# package.jsonにpublishConfig を追加
{
  "name": "@your-org/ui-library",
  "publishConfig": {
    "registry": "https://npm.pkg.github.com"
  }
}

# GitHub PATでログイン（write:packages権限が必要）
npm login --registry=https://npm.pkg.github.com

# パッケージを公開
npm publish

 7. 配布されたパッケージの利用
 プライベートパッケージを使用するための準備プライベート公開されたパッケージを使用するには、以下の2つが必要です：
GitHub Personal Access Token (PAT) の取得
GitHubの Settings → Developer settings → Personal access tokens で作成

read:packages 権限が必要
ホームディレクトリに .npmrc ファイルを作成
# ~/.npmrcの設定（ホームディレクトリに配置）
@your-org:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}

 UIパッケージのインストール# UIパッケージをプロジェクトに追加
npm install @your-org/ui-library

 MCPクライアント側での設定// mcp.json
{
  "mcpServers": {
    "your-org-ui": {
      "command": "npx",
      "args": ["@your-org/ui-mcp"]
    }
  }
}

 まとめ本記事でご紹介したワークフローにより、デザインとコード実装の距離を大幅に縮めることができます。これにより、フロントエンドエンジニア以外の人々も画面設計により深く関わることが可能になります。
そしてこれからのフロントエンドエンジニアは、ただ画面を実装するのではなく、AIがデザインに合った画面を作れるようにするお膳立てが仕事の中心になっていくでしょう。MCPやデザインシステムといった仕組み作りが、その鍵となります。

ソフトバンク株式会社_satto開発チーム

ソフトバンク株式会社iPaaS事業開発本部で、satto workspaceをはじめとする複数の生成AIプロダクトを開発しています。「テクノロジーで社会構造を更新し、みんなの心に余白をつくる」というビジョンのもと、日々の実践や試行錯誤をZennに記録していきます。

AI駆動開発時代の新しいフロントエンド：デザインシステムとMCPが生み出す一貫性

はじめに

解決アプローチ：デザインシステム中心のMCPワークフロー

システムアーキテクチャ

構築ガイド

1. Figmaでデザインシステムを定義

デザインシステムの構成要素

2. Figma MCPでデザイン情報を取得

Figma MCPのセットアップ

ステップ1: Figmaデスクトップアプリの準備

ステップ2: MCPクライアント側の設定

3. 自社UIパッケージの作成

デザインシステムからコードへの変換マッピング

1. Typography → Tailwind CSS v4のCSS変数

2. Colors → Tailwind CSS v4のCSS変数（Primitive + Semantic）

3. Icons → SVGコンポーネント

4. UI Components → Reactコンポーネントで実装

4. Storybookでドキュメント化

5. 自社UIパッケージ用MCPサーバーの作成

必要なMCPツール

実装の参考

6. npmパッケージとして社内配布

パッケージの公開（publish）

7. 配布されたパッケージの利用

プライベートパッケージを使用するための準備

UIパッケージのインストール

MCPクライアント側での設定

まとめ

Discussion