Claude Code के साथ Design Tokens: Figma से CSS Variables, Tailwind और React तक

Design Tokens UI बदलाव का भरोसेमंद अनुबंध हैं

Design Tokens यानी रंग, spacing, typography, radius, shadow और state जैसी design decisions को नाम वाले data के रूप में रखना। आसान भाषा में, हर component में #2563eb, 16px या 0.5rem लिखने के बजाय आप इन्हें tokens.json में रखते हैं और वहीं से CSS variables, Tailwind config और React components को value देते हैं।

Claude Code इस काम में उपयोगी है क्योंकि token workflow पढ़ा, बदला और verify किया जा सकता है। यह मौजूदा CSS पढ़ सकता है, hardcoded values ढूंढ सकता है, semantic नाम सुझा सकता है, components बदल सकता है, build चला सकता है और diff समझा सकता है। लेकिन prompt छोटा और साफ होना चाहिए। “UI consistent बना दो” की जगह बताइए कि token file कौन सी है, कौन से components बदलने हैं, contrast rule क्या है और कौन से commands चलाने हैं।

आगे पढ़ने के लिए Claude Code design system guide और Claude Code accessibility guide उपयोगी हैं। official references के लिए stable Design Tokens Format Module 2025.10, Claude Code docs, Figma Variables plugin API, Tailwind theme docs, Style Dictionary docs, MDN CSS custom properties और WCAG contrast guidance देखें।

raw token और semantic token

raw token value के material को बताता है, जैसे color.blue.600, space.4, font.size.base। semantic token उपयोग का मतलब बताता है, जैसे color.action.primary.bg, color.text.muted, color.surface.default। component token किसी खास component का local rule होता है, जैसे button.primary.paddingX।

प्रकार	उदाहरण	कब इस्तेमाल करें
raw	color.blue.600	palette, spacing scale, typography scale
semantic	color.action.primary.bg	product meaning, theme switch, dark mode
component	button.primary.paddingX	component-specific rule सच में जरूरी हो

शुरुआत raw और semantic tokens से करें। अगर Button सीधे color.blue.600 पढ़ता है, तो brand color बदलने पर नाम गलत लगने लगेगा। अगर वह color.action.primary.bg पढ़ता है, तो value बदल सकती है पर intention साफ रहता है।

Figma-like spec को code contract बनाना

Figma Variables मदद करती हैं, लेकिन Claude Code को raw export नहीं बल्कि reviewable handoff दें। Figma-like spec source file, modes, requested change, affected components और review rules बताती है। इससे risk घटता है कि Blue / 600 जैसा visual नाम React में चला जाए, जबकि product को color.action.primary.bg चाहिए।

{
  "figmaSource": {
    "file": "Marketing UI Kit",
    "collection": "Brand v2",
    "modes": ["light", "dark"]
  },
  "changeRequest": {
    "type": "replace-token",
    "from": "color.blue.600",
    "to": "color.action.primary.bg",
    "components": ["Button", "Link", "Card"]
  },
  "reviewRules": [
    "Do not use raw color tokens in component CSS.",
    "Keep focus and hover tokens explicit.",
    "List affected use case and pitfall before editing files."
  ]
}

Claude Code से पहले impact table मांगे और review के बाद ही edit करवाएं। यह workflow common pitfall पकड़ता है: एक token change Button background, Link color, Card accent और focus outline को साथ में प्रभावित कर सकता है।

चलने वाला tokens.json

इसे tokens/tokens.json में रखें:

