Design Token Management with Claude Code: Consistent UI Guide

デザインtokenmanajemen dengan Claude Code: efisiensi

デザインtoken カラー、タイポgrafikィ、スペーシング dll. デザイン判断 一元manajemen mekanisme.Claude Code 使えば、tokendefinisi dari コードgenerateま efisien pembangunan bisa dilakukan.

tokendefinisi

JSONベースのtoken設計

> W3C Design Tokens Community Group仕様 準拠した
> デザインtoken definisiして。
> カラー、タイポgrafikィ、スペーシング、ラディアス 含めて。

{
  "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によるコードgenerate

マルチplatformoutput

> Style Dictionary pengaturan buatkan.
> CSSvariabel、TypeScriptkonstanta、iOS/Android向け outputして。

// 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さCSSvariabel：

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

Dukungan Dark Mode

セマンティックtoken pemanfaatanすれば、ダークモードdukungan juga 容易.

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

Figmaintegrasi

Figma Variables dan デザインtokenJSON 同期 juga Claude Code 相談 bisa dilakukan.Figma REST API 使ったtoken抽出script generate juga dimungkinkan.

Summary

Dengan Claude Code, デザインtoken definisi dari Style Dictionary よるコードgenerate、マルチplatformdukunganま 効率よくpembangunan bisa dilakukan.デザインsistempembangunanやCSS/スタイリングpanduan、ダークモードimplementasi juga 合わせて参考 .

Untuk Style Dictionaryの詳細, lihat Style Dictionary公式ドキュメント.