12 मुफ्त Skills जो AI Slop Design को ठीक करती हैं

Inter font। Purple gradient। Drop shadows वाले rounded cards। जब मैंने पहली बार vibe coding शुरू की, तो असली रुकावट कभी code नहीं थी। वो design थी। हर AI-generated interface ऐसा लगता था जैसे एक ही template factory से निकला हो।

एक अकेली SKILL.md फाइल agent के design सोचने का तरीका बदल देती है। पिछले कुछ महीनों में मैंने दर्जनों design skills install करके टेस्ट कीं। ज़्यादातर एक हफ्ते के अंदर हटा दी गईं क्योंकि वो या तो एक-दूसरे से conflict करती थीं या मामूली सुधार देती थीं। नीचे दी गई 12 वो हैं जो असल में टिकी रहीं।

कहां से शुरू करें

Anthropic का official frontend-design plugin baseline है। यह Claude Code के साथ आता है और layout, typography, और color choices के लिए बुनियादी नियम तय करता है। इसके बिना, agent हर बार वही Inter + purple gradient combo पर default करता है। इसे floor समझें, ceiling नहीं।

Impeccable official plugin के ऊपर 20 slash commands जोड़ता है: /polish, /audit, /distill, /bolder, /quieter, और बहुत कुछ। हर command एक specific design concern को target करता है। /audit accessibility, theming, और responsive breakpoints पर एक व्यापक quality check चलाता है। /distill किसी component को उसके essentials तक strip कर देता है। मैं हर deployment से पहले final pass के तौर पर /polish इस्तेमाल करता हूं।

Design intensity को control करना

Taste Skill अलग approach अपनाता है। Slash commands की जगह, यह तीन numeric variables जैसे DESIGN_VARIANCE इस्तेमाल करता है ताकि agent defaults से कितना deviate करे वो control किया जा सके। Conservative corporate interfaces के लिए इसे low रखें। Experimental landing pages के लिए बढ़ा दें। Granularity काम की है, हालांकि sweet spot ढूंढने में कुछ trial and error लगता है। High variance पर मेरी पहली कोशिश में कुछ ऐसा बना जो 2006 के MySpace page जैसा दिख रहा था।

Icons और visual assets

Better Icons 150+ icon collections को connect करता है जिनमें 200,000 से ज़्यादा icons हैं। आप keyword से search करते हैं, और यह SVG को सीधे आपके project में sync कर देता है। इससे पहले, मैं पांच अलग-अलग sites से manually icons download करता था। Search quality collection के हिसाब से अलग-अलग होती है, लेकिन common UI icons के लिए यह जल्दी सही match ढूंढ लेता है।

Component-level design intelligence

UI Design Brain में पांच design styles में 60+ components के लिए design principles हैं। यह agent को बताता है कि minimalist system में modal कैसा behave करे बनाम glassmorphic system में। इस स्तर की specificity मायने रखती है क्योंकि generic “अच्छा दिखाओ” instructions generic results देते हैं।

UI UX Pro Max और भी आगे जाता है: 50+ design styles, 97 color palette combinations, 57 font pairings, और 160 से ज़्यादा product types के लिए industry-specific reasoning। Scope महत्वाकांक्षी है। ईमानदारी से कहूं तो, options की भारी संख्या generation को धीमा कर सकती है अगर आप context को constrain नहीं करते। मैं आमतौर पर style और palette explicitly set करता हूं बजाय agent को चुनने देने के।

Review और quality gates

Vercel का agent-skills में 100+ checkpoints वाला UI review ruleset शामिल है। यह spacing consistency, color contrast, interaction states, और responsive behavior evaluate करता है। Design phase के बाद इसे चलाने से ऐसी issues पकड़ में आती हैं जो laptop पर ठीक दिखती हैं लेकिन mobile पर टूट जाती हैं।

UI Skills Tailwind-specific quality checks जोड़ता है। /baseline-ui जैसे commands consistent utility class usage enforce करते हैं, और /fixing-accessibility एक focused accessibility audit चलाता है। अगर आपका stack Tailwind-based है, तो यह वो gap भरता है जो general design skills छोड़ देती हैं।

पूरे workflow की coverage

Designer Skills Collection यहां का सबसे comprehensive package है: wireframe से production तक पूरे design workflow को cover करने वाली 63 skills और 27 commands। यह opinionated है, जिसका मतलब है कि यह कभी-कभी दूसरी skills से conflict करता है। Agent तक contradictory instructions पहुंचने से बचाने के लिए मुझे कुछ overlapping rules disable करने पड़े।

Design Plugin code level पर design principles enforce करता है। Improvements suggest करने की बजाय, यह उन patterns को block करता है जो आपके configured design system का उल्लंघन करते हैं। Teams पर यह उपयोगी है जहां कई लोग एक ही agent को prompt करते हैं।

Premium look

Super Design premium typography और generous whitespace पर focus करता है। यह agent को ऐसे choices की तरफ bias करता है जो high-end feel देते हैं: बड़े font sizes, चौड़े margins, संयमित color palettes। Results काफ़ी ज़्यादा polished दिखते हैं, हालांकि content-heavy pages पर whitespace ज़रूरत से ज़्यादा हो सकता है।

Make Interfaces Feel Better specifically micro-interactions के बारे में है। Hover states, loading transitions, scroll behaviors, button feedback। ये छोटी-छोटी details वो हैं जो “ठीक दिखता है” को “अच्छा लगता है” से अलग करती हैं। इस list की किसी भी और skill की तुलना में मैंने इससे सबसे ज़्यादा perceived quality improvement देखा।

क्या काम नहीं किया

हर combination अच्छे से साथ नहीं चलता। सभी 12 एक साथ install करने से conflicting instructions बने जिसने agent को confuse कर दिया। व्यावहारिक setup यह है कि तीन या चार skills layer करें जो अलग-अलग concerns cover करती हों: एक foundational rules के लिए, एक component-level guidance के लिए, एक review के लिए, और एक आपके project में जो specific aesthetic gap हो उसके लिए।

मैंने यह भी पाया कि एक ही layer को target करने वाली skills (जैसे दो competing color palette systems) एक-दूसरे को cancel कर देती हैं। हर concern के लिए एक चुनें और उसी पर टिके रहें।

सभी 12 मुफ्त हैं। Official frontend-design plugin और Impeccable से शुरू करें, फिर जहां आपका output अभी भी generic दिखे वहां के हिसाब से और जोड़ें। और Inter को अपने font stack से हटा दें।