आपका अपना डिज़ाइन सिस्टम

आपके प्रॉडक्ट का रूप बदलने पर Tanrei के कंपोनेंट कभी नहीं बदलते। जो बदलता है वह एक लेयर है: एक छोटी JSON फ़ाइल, जो साझा शब्दावली के मान तय करती है और आपके पैलेट घोषित करती है। @tanrei/cli उसी एक फ़ाइल से वह सब कुछ बना देता है जो हर प्लैटफ़ॉर्म को चाहिए।

प्री-रिलीज़

0.1.0-next.0 npm पर dist-tag next के साथ प्रकाशित है: 0.1.0 तक @tanrei/cli@next और @tanrei/mcp@next इंस्टॉल करें। 0.x प्री-रिलीज़ के दौरान पुराने वर्शन के साथ संगतता नहीं रखी जाती: कोई भी प्री-रिलीज़ पहले से अप्रचलित घोषित किए बिना कुछ भी तोड़ सकती है, और क्या टूटा, यह उसका changeset बताता है।

इंस्टॉल करें

link

npm से

link

कमांड लाइन टूल को अपने प्रॉडक्ट में डेवलपमेंट डिपेंडेंसी के रूप में जोड़ें; तब इस पेज का हर npx tanrei … कमांड वही कॉपी चलाता है। इसमें Theme Studio भी है, जिसे tanrei studio सर्व करता है।

npm install --save-dev @tanrei/cli

MCP सर्वर को इंस्टॉल करने की ज़रूरत नहीं: जब कोई एजेंट उसे शुरू करता है, तब npx @tanrei/mcp ले आता है, जैसा इस पेज में आगे रजिस्टर किया गया है।

सोर्स से

link

main पर मौजूद सोर्स इस्तेमाल करने के लिए रिपॉज़िटरी के क्लोन में दोनों पैकेज बिल्ड करें, और पैक की गई फ़ाइलें अपने प्रॉडक्ट में डेवलपमेंट डिपेंडेंसी के रूप में इंस्टॉल करें:

git clone https://github.com/chnotchy/tanrei.git
cd tanrei
pnpm install
pnpm --filter @tanrei/studio build:app   # Theme Studio, जिसे `tanrei studio` सर्व करता है
pnpm --filter @tanrei/cli --filter @tanrei/mcp build
pnpm --filter @tanrei/cli --filter @tanrei/mcp pack --pack-destination ../tanrei-packages

# अपने प्रॉडक्ट में: उस फ़ोल्डर का पाथ जिसमें पैकेज लिखे गए
npm install --save-dev path/to/tanrei-packages/tanrei-cli-*.tgz path/to/tanrei-packages/tanrei-mcp-*.tgz

MCP सर्वर के लिए उसकी जगह इंस्टॉल की गई कॉपी रजिस्टर करें: claude mcp add tanrei -- npx tanrei-mcp, अपने प्रॉडक्ट के फ़ोल्डर में चलाकर।

एक लेयर से हर प्लैटफ़ॉर्म तक

link

1. लेयर शुरू करें — डिफ़ॉल्ट सिस्टम से या किसी प्रीसेट से।

   npx tanrei init acme --extends tanrei

   इससे design/acme.system.json और tanrei.json लिखी जाती हैं। स्लाइडर ज़्यादा पसंद हैं? तो लेयर को Theme Studio में गढ़ें और उसे डाउनलोड कर लें।

2. बताएँ कि हर आउटपुट कहाँ जाएगा — tanrei.json में। सिर्फ़ वही लिखें जो आप शिप करते हैं।

   {
     "system": "design/acme.system.json",
     "kotlinPackage": "com.acme.design",
     "outputs": {
       "tokens": "design/tokens/acme",
       "web": "apps/web/src/styles",
       "swiftui": "apps/ios/Acme/Design",
       "compose": "apps/android/app/src/main/kotlin/com/acme/design",
       "flutter": "apps/flutter/lib/design",
       "react-native": "apps/mobile/src/design"
     }
   }