{
  "color": {
    "blue": {
      "50": { "$type": "color", "$value": "#eff6ff" },
      "600": { "$type": "color", "$value": "#2563eb" },
      "700": { "$type": "color", "$value": "#1d4ed8" }
    },
    "slate": {
      "50": { "$type": "color", "$value": "#f8fafc" },
      "100": { "$type": "color", "$value": "#f1f5f9" },
      "700": { "$type": "color", "$value": "#334155" },
      "900": { "$type": "color", "$value": "#0f172a" }
    },
    "white": { "$type": "color", "$value": "#ffffff" },
    "focus": { "$type": "color", "$value": "#f59e0b" },
    "surface": {
      "default": { "$type": "color", "$value": "{color.white}" },
      "muted": { "$type": "color", "$value": "{color.slate.50}" },
      "inverse": { "$type": "color", "$value": "{color.slate.900}" }
    },
    "text": {
      "default": { "$type": "color", "$value": "{color.slate.900}" },
      "muted": { "$type": "color", "$value": "{color.slate.700}" },
      "inverse": { "$type": "color", "$value": "{color.white}" }
    },
    "action": {
      "primary": {
        "bg": { "$type": "color", "$value": "{color.blue.600}" },
        "bgHover": { "$type": "color", "$value": "{color.blue.700}" },
        "text": { "$type": "color", "$value": "{color.white}" }
      }
    }
  },
  "dark": {
    "color": {
      "surface": {
        "default": { "$type": "color", "$value": "{color.slate.900}" },
        "muted": { "$type": "color", "$value": "{color.slate.700}" }
      },
      "text": {
        "default": { "$type": "color", "$value": "{color.white}" },
        "muted": { "$type": "color", "$value": "{color.slate.100}" }
      },
      "action": {
        "primary": {
          "bg": { "$type": "color", "$value": "{color.blue.50}" },
          "bgHover": { "$type": "color", "$value": "{color.white}" },
          "text": { "$type": "color", "$value": "{color.slate.900}" }
        }
      }
    }
  },
  "space": {
    "2": { "$type": "dimension", "$value": "0.5rem" },
    "3": { "$type": "dimension", "$value": "0.75rem" },
    "4": { "$type": "dimension", "$value": "1rem" },
    "6": { "$type": "dimension", "$value": "1.5rem" }
  },
  "font": {
    "size": {
      "sm": { "$type": "dimension", "$value": "0.875rem" },
      "base": { "$type": "dimension", "$value": "1rem" },
      "lg": { "$type": "dimension", "$value": "1.125rem" }
    },
    "weight": {
      "medium": { "$type": "fontWeight", "$value": "500" },
      "bold": { "$type": "fontWeight", "$value": "700" }
    }
  },
  "radius": {
    "md": { "$type": "dimension", "$value": "0.5rem" },
    "lg": { "$type": "dimension", "$value": "0.75rem" }
  },
  "shadow": {
    "button": { "$type": "shadow", "$value": "0 1px 2px rgb(15 23 42 / 0.16)" }
  }
}

Style Dictionary से CSS variables बनाना

npm install --save-dev style-dictionary

style-dictionary.config.js बनाएं:

export default {
  source: ["tokens/tokens.json"],
  hooks: {
    formats: {
      "css/variables-with-dark": ({ dictionary }) => {
        const light = dictionary.allTokens
          .filter((token) => !token.path.includes("dark"))
          .map((token) => `  --${token.name}: ${token.value};`)
          .join("\n");

        const dark = dictionary.allTokens
          .filter((token) => token.path[0] === "dark")
          .map((token) => `  --${token.path.slice(1).join("-")}: ${token.value};`)
          .join("\n");

        return `:root {\n${light}\n}\n\n[data-theme="dark"] {\n${dark}\n}\n`;
      }
    }
  },
  platforms: {
    css: {
      transformGroup: "css",
      buildPath: "src/styles/",
      files: [{ destination: "tokens.css", format: "css/variables-with-dark" }]
    }
  }
};

package.json script:

{
  "scripts": {
    "tokens:build": "style-dictionary build --config style-dictionary.config.js"
  }
}

generated CSS कुछ ऐसा होगा:

:root {
  --color-action-primary-bg: #2563eb;
  --color-action-primary-bg-hover: #1d4ed8;
  --color-action-primary-text: #ffffff;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --font-size-base: 1rem;
  --font-weight-bold: 700;
  --radius-md: 0.5rem;
  --shadow-button: 0 1px 2px rgb(15 23 42 / 0.16);
}

[data-theme="dark"] {
  --color-surface-default: #0f172a;
  --color-text-default: #ffffff;
  --color-action-primary-bg: #eff6ff;
  --color-action-primary-text: #0f172a;
}

