AIデザインシステムツール — Figma+Tailwind+Claude Codeの統合

デザイナーがFigmaで定義したカラー・フォント・スペーシングを、エンジニアがTailwind CSSの変数として手動転記する時代は終わった。デザイントークンをAIで自動変換し、コンポーネントまで生成するパイプラインを構築する。

デザイントークンとは

デザイントークンは、デザインシステムの最小単位である。色、フォントサイズ、余白、角丸などの値を名前付きの変数として定義する。

{
  "color": {
    "primary": { "value": "#2563EB" },
    "primary-hover": { "value": "#1D4ED8" },
    "secondary": { "value": "#7C3AED" },
    "text": { "value": "#1F2937" },
    "text-muted": { "value": "#6B7280" },
    "background": { "value": "#FFFFFF" },
    "surface": { "value": "#F9FAFB" }
  },
  "spacing": {
    "xs": { "value": "4px" },
    "sm": { "value": "8px" },
    "md": { "value": "16px" },
    "lg": { "value": "24px" },
    "xl": { "value": "32px" },
    "2xl": { "value": "48px" }
  },
  "fontSize": {
    "xs": { "value": "12px" },
    "sm": { "value": "14px" },
    "base": { "value": "16px" },
    "lg": { "value": "18px" },
    "xl": { "value": "20px" },
    "2xl": { "value": "24px" },
    "3xl": { "value": "30px" }
  },
  "borderRadius": {
    "sm": { "value": "4px" },
    "md": { "value": "8px" },
    "lg": { "value": "12px" },
    "full": { "value": "9999px" }
  }
}

デザイントークン -> Tailwind CSS変数の変換

変換スクリプト

// scripts/tokens-to-tailwind.js
const fs = require('fs');
const tokens = JSON.parse(fs.readFileSync('design-tokens.json', 'utf8'));

function generateTailwindConfig(tokens) {
  const config = {
    theme: { extend: { colors: {}, spacing: {}, fontSize: {}, borderRadius: {} } }
  };

  for (const [name, token] of Object.entries(tokens.color)) {
    config.theme.extend.colors[name] = token.value;
  }
  for (const [name, token] of Object.entries(tokens.spacing)) {
    config.theme.extend.spacing[name] = token.value;
  }
  for (const [name, token] of Object.entries(tokens.fontSize)) {
    config.theme.extend.fontSize[name] = token.value;
  }
  for (const [name, token] of Object.entries(tokens.borderRadius)) {
    config.theme.extend.borderRadius[name] = token.value;
  }
  return config;
}

const tailwindConfig = generateTailwindConfig(tokens);
fs.writeFileSync('tailwind.config.generated.js',
  '/** @type {import("tailwindcss").Config} */
' +
  'module.exports = ' + JSON.stringify(tailwindConfig, null, 2));
console.log('Tailwind設定ファイルを生成しました');

CSS変数として出力する方法

Tailwind v4ではCSS変数ベースの設定が推奨される。

/* generated/design-tokens.css */
@theme {
  --color-primary: #2563EB;
  --color-primary-hover: #1D4ED8;
  --color-secondary: #7C3AED;
  --color-text: #1F2937;
  --color-text-muted: #6B7280;
  --color-background: #FFFFFF;
  --color-surface: #F9FAFB;

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;
}

Claude Codeでトークンからコンポーネントを生成

cat design-tokens.json | claude -p "このデザイントークンを使ったButtonコンポーネントをReact + Tailwindで生成して。primary/secondary/ghostの3バリアントで"

AIが生成する出力例:

interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
  children: React.ReactNode;
}

export function Button({ variant = 'primary', size = 'md', children }: ButtonProps) {
  const baseStyles = 'inline-flex items-center justify-center font-medium rounded-md transition-colors';
  const variants = {
    primary: 'bg-primary text-white hover:bg-primary-hover',
    secondary: 'bg-secondary text-white hover:opacity-90',
    ghost: 'bg-transparent text-text hover:bg-surface',
  };
  const sizes = {
    sm: 'px-sm py-xs text-sm',
    md: 'px-md py-sm text-base',
    lg: 'px-lg py-md text-lg',
  };
  return (
    <button className={baseStyles + ' ' + variants[variant] + ' ' + sizes[size]}>
      {children}
    </button>
  );
}

Figma MCPとの連携

Figma MCPを使えば、Figmaのデザインファイルから直接トークンを抽出できる。

> @figma design-system.figmaのカラーパレットをデザイントークンJSON形式で抽出して

抽出から変換、コンポーネント生成の全工程がターミナルから完結する。

運用のベストプラクティス

トークンJSONを単一ソースにする: Figma側の変更をJSONに反映し、そこからTailwindを生成する一方向フロー
生成ファイルにはコメントを付ける: /* AUTO-GENERATED - DO NOT EDIT */
CIに変換スクリプトを組み込む: PRでトークンが更新されたら自動でTailwind設定を再生成
ダークモードはトークンレベルで定義: color.dark.primaryのようにトークンを分ける

デザインシステムのAI統合により、デザイナーとエンジニアの間の手動転記作業が消える。トークンが変更されるたびにコンポーネントまで自動追従する仕組みが、一貫性のあるUIを保証する。