3. बिल्ड करें।

   npx tanrei build

   नतीजे को कमिट करें। CI में npx tanrei build --check जोड़ें: यह कुछ नहीं लिखता, और कमिट किया हुआ कोई आउटपुट पुराना पड़ गया हो तो विफल हो जाता है।

4. इस्तेमाल करें। जनरेट की गई फ़ाइलों में आपके सिस्टम के मान होते हैं; टाइप लाइब्रेरी से आते हैं, इसलिए शब्दावली में बदलाव चुपचाप ड्रिफ़्ट होने के बजाय बिल्ड तोड़ देता है।

   प्लैटफ़ॉर्म	आपको मिलता है	आप लिखते हैं
   Web	acme.css	<html data-tanrei-system="acme">
   SwiftUI	TanreiSystem+Acme.swift	.tanreiTheme(TanreiTheme(system: .acme))
   Compose	TanreiSystemAcme.kt	TanreiTheme(system = TanreiSystem.Acme) { … }
   Flutter	acme_system.g.dart	TanreiTheme(data: TanreiThemeData.platform(context, system: acmeSystem), …)
   React Native	acme.ts	<TanreiProvider system={acme}>

एक बदलाव, एक पुल रिक्वेस्ट

link

लेयर में कोई मान बदलें, tanrei build चलाएँ, और हर प्लैटफ़ॉर्म की फ़ाइल उसी कमिट में बदल जाती है। सारा टेक्स्ट थोड़ा बड़ा करना एक पंक्ति का काम है:

"tanrei.dial.type.base": { "$value": { "value": 17, "unit": "px" }, "reason": "हाथ भर की दूरी से पढ़ा जाता है।" }

लेयर किसी मान के साथ चार काम कर सकती है — डायल सेट करना, टोकन को स्केल करना, एलियास को दूसरी जगह मोड़ना, कारण के साथ मान को पिन करना। इनके लिए, ब्रैंड के रंग या किसी क्विज़ के “सही” और “ग़लत” जैसे पैलेट घोषित करने के लिए, और मान काफ़ी न हों तो टोकन जोड़ने के लिए डिज़ाइन सिस्टम और कस्टमाइज़ेशन देखें।

जितना चाहें उतना नियंत्रण — फ़ाइल हमेशा वही

link

कस्टमाइज़ेशन कई स्तरों में है, और हर स्तर उसी एक <id>.system.json को संपादित करता है:

आप चाहते हैं	आप इस्तेमाल करते हैं
झटपट सेटअप	Theme Studio → बाईं ओर की सूची: रूप-रंग की नौ पंक्तियाँ (ब्रैंड का रंग, ग्रे, टाइपफ़ेस, साइज़, कोने, कॉर्नर स्मूदिंग, आइकन, दबाने पर फ़ीडबैक, फ़ोकस), हर एक बस एक क्लिक दूर, लॉक और शफ़ल के साथ
ग्रुप को ट्यून करना	Studio → सूची में “और”: आठों डायल, सारे पैलेट, हर कंपोनेंट, हर व्यवहार
GUI में एक-एक टोकन को छूना	Studio → इंस्पेक्ट → टोकन: पूरी शब्दावली में खोजें; हर टोकन सिर्फ़ वही संपादन पेश करता है जो उसके लिए मान्य हैं, और दिखाता है कि कौन-से टोकन उसके पीछे चलते हैं
सोर्स संपादित करना	Studio → इंस्पेक्ट → सोर्स, या आपका एडिटर: JSON, जिसे स्कीमा और इंजन दोनों जाँचते हैं
ऐसा टोकन जो मौजूद नहीं है	उसे जोड़ें: किसी सीरीज़ में एक स्टेप, एक पंक्ति में Button का नया साइज़ या वेरिएंट, या आपके अपने टोकन

npx tanrei studio

