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를 사용한토큰抽出スクリプトの생성も가능합니다。

정리

Claude Code를 활용하면 デザイン토큰の定義からStyle Dictionary에 의한コード생성、マルチプラット폼대응まで効率よく구축할 수 있습니다。デザインシステム구축やCSS/スタイリング가이드、ダークモード구현도 함께 참고하세요.

Style Dictionary의 상세 정보는Style Dictionary공식 문서를 참고하세요.