uxskill
Star on GitHub
Language
English 简体中文 繁體中文 日本語 한국어 हिन्दी Bahasa Indonesia Tiếng Việt ไทย العربية Español Français Deutsch Português Русский Türkçe Italiano
Blog · हिन्दी · 2026-05-28

# AI कोडिंग के लिए डिज़ाइन नियम, हर AI एक जैसी UI क्यों बनाता है।

Claude Code, Cursor, Cline, Windsurf, हर AI कोडिंग टूल वही डिफ़ॉल्ट चुनता है। 90px पर Inter, बैंगनी-नीला ग्रेडिएंट, तीन एक जैसे कार्ड। मॉडल बदलिए, आउटपुट लगभग वैसा ही दिखता है। ux-skill एक खुला-स्रोत Python इंजन है जो 145 निर्धारित (deterministic) नियमों के साथ इन डिफ़ॉल्ट्स को CI में रोकता है। कोई LLM कॉल नहीं, कोई टोकन बजट नहीं।

ux-skill टीम · 9 मिनट पढ़ाई · MIT लाइसेंस

## हर AI एक जैसी UI क्यों बनाता है

बात मॉडल की क्षमता की नहीं है। Claude Sonnet, GPT-4, DeepSeek, Gemini, हर बड़ा मॉडल बहुत अच्छी UI लिख सकता है अगर सही ब्रीफ़ दिया जाए। समस्या यह है कि कोई ब्रीफ़ नहीं दिया जाता। "एक SaaS लैंडिंग पेज बनाओ" लिखने पर मॉडल अपने प्रशिक्षण डेटा के औसत पर लौटता है, और वह औसत startup-landing-page-2023 जैसा दिखता है।

तीन ताकतें मिलकर इस फ़िंगरप्रिंट को मज़बूत करती हैं। पहली, मॉडल का ट्रेनिंग कॉर्पस, Vercel, Linear, Stripe, Tailwind UI जैसे लोकप्रिय सोर्स से भारी मात्रा में डेटा है, और वह सब एक ही सौंदर्य-शास्त्र साझा करते हैं। दूसरी, यूज़र का प्रॉम्प्ट छोटा होता है, "एक हीरो सेक्शन बनाओ" से कुछ भी विशिष्ट नहीं निकलता। तीसरी, कोई गेटिंग नहीं, CI में कुछ नहीं रोकता जब मॉडल वही पुराना ग्रेडिएंट निकाल दे।

इन तीनों में से दो को ठीक करना मुश्किल है, मॉडल का ट्रेनिंग कॉर्पस आप नहीं बदल सकते, और हर बार 500-शब्द का प्रॉम्प्ट लिखने का अनुशासन टीम भर में नहीं बनता। तीसरी, गेटिंग, एक मशीन-स्तर की समस्या है। और वही ux-skill हल करती है।

## आठ डिफ़ॉल्ट्स जो हर टूल में दिखते हैं

हमने आठ अलग AI कोडिंग टूल्स (Cursor, Claude Code, Windsurf, GitHub Copilot, Cline, Continue, Codex, Aider) पर एक ही ब्रीफ़ चलाया, "गहरे थीम वाला, संपादकीय आवाज़, fintech हीरो"। आठ में से सात ने इनमें से कम से कम पाँच डिफ़ॉल्ट्स प्रोड्यूस किए:

1. डिस्प्ले फ़ॉन्ट के रूप में Inter: स्क्रीन-पठनीयता के लिए ट्यून किया हुआ बॉडी फ़ॉन्ट, 90px पर हेडलाइन के रूप में लगाया गया।
2. बैंगनी-से-नीला ग्रेडिएंट: वही दो हेक्स कोड हर जगह, SaaS-startup-AI आउटपुट का लगभग सार्वभौमिक चिह्न।
3. एक पंक्ति में तीन समान कार्ड: फ़ीचर्स ब्लॉक, gap-6, हर बार आइकन-शीर्षक-पैराग्राफ।
4. सामान्य CTA कॉपी: "Get started", "Learn more", "Click here"। `generic-cta-text` नियम पकड़ता है।
5. हर बच्चे पर fade-in-up: हीरो, फ़ीचर्स, फ़ुटर, सबकी एक ही मोशन प्रोफ़ाइल।
6. विज्ञापनी क्रिया-शब्द: हेडलाइन में भरने वाले फिलर वर्ब्स। `filler-marketing-verbs` नियम पकड़ता है।
7. प्लेसहोल्डर नाम: सामान्य डमी नाम और स्टब टेक्स्ट जो स्टेजिंग से लीक होकर प्रोडक्शन तक पहुँच जाते हैं।
8. केंद्र-में-सब-कुछ अक्ष: विषय-वस्तु जो भी हो, सममित लेआउट; कोई asymmetric या bento कंपोज़िशन नहीं।

