Hallmark स्किल से AI‑जनित डिज़ाइन स्लॉप का पता, Claude Code, Cursor, Codex के लिए

सारांश

GitHub पर हाल ही में Hallmark नामक एक ओपन‑सोर्स डिज़ाइन स्किल जारी हुई है। यह टूल *AI‑जनित* डिज़ाइन को पहचान कर उन सामान्य “स्लॉपी” पैटर्न को फ़्लैग करने का दावा करता है, जो अक्सर स्वचालित रूप से बनाए गए वेब पेजों में दिखते हैं। इसे Claude Code, Cursor, Codex और OpenCode के साथ जोड़ा जा सकता है, जिससे साइट लाइव होने से पहले एक लिंट‑जैसी जाँच चलायी जा सके।

Hallmark क्या करने का वादा करता है

• AI‑स्टाइल संकेतों की पहचान जैसे सामान्य हेडिंग के ऊपर “भौंह” (eyebrow), ट्रैक्ड‑कैपिटल लेबल, हेडलाइन में एक ही रंग का शब्द, खाली फ्रेम, व्यूपोर्ट से बाहर हीरो इमेज, और हर पेज के अंत में प्लेसहोल्डर ई‑मेल साइन‑अप।
• 50 “थीम” का कैटलॉग उपलब्ध है। प्रत्येक थीम एक सामग्री (पेपर, टाइप, रंग, बनावट) के साथ एक रेंडर की हुई स्क्रीनशॉट रखती है। बिल्ड प्रक्रिया प्रोजेक्ट के उद्देश्य (बुकिंग पेज, शॉप, न्यूज़लेटर आदि) के अनुसार एक थीम चुनती है।
• फ़्रेश‑कंटेक्स्ट रिव्यूअर पेज को वास्तविक ब्राउज़र में रेंडर कर, आठ विभिन्न व्यूपोर्ट चौड़ाइयों पर जाँच करता है और स्लॉप की रिपोर्ट देता है।
• कस्टम प्रॉम्प्ट मोड उपयोगकर्ता को केवल प्राकृतिक भाषा में निर्देश देकर पेज बनाने की सुविधा देता है, जबकि वही anti‑slop नियम लागू रहते हैं।
• रीडिज़ाइन और ऑडिट मोड: `/hallmark redesign` मौजूदा कंटेंट और वायरिंग को बरकरार रखते हुए लेआउट बदलता है; `/hallmark audit` केवल समस्याओं की रिपोर्ट देता है।

रिपॉज़िटरी README से पुष्टि किए गए तकनीकी विवरण

• स्किल npm पैकेज के रूप में वितरित होती है; Node 18+ आवश्यक है और पूर्ण ब्राउज़र जाँच के लिए puppeteer‑core तथा Chrome बाइनरी की जरूरत पड़ती है।
• सभी उत्पन्न पेज स्वतंत्र HTML + CSS फ़ाइलें होते हैं, जिनके पहले CSS टिप्पणी में निर्माण के निर्णयों का रिकॉर्ड रहता है।
• Hallmark 755 खुले‑लाइसेंस वाले फ़ोटो (Wikimedia Commons से) का उपयोग करता है; लाइसेंस (CC0, CC BY, CC BY‑SA) पेज पर स्पष्ट रूप से दिखाए जाते हैं।
• इंस्टॉल कमांड का उदाहरण:

``` npx skills add nutlope/hallmark -g --agent claude-code ``` या Claude Code के मार्केटप्लेस से प्लगइन जोड़कर।

• लिंट स्क्रिप्ट `sloplint.mjs` को मैन्युअली चलाया जा सकता है (`node scripts/sloplint.mjs --render`) ताकि आठ‑व्यूपोर्ट रेंडर रिपोर्ट देखी जा सके।

डेवलपर्स के लिए व्यावहारिक प्रभाव

• क्वालिटी गेट: AI‑सहायता प्राप्त कोड जेनरेशन पर निर्भर टीमें Hallmark को स्वचालित गेट के रूप में जोड़ कर दृश्य‑स्लॉप को फ़िल्टर कर सकते हैं।
• डिज़ाइन स्थिरता: निर्धारित थीम्स का उपयोग करके प्रोजेक्ट्स बिना हर बार स्टाइल हाथ से बनाये एक समान विज़ुअल भाषा बनाए रख सकते हैं।
• तेज़ प्रोटोटाइपिंग: कस्टम‑प्रॉम्प्ट मोड में “एक योग क्लास बुकिंग पेज बनाओ” जैसे निर्देश से तुरंत तैयार HTML फ़ाइल मिलती है, जो anti‑slop नियमों का पालन करती है।
• ऑडिट ट्रेल: HTML टिप्पणी में मौजूद मेटाडेटा एक हल्का ऑडिट लॉग प्रदान करता है, जो अनुपालन या डिज़ाइन रिव्यू में मददगार है।

दावों की पुष्टि कैसे करें

1. रिपॉज़िटरी क्लोन करें (`git clone https://github.com/nutlope/hallmark`)।
2. टेस्ट सूट चलाएँ (यदि `npm test` उपलब्ध हो) ताकि लिंट जाँच काम कर रही हो।
3. डिफ़ॉल्ट थीम से एक पेज जेनरेट करें और HTML टिप्पणी में निर्णय स्टैम्प देखें।
4. `/hallmark redesign` को मौजूदा साइट पर चलाकर पहले‑और‑बाद तुलना करें, यह सुनिश्चित करने के लिए कि कंटेंट बरकरार है।
5. फ़ोटो क्रेडिट को पेज पर जाँचें कि Wikimedia लाइसेंस सही दिख रहे हैं या नहीं।

अनिश्चित बिंदु / खुले प्रश्न

• README में प्रदर्शन आँकड़े नहीं दिए गए हैं; औसत रेंडर समय या CPU उपयोग कितना है, यह स्पष्ट नहीं।
• “फ़्रेश‑कंटेक्स्ट रिव्यूअर” की आंतरिक कार्यप्रणाली (रूल‑बेस्ड या छोटा मॉडल) प्रकाशित नहीं हुई।
• अब तक कोई थर्ड‑पार्टी ऑडिट या उपयोगकर्ता अध्ययन उपलब्ध नहीं है जो anti‑slop पहचान की प्रभावशीलता को प्रमाणित करे।

शुरू करने के कदम

डेवलपर्स npm के माध्यम से Hallmark को ग्लोबली या प्रोजेक्ट‑लेवल पर इंस्टॉल कर सकते हैं, फिर इसे Claude Code, Cursor, Codex या OpenCode एजेंट के साथ उपयोग कर सकते हैं। टूल स्थानीय डेव सर्वर, किसी URL या स्थैतिक फ़ाइल पर काम करता है, जिससे प्रोटोटाइप से लेकर प्रोडक्शन तक लचीलापन मिलता है।

--- *यह लेख Hallmark स्किल के सार्वजनिक GitHub रिपॉज़िटरी पर आधारित है। कोई स्वतंत्र परीक्षण नहीं किया गया है।*