Design Token Management with Claude Code: Consistent UI Guide

デザイントークン管理をClaude Codeで効率化する

デザイントークンはカラー、タイポグラフィ、スペーシングなどのデザイン判断を一元管理する仕組みです。Claude Codeを使えば、トークン定義からコード生成まで効率的に構築できます。

トークン定義

JSONベースのトークン設計

> W3C Design Tokens Community Group仕様に準拠した
> デザイントークンを定義して。
> カラー、タイポグラフィ、スペーシング、ラディアスを含めて。

{
  "color": {
    "primary": {
      "50": { "$value": "#eff6ff", "$type": "color" },
      "100": { "$value": "#dbeafe", "$type": "color" },
      "500": { "$value": "#3b82f6", "$type": "color" },
      "600": { "$value": "#2563eb", "$type": "color" },
      "700": { "$value": "#1d4ed8", "$type": "color" },
      "900": { "$value": "#1e3a8a", "$type": "color" }
    },
    "semantic": {
      "background": {
        "default": { "$value": "{color.primary.50}", "$type": "color" },
        "inverse": { "$value": "{color.primary.900}", "$type": "color" }
      },
      "text": {
        "default": { "$value": "#1a1a1a", "$type": "color" },
        "muted": { "$value": "#6b7280", "$type": "color" },
        "inverse": { "$value": "#ffffff", "$type": "color" }
      }
    }
  },
  "typography": {
    "fontSize": {
      "xs": { "$value": "0.75rem", "$type": "dimension" },
      "sm": { "$value": "0.875rem", "$type": "dimension" },
      "base": { "$value": "1rem", "$type": "dimension" },
      "lg": { "$value": "1.125rem", "$type": "dimension" },
      "xl": { "$value": "1.25rem", "$type": "dimension" },
      "2xl": { "$value": "1.5rem", "$type": "dimension" }
    },
    "fontWeight": {
      "normal": { "$value": "400", "$type": "fontWeight" },
      "medium": { "$value": "500", "$type": "fontWeight" },
      "bold": { "$value": "700", "$type": "fontWeight" }
    }
  },
  "spacing": {
    "1": { "$value": "0.25rem", "$type": "dimension" },
    "2": { "$value": "0.5rem", "$type": "dimension" },
    "4": { "$value": "1rem", "$type": "dimension" },
    "8": { "$value": "2rem", "$type": "dimension" },
    "16": { "$value": "4rem", "$type": "dimension" }
  },
  "radius": {
    "sm": { "$value": "0.25rem", "$type": "dimension" },
    "md": { "$value": "0.375rem", "$type": "dimension" },
    "lg": { "$value": "0.5rem", "$type": "dimension" },
    "full": { "$value": "9999px", "$type": "dimension" }
  }
}

Style Dictionaryによるコード生成

マルチプラットフォーム出力

> Style Dictionaryの設定を作成して。
> CSS変数、TypeScript定数、iOS/Android向けに出力して。

// style-dictionary.config.js
import StyleDictionary from 'style-dictionary';

export default {
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      transformGroup: 'css',
      buildPath: 'dist/css/',
      files: [{
        destination: 'variables.css',
        format: 'css/variables',
        options: { outputReferences: true },
      }],
    },
    typescript: {
      transformGroup: 'js',
      buildPath: 'dist/ts/',
      files: [{
        destination: 'tokens.ts',
        format: 'javascript/es6',
      }],
    },
    ios: {
      transformGroup: 'ios-swift',
      buildPath: 'dist/ios/',
      files: [{
        destination: 'StyleDictionary.swift',
        format: 'ios-swift/class.swift',
      }],
    },
  },
};

生成されるCSS変数：

:root {
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-semantic-text-default: #1a1a1a;
  --spacing-4: 1rem;
  --radius-md: 0.375rem;
}

ダークモード対応

セマンティックトークンを活用すれば、ダークモード対応も容易です。

[data-theme="dark"] {
  --color-semantic-background-default: var(--color-primary-900);
  --color-semantic-text-default: #f3f4f6;
}

Figma連携

Figma VariablesとデザイントークンJSONの同期もClaude Codeに相談できます。FigmaのREST APIを使ったトークン抽出スクリプトの生成も可能です。

Summary

Claude Codeを使えば、デザイントークンの定義からStyle Dictionaryによるコード生成、マルチプラットフォーム対応まで効率よく構築できます。デザインシステム構築やCSS/スタイリングガイド、ダークモード実装も合わせて参考にしてください。

Style Dictionaryの詳細はStyle Dictionary公式ドキュメントを参照してください。