यह Theme Studio को आपकी लेयर फ़ाइल पर खोलता है: संपादन करते ही उसमें सेव हो जाते हैं (किसी भी बदलाव की तरह इन्हें git से रिव्यू करें), उसी समय आपके एडिटर में किया गया संपादन कभी ओवरराइट नहीं होता, और “Build” tanrei build चलाता है। यह सिर्फ़ 127.0.0.1 पर सुनता है और छपे हुए लिंक में एक बार इस्तेमाल होने वाली कुंजी होती है। इस साइट का Studio वही टूल है, जिसमें फ़ाइल की जगह इंपोर्ट और एक्सपोर्ट है।

कोड को अपने सिस्टम से जाँचें

link

npx tanrei audit src

आपके प्रोडक्ट का कोड पढ़ता है — स्क्रिप्ट (JS, TS, JSX), मार्कअप (HTML, Vue, Svelte, Astro) और स्टाइलशीट (CSS, Sass, Less) — और बताता है कि आपके सिस्टम में क्या नहीं है, हर एक को उसकी फ़ाइल, लाइन और कॉलम के साथ, और यह भी कि उसकी जगह क्या लिखें:

• ऐसे कंपोनेंट का एलिमेंट जो सिस्टम में नहीं है — पेज, टेम्पलेट, JSX या स्ट्रिंग में <tanrei-fab-menu>, import किया गया React रैपर, या उसे नाम देने वाला CSS सिलेक्टर — साथ में वे कंपोनेंट जो सिस्टम उसी काम के लिए देता है, वे सिस्टम जिनमें यह है, और आपकी लेयर की वह लाइन जो इसे शामिल करेगी;
• ऐसे एंट्री से import जो सिस्टम से मेल नहीं खाता — डिफ़ॉल्ट सिस्टम के प्रोडक्ट में @tanrei/web/m3-like या @tanrei/react/all — साथ में वह एंट्री जो मेल खाता है;
• लिखा हुआ variant="…" जिसे सिस्टम छोड़ देता है, साथ में वे मान जो सिस्टम देता है।

यह आपके प्रोडक्ट के सिस्टम (tanrei.json) से जाँचता है, या उससे जिसे --system बताए: m3-like जैसा शिप किया गया सिस्टम, या कोई लेयर फ़ाइल। इसे फ़ाइलें, डायरेक्टरी, या उद्धरण चिह्नों में glob ('src/**/*.{ts,tsx,html,css}') दें; डायरेक्टरी को node_modules और छिपी डायरेक्टरी के बिना पढ़ा जाता है। --format json नतीजों को डेटा के रूप में छापता है। कुछ मिलने पर यह 1 के साथ बाहर निकलता है, इसलिए इसे CI में tanrei build --check के साथ चलाया जा सकता है, और न चल पाने पर 2 के साथ। MCP सर्वर का check_usage भी यही जाँच करता है।

यह टेक्स्ट पढ़ता है, चलता हुआ पेज नहीं: कमेंट छोड़ दिए जाते हैं, पर किसी वेरिएबल में रखा variant, या टुकड़ों से जोड़ा गया टैग, दिखाई नहीं देता।

Tailwind CSS और shadcn/ui

link

outputs में "tailwind" या "shadcn" जोड़ें। दोनों फ़ाइलें सिर्फ़ Tanrei की कस्टम प्रॉपर्टी पर नामों को मैप करती हैं, इसलिए थीम, कंट्रास्ट के स्तर और लाइव डायल नीचे पहले की तरह काम करते रहते हैं।

@import "tailwindcss";
@import "@tanrei/web/tokens.css";
@import "./styles/acme.css";
@import "./styles/acme.tailwind.css"; /* bg-primary · text-on-primary · rounded-medium · p-200 · text-heading-4 */

सिस्टम साझा करना — लोगों, टूल और AI एजेंट के साथ

link