पूरी सूची 35 AI डिज़ाइन फ़िंगरप्रिंट पोस्ट में है, हर नियम के साथ डिटेक्शन रेगेक्स, "क्यों" और "फ़िक्स"। जो दोहराने लायक बात यहाँ है: IDE बदलने से आउटपुट महत्वपूर्ण रूप से नहीं बदलता। ग्रामर बदलने से बदलता है।

## ux-skill का जवाब, एक निर्धारित परत

ux-skill एक खुला-स्रोत (MIT) Python पैकेज है, जो तीन इंस्टॉल पथों के माध्यम से 17 IDEs तक पहुँचता है। एक ही इंजन, एक ही 998-एंट्री कैटलॉग, एक ही 145-नियम लिंटर। तीनों तरीके:

1. Claude Code प्लगइन: `/plugin marketplace add Laith0003/ux-skill; /plugin install ux@ux-skill`
2. Python पैकेज: `pip install uxskill`, किसी भी IDE में जो टर्मिनल में shell-out कर सके
3. MCP सर्वर: `npx uxskill@alpha mcp`, किसी भी MCP क्लाइंट में: Cursor, Windsurf, Claude Desktop, Continue, Cline, Zed

इंजन तीन काम करता है। एक, `uxskill discover` चलाकर 10-फ़ील्ड ब्रीफ़ बनवाता है (पीछे लौटने की कोई जगह नहीं, सुधार-प्रोटोकॉल बाँधा हुआ है)। दो, `uxskill recommend` चलाकर 998 एंट्रीज़ पर पाँच समानांतर खोज करता है और एक solved डिज़ाइन सिस्टम लौटाता है (पैलेट, टाइप पेयर, मोशन, स्पेसिंग ग्रिड, कंपोनेंट सूची)। तीन, `uxskill lint` चलाकर 120 रेगेक्स नियमों के साथ कोड जाँचता है। एक्जिट कोड 0 अगर साफ़ है, 1 अगर threshold पर कोई finding है।

## एक असली नियम, Inter as display

यह 145 में से एक नियम है, सीधे `data/anti-patterns.json` से। severity `high`।

    // 145 में से नियम #1
    {
      "id": "inter-as-display",
      "severity": "high",
      "category": "Typography",
      "detection": {
        "type": "regex",
        "pattern": "font-family:\s*['\"]?Inter['\"]?[^;}]*[;}][^{]*(?:font-size:\s*([4-9]\d|\d{3,})px|\btext-(5xl|6xl|7xl|8xl|9xl)\b)"
      },
      "why": "Inter एक बॉडी फ़ॉन्ट है जो छोटे साइज़ों पर पठनीयता के लिए ट्यून है;
              डिस्प्ले के रूप में लगाया जाए तो startup-landing फ़िंगरप्रिंट दिखता है।",
      "fix": "Inter (बॉडी) के साथ एक विशिष्ट डिस्प्ले फेस जोड़ें:
              Geist, Satoshi, Cabinet Grotesk, General Sans, Outfit।"
    }

रेगेक्स `font-family: Inter` को खोजता है और उसी ब्लॉक में 40px+ font-size या Tailwind `text-5xl` (या बड़ा) क्लास होने पर fire करता है। `scope` array यह सीमित करती है कि रेगेक्स किन फ़ाइलों पर चले। एक ही नियम CSS, SCSS, TSX, JSX, Vue, Astro में काम करता है।

## CI में चलाना, GitHub Actions

एक workflow फ़ाइल, हर PR push पर लिंटर ब्लॉकर बन जाता है। पूरे रिपो पर औसत run 380ms (cold), 90ms (warm)। कोई LLM कॉल नहीं।

    # .github/workflows/ux-lint.yml
    name: ux-lint

    on:
      pull_request:
        paths:
          - '**/*.{tsx,jsx,vue,css,scss,html,astro,blade}'

    jobs:
      lint:
        runs-on: ubuntu-latest
        steps:
          - uses: actions/checkout@v4
          - uses: actions/setup-python@v5
            with: { python-version: '3.11' }
          - run: pip install uxskill
          - run: uxskill lint --threshold high

## 998 एंट्रीज़ के अंदर क्या है

