Design Token Management with Claude Code: Consistent UI Guide

デザインtokenmanagementको Claude Code से Efficient बनाएं

デザインtokenはcolor、タイポグラフィ、スペーシング आदिのデザイン判断を一元managementする仕組み है।Claude Code का उपयोग करके、token定義 सेcodegenerate तकefficientlybuild किया जा सकता है。

token定義

JSONベースのtoken設計

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

{
  "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によるcodegenerate

マルチプラットform出力

> Style Dictionaryのsettingsをबनाओ。
> CSSvariable、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',
      }],
    },
  },
};

generateされるCSSvariable：

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

darkモードsupport

セマンティックtokenをutilizationすれば、darkモードsupportも容易 है।

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

Figmaintegration

Figma VariablesとデザインtokenJSONのsyncもClaude Codeに相談でき है।FigmaのREST APIを使ったtoken抽出スクリプトのgenerateもpossible है।

Summary

Claude Code का उपयोग करके、デザインtokenの定義 सेStyle Dictionaryによるcodegenerate、マルチプラットformsupport तक効率よくbuild किया जा सकता है。デザインシステムbuildやCSS/スタイリングガイド、darkモードimplementationも合わせてreference के लिए देखें。

Style Dictionaryके details के लिएStyle Dictionaryofficial documentationをदेखें。