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 एंट्रीज़ के अंदर क्या है

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

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

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

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 करता है। यह असममित चाल है।

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

अगर आप एक और पोस्ट पढ़ने को तैयार हैं — रेगेक्स लिंटर पोस्ट में पूरा 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