• tokens आउटपुट अपने आप में पूरा एक DTCG 2025.10 बंडल है, जिसमें एक मानक रिज़ॉल्वर है। कोई भी डिज़ाइन-टोकन टूल इसे पढ़ सकता है; जिन लेयर फ़ाइलों से यह बना, वे इसके भीतर साथ चलती हैं, और हर ग्रुप में $extensions["dev.tanrei.llm"] में एजेंट के लिए इस्तेमाल के निर्देश होते हैं।

• इसमें components.json भी होता है, यानी आपका सिस्टम जो कॉम्पोनेंट देता है: हर एक का एलिमेंट (या क्लास), उसका React नाम और वह मॉड्यूल जो उसे रजिस्टर करता है; और वे कॉम्पोनेंट जो सिस्टम में नहीं हैं, इस जानकारी के साथ कि किस लेयर ने उसे छोड़ा और उसकी जगह क्या इस्तेमाल करें। इसे पढ़ने वाला एजेंट वही कॉम्पोनेंट सुझाता है जिन्हें आपका प्रोडक्ट इस्तेमाल कर सकता है। Tanrei के साथ आने वाले हर सिस्टम की भी ऐसी एक फ़ाइल है: @tanrei/web/systems/<id>.components.json।

• @tanrei/mcp एक Model Context Protocol सर्वर है। आपकी रिपॉज़िटरी में काम कर रहा एजेंट शब्दावली में खोज सकता है, देख सकता है कि कोई मान कहाँ से आता है, सिस्टमों की तुलना कर सकता है, नतीजे के मानों के साथ किसी विस्तार का प्रस्ताव रख सकता है (Button का नया साइज़, एक स्टेप, आपका अपना टोकन), और लेयर का संपादन लिखने से पहले उसे वैलिडेट कर सकता है — और उसे नियम बता दिए जाते हैं: मान लेयर के ज़रिए बदलें, शब्दावली का विस्तार सिर्फ़ जोड़कर और तर्क के साथ करें, हर पिन किए गए मान का कारण दें, किसी थ्रेशोल्ड को कभी न छुएँ। UI के लिए वह सिस्टम के कंपोनेंट मैनिफ़ेस्ट (components manifest) और स्पेक से जवाब देता है: सिस्टम में कौन-से कंपोनेंट हैं (और जो नहीं है, उसकी जगह क्या इस्तेमाल करें), किसी कंपोनेंट के props, events और व्यवहार के नियम, और आपके कोड में कौन-से एलिमेंट, import और variant सिस्टम में नहीं हैं, वे कहाँ हैं समेत — वही जाँच जो tanrei audit करता है।

  इसे अपने प्रॉडक्ट के फ़ोल्डर में npm से रजिस्टर करें (दूसरे क्लाइंट की सेटिंग AI एजेंट के साथ Tanrei का इस्तेमाल में है):

  claude mcp add tanrei -- npx -y @tanrei/mcp

सुलभता

कंट्रास्ट के थ्रेशोल्ड और संरचना की जाँचें कॉन्स्टेंट हैं। आपकी लेयर में कोई उल्लंघन एक चेतावनी होता है, पर कभी चुपचाप नहीं गुज़रता: tanrei build उसे छापता है, वह a11y-report.json में लिखा जाता है, और हर जनरेट की गई फ़ाइल के ऊपर दर्ज होता है। मध्यम और उच्च कंट्रास्ट पर शून्य का लक्ष्य रखें — वे स्कीम इसीलिए हैं कि किसी व्यक्ति ने कंट्रास्ट माँगा है। साथ आने वाले प्रीसेट ख़ुद, हर स्कीम में, उन सिस्टमों के प्रति फ़िडेलिटी पर परखे जाते हैं जिनकी वे नक़ल करते हैं, Tanrei के सुलभता मानदंडों पर नहीं; उनके माप सिर्फ़ जानकारी हैं। किसी प्रीसेट पर बनाई गई लेयर फिर भी आपका प्रॉडक्ट है, और जो कुछ वह प्रीसेट से पाती है उस पर भी चेतावनी मिलती है।