Tailwind और React Button

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{ts,tsx,js,jsx,mdx}"],
  theme: {
    extend: {
      colors: {
        surface: { DEFAULT: "var(--color-surface-default)", muted: "var(--color-surface-muted)" },
        text: { DEFAULT: "var(--color-text-default)", muted: "var(--color-text-muted)", inverse: "var(--color-text-inverse)" },
        action: { primary: "var(--color-action-primary-bg)", "primary-hover": "var(--color-action-primary-bg-hover)" }
      },
      spacing: { 3: "var(--space-3)", 4: "var(--space-4)", 6: "var(--space-6)" },
      borderRadius: { md: "var(--radius-md)", lg: "var(--radius-lg)" },
      boxShadow: { button: "var(--shadow-button)" }
    }
  }
};

import "./Button.css";

type ButtonProps = {
  children: React.ReactNode;
  onClick?: () => void;
  disabled?: boolean;
};

export function Button({ children, onClick, disabled = false }: ButtonProps) {
  return (
    <button className="Button" onClick={onClick} disabled={disabled}>
      {children}
    </button>
  );
}

.Button {
  background: var(--color-action-primary-bg);
  border: 0;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-button);
  color: var(--color-action-primary-text);
  cursor: pointer;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  padding: var(--space-3) var(--space-4);
}

.Button:hover:not(:disabled) {
  background: var(--color-action-primary-bg-hover);
}

.Button:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.Button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

उपयोग के उदाहरण और गलतियां

पहला उपयोग Figma-to-code handoff है। Figma Variables उपयोगी input हैं, लेकिन code side की reviewed contract file tokens.json होनी चाहिए। Claude Code से कहें कि Figma export और current tokens की तुलना करे और added, removed, renamed values तथा affected components बताए।

दूसरा उपयोग dark mode है। हर component CSS copy मत करें। surface, text, action जैसे semantic tokens को [data-theme="dark"] में override करें।

तीसरा उपयोग rebranding या landing page refresh है। token build और Storybook screenshots से पता चलता है कि color और spacing अलग-अलग screens पर drift तो नहीं कर रहे।

चौथा उपयोग PR review है। Claude Code raw color usage, generated CSS में manual edit, missing focus state और WCAG AA contrast issue पकड़ सकता है।

आम गलतियां हैं: पहले दिन बहुत सारे component tokens बनाना, blueButton जैसे appearance-based नाम रखना, generated tokens.css को हाथ से edit करना, और contrast check को आखिर में करना। normal text के लिए WCAG AA में कम से कम 4.5:1 contrast चाहिए।

Review checklist:

• tokens/tokens.json ही edited source है; generated CSS हाथ से नहीं बदला गया।
• Button, Link और Card को light, dark, hover, disabled और focus states में देखा गया।
• React और Tailwind raw palette tokens नहीं, semantic tokens consume करते हैं।
• PR में Figma-like spec, use case, pitfall, risk और workflow लिखा है।
• WCAG 2.2 AA contrast text और interactive states के लिए validate हुआ।

Claude Code review prompt

Design token review task:
- Read tokens/tokens.json, style-dictionary.config.js, src/styles/tokens.css, tailwind.config.js, and src/components/Button.tsx.
- Check that components use semantic tokens, not raw color tokens.
- Verify light and dark theme values for button, surface, and text tokens.
- Flag any generated CSS file that was edited manually.
- Check WCAG 2.2 AA contrast for normal text and button text.
- Suggest the smallest safe diff. Do not rename tokens unless you list every affected component.
- After changes, run npm run tokens:build and the focused component tests.

निष्कर्ष

Design Tokens Figma, CSS, Tailwind, React, accessibility और review को एक ही भाषा में जोड़ते हैं। practical workflow है: tokens.json को source रखें, Style Dictionary से CSS variables बनाएं, Tailwind में map करें, components में semantic tokens consume करें, और हर PR में drift तथा contrast check करें।

मैंने इस लेख के example path को token file से CSS variables generate करके और React Button के background, text color, spacing, radius, shadow और focus outline में जोड़कर verify किया। reusable prompts और checklists के लिए ClaudeCodeLab products देखें। production में Storybook states, axe checks और screenshot review जोड़ें; team rollout के लिए ClaudeCodeLab training और consultation देखें।