लेन | संख्या | सामग्री
--- | --- | ---
उद्योग | 161 | लॉजिस्टिक्स से लेगलटेक तक; हर एक का डिफ़ॉल्ट टोन प्रोफ़ाइल और पैटर्न सेट।
शैलियाँ | 50 | संपादकीय सिनेमा, swiss minimal, brutalist warm, neo-pop आदि।
पैलेट | 161 | रंग प्रणालियाँ: hue, saturation, contrast, dark-mode।
टाइप पेयर | 57 | डिस्प्ले + बॉडी कॉम्बिनेशन, स्क्रीन-रेंडरिंग के लिए परखे हुए।
मोशन प्रिसेट्स | 57 | Framer Motion, GSAP, CSS: `prefers-reduced-motion` शाखाओं के साथ।
कंपोनेंट | 182 | कार्ड से डायलॉग से डैशबोर्ड तक: कंपोज़िशन नियमों के साथ।
ब्रांड स्पेक्स | 110 | Stripe, Airbnb, Vercel जैसे काम कर रहे ब्रांडों का grammar।
एंटी-पैटर्न | 145 | लिंटर के 145 नियम। एक ही JSON, दो consumers।
अन्य | 120 | घनत्व प्रोफ़ाइल, voice register, RTL डेल्टा।
कुल | 998 | एक JSON ट्री। recommender, linter और MCP सर्वर: तीनों में।

> IDE चुनना डिज़ाइन-गुणवत्ता के लिए ग़लत प्रश्न है। हर IDE में चलने वाला grammar चुनना सही प्रश्न है।

## स्टार्स की ईमानदार तुलना

बोल्ट-ऑन श्रेणी में तीन गंभीर खुले-स्रोत प्रोजेक्ट। GitHub stars 2026-05-28 तक:

प्रोजेक्ट | Stars | recommender | linter | MCP | कैटलॉग
--- | --- | --- | --- | --- | ---
ui-ux-pro-max | 84k | हाँ | नहीं | नहीं | ~600
taste-skill | 25k | हाँ | नहीं | नहीं | ~480
ux-skill | 14 | हाँ | 145 नियम | 14 tools | 1,161

ux-skill stars में सबसे छोटा है (14), फ़ीचर सतह में सबसे बड़ा। 998 कैटलॉग एंट्रीज़, 120 रेगेक्स नियम CI में non-zero exit पर, 14-tool MCP सर्वर जो 17 IDEs तक पहुँचता है, 22 कमांड्स, 110 ब्रांड स्पेक्स, 75 टेस्ट। ui-ux-pro-max और taste-skill दोनों recommender shippe करते हैं। ux-skill recommender + linter + MCP तीनों shippe करता है। यह असममित चाल है।

ईमानदार दायरा

#### रेगेक्स taste नहीं पकड़ता, structural फ़िंगरप्रिंट पकड़ता है।

लिंटर कभी नहीं कहेगा "यह सेक्शन ग़लत लय में है" या "यह कॉपी ठंडी पढ़ती है"। उसके लिए इंसान या मॉडल चाहिए। पर रेगेक्स वह सब पकड़ता है जिसका कोई literal token, pattern या shape हो, और AI डिफ़ॉल्ट्स का अधिकांश ऐसा ही है, क्योंकि मॉडल बार-बार एक ही artifact तक पहुँचता है।

हम जानबूझकर CI में LLM-judge नहीं चलाते। अगर आपकी कसौटी है "लगे जैसे डिज़ाइनर ने बनाया", वह कोड रिव्यू है, लिंट नहीं। ux-skill ने taste-pass के लिए `/ux-critique` ship किया है, पर वह आपके IDE में चलता है, CI में नहीं।

## आगे क्या पढ़ें

अगर आप एक और पोस्ट पढ़ने को तैयार हैं, रेगेक्स लिंटर पोस्ट में पूरा 145-नियम मेनिफ़ेस्ट + एक असली Next.js हीरो पर before/after है। अगर सूची चाहिए, 35 AI डिज़ाइन फ़िंगरप्रिंट पोस्ट पूरी taxonomy है, हर नियम के साथ डिटेक्शन रेगेक्स।

## संबंधित पठन

- Vibe coding asli hai, par AI vahi defaults bhejta hai, अंग्रेज़ी पोस्ट जिसमें असली डिफ़ॉल्ट्स का व्यवहार दिखाया गया है।
- 35 AI design fingerprints, पूरी taxonomy
- Regex linter, 145 नियम CI में
- Anti-AI-slop tools, honest ranking

इंस्टॉल करें

## एक पैकेज। तीन पथ। 145 नियम।

Recommender, linter, MCP सर्वर, 22 कमांड्स, 110 ब्रांड स्पेक्स, सब एक साथ। लिंटर sub-second, बाक़ी on demand। MIT लाइसेंस, कोई टेलीमेट्री, कोई account नहीं।

$ /plugin marketplace add Laith0003/ux-skill
$ /plugin install ux@ux-skill
· या ·
$ pip install uxskill
· या ·
$ npx uxskill@alpha init

## Related reads

- Vibe coding + ux-skill
- 35 AI design fingerprints
- Regex linter for AI coding
- Anti-AI-slop tools for Claude Code