Claude Code से CSS variables और theme token बनाना

पहले problem boundary तय करें

Claude Code से CSS variables और theme token बनाना का मतलब सिर्फ सुंदर UI बनाना नहीं है। लक्ष्य है interaction, layout, accessibility, mobile और conversion को एक checklist में सुधारना। Production में long text, code block, ads, CTA, keyboard, error और empty state बहुत महत्वपूर्ण हैं।

साथ में claude code dark mode implementation, claude code design tokens, claude code design system पढ़ें। Official references: MDN CSS custom properties, MDN var(), MDN prefers-color-scheme. Claude Code prompt में goal, forbidden scope, visual rules, use case और pitfall साफ लिखें।

Suggested prompt

इस UI improvement को सबसे छोटे safe change से implement करें।
Routes, components, design tokens और main CTA को रखें।
Copy-paste-ready code, use case, pitfall, mobile check और rollback दें।
अंत में human review checklist दें।

Use case checklist

1. Content site: search, related articles, consultation और download जल्दी मिलें।
2. SaaS: कम steps, लेकिन keyboard, mobile और error state सुरक्षित रहें।
3. Product page: price, buy button, ads और forms छिपें नहीं।
4. Team workflow: Claude Code code के साथ review checklist भी दे।

Implementation code

:root {
  --color-page: #ffffff;
  --color-text: #111827;
  --color-muted: #4b5563;
  --color-accent: #2563eb;
  --space-page: clamp(1rem, 3vw, 2rem);
}

[data-theme="dark"] {
  --color-page: #0b1120;
  --color-text: #f8fafc;
  --color-muted: #cbd5e1;
  --color-accent: #93c5fd;
}

body {
  background: var(--color-page, white);
  color: var(--color-text, black);
  padding-inline: var(--space-page, 1rem);
}

a {
  color: var(--color-accent, blue);
}

const root = document.documentElement;
const stored = localStorage.getItem("theme");
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
root.dataset.theme = stored || (prefersDark ? "dark" : "light");

Pitfall checklist

• केवल screenshot के लिए optimize न करें।
• Mobile पर long text, code block और table देखें।
• State बताने के लिए केवल color पर निर्भर न रहें।
• Claude Code को unrelated files बदलने न दें।
• 375px, keyboard, slow network और error state test करें।

Verification

Build चलाएं और mobile viewport देखें। Overflow न हो, code block scroll करे, CTA, forms और ads दिखें। Claude Code से second review pass मांगें जिसमें changed files, risks, removable code और rollback हो।

Monetization

यह ads, consultation, product cards, pricing और forms को प्रभावित करता है। इसे team process बनाना हो तो Claude Code training और consultation देखें।

Practical note

मैंने implementation और review अलग रखकर test किया। Diff छोटा रहा और layout issues deploy से पहले दिख गए।

Extra review

Publish से पहले screenshots, keyboard, mobile width, slow network, errors और CTA को एक checklist में रखें। इससे Claude Code का output business result से जुड़ता है, केवल code से नहीं। जो complexity हट सकती है, उसे हटाना भी improvement है।

Extra review

Publish से पहले screenshots, keyboard, mobile width, slow network, errors और CTA को एक checklist में रखें। इससे Claude Code का output business result से जुड़ता है, केवल code से नहीं। जो complexity हट सकती है, उसे हटाना भी improvement है।