---
title: "आपका अपना डिज़ाइन सिस्टम"
description: "अपने प्रॉडक्ट में एक लेयर फ़ाइल रखें। एक कमांड आपके हर प्लैटफ़ॉर्म के लिए टोकन और कोड लिख देता है, एक ही पुल रिक्वेस्ट में।"
url: "https://tanrei.chnotchy.com/hi/getting-started/your-design-system/"
last_updated: 2026-10-23T21:16:42.000Z
---

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

> अपने प्रॉडक्ट में एक लेयर फ़ाइल रखें। एक कमांड आपके हर प्लैटफ़ॉर्म के लिए टोकन और कोड लिख देता है, एक ही पुल रिक्वेस्ट में।

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

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

## इंस्टॉल करें

### npm से

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

```sh
npm install --save-dev @tanrei/cli
```

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

### सोर्स से

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

```sh
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
```

```sh
# अपने प्रॉडक्ट में: उस फ़ोल्डर का पाथ जिसमें पैकेज लिखे गए
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`, अपने प्रॉडक्ट के फ़ोल्डर में चलाकर।

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

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

   ```bash
   npx tanrei init acme --extends tanrei
   ```

   इससे `design/acme.system.json` और `tanrei.json` लिखी जाती हैं। स्लाइडर ज़्यादा पसंद हैं? तो लेयर को [Theme Studio](https://tanrei.chnotchy.com/hi/foundations/theme-studio/) में गढ़ें और उसे डाउनलोड कर लें।

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

   ```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. **बिल्ड करें।**

   ```bash
   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}>` |

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

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

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

लेयर किसी मान के साथ चार काम कर सकती है — डायल सेट करना, टोकन को स्केल करना, एलियास को दूसरी जगह मोड़ना, कारण के साथ मान को पिन करना। इनके लिए, ब्रैंड के रंग या किसी क्विज़ के “सही” और “ग़लत” जैसे पैलेट घोषित करने के लिए, और मान काफ़ी न हों तो [टोकन जोड़ने](https://tanrei.chnotchy.com/hi/foundations/design-systems/#%E0%A4%B6%E0%A4%AC%E0%A5%8D%E0%A4%A6%E0%A4%BE%E0%A4%B5%E0%A4%B2%E0%A5%80-%E0%A4%AE%E0%A5%87%E0%A4%82-%E0%A4%9C%E0%A5%8B%E0%A4%A1%E0%A4%BC%E0%A4%A8%E0%A4%BE) के लिए [डिज़ाइन सिस्टम और कस्टमाइज़ेशन](https://tanrei.chnotchy.com/hi/foundations/design-systems/) देखें।

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

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

| आप चाहते हैं | आप इस्तेमाल करते हैं |
| --- | --- |
| झटपट सेटअप | **Theme Studio → बाईं ओर की सूची**: रूप-रंग की नौ पंक्तियाँ (ब्रैंड का रंग, ग्रे, टाइपफ़ेस, साइज़, कोने, कॉर्नर स्मूदिंग, आइकन, दबाने पर फ़ीडबैक, फ़ोकस), हर एक बस एक क्लिक दूर, लॉक और शफ़ल के साथ |
| ग्रुप को ट्यून करना | **Studio → सूची में “और”**: आठों डायल, सारे पैलेट, हर कंपोनेंट, हर व्यवहार |
| GUI में एक-एक टोकन को छूना | **Studio → इंस्पेक्ट → टोकन**: पूरी शब्दावली में खोजें; हर टोकन सिर्फ़ वही संपादन पेश करता है जो उसके लिए मान्य हैं, और दिखाता है कि कौन-से टोकन उसके पीछे चलते हैं |
| सोर्स संपादित करना | **Studio → इंस्पेक्ट → सोर्स**, या आपका एडिटर: JSON, जिसे स्कीमा और इंजन दोनों जाँचते हैं |
| ऐसा टोकन जो मौजूद नहीं है | [उसे जोड़ें](https://tanrei.chnotchy.com/hi/foundations/design-systems/#%E0%A4%B6%E0%A4%AC%E0%A5%8D%E0%A4%A6%E0%A4%BE%E0%A4%B5%E0%A4%B2%E0%A5%80-%E0%A4%AE%E0%A5%87%E0%A4%82-%E0%A4%9C%E0%A5%8B%E0%A4%A1%E0%A4%BC%E0%A4%A8%E0%A4%BE): किसी सीरीज़ में एक स्टेप, एक पंक्ति में Button का नया साइज़ या वेरिएंट, या आपके अपने टोकन |

```bash
npx tanrei studio
```

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

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

```bash
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

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

```css
@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 एजेंट के साथ

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

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

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

  इसे अपने प्रॉडक्ट के फ़ोल्डर में npm से रजिस्टर करें (दूसरे क्लाइंट की सेटिंग [AI एजेंट के साथ Tanrei का इस्तेमाल](https://tanrei.chnotchy.com/hi/getting-started/ai-agents/) में है):

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

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