स्टाइलिंग और थीमिंग
प्रॉम्प्ट से रंग, अंतराल और डार्क मोड तय करें।
स्टाइलिंग और थीमिंग, CoddyKit पर वाइब कोडिंग का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह वाइब कोडिंग सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। वाइब कोडिंग पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
'काम करता है' से 'वाह' तक
आप कुछ ही सेकंड में काम करने वाला UI बना सकते हैं — लेकिन साधारण और बेहतर ढंग से सँवारे गए ऐप में अंतर स्टाइलिंग से आता है: रंग, अंतराल, टाइपोग्राफी और एकसार थीम।
इस पाठ में आप प्रॉम्प्ट से इन सभी को नियंत्रित करना, दोबारा इस्तेमाल करने योग्य थीम तैयार करना और आकर्षक डार्क मोड जोड़ना सीखेंगे — यदि आप न चाहें तो रंग चुनने वाले उपकरण को छुए बिना।
थीम एक साझा नुस्खा है
थीम डिज़ाइन संबंधी कुछ फ़ैसलों का छोटा समूह है — आपके रंग, फ़ॉन्ट और अंतराल — जिसे एक बार परिभाषित करके हर जगह दोबारा इस्तेमाल किया जाता है। थीम बदलने पर पूरा ऐप बदल जाता है।
AI से डिज़ाइन टोकन तैयार करने को कहें: 'मुख्य रंग' या 'बड़ा अंतराल' जैसे नामित मान, जिनका संदर्भ घटक लेते हैं, बजाय इसके कि मान सीधे लिखे जाएँ।
"Set up a theme with design tokens: a primary color, a secondary
color, a neutral grey scale, a base font, and consistent spacing
steps (4, 8, 16, 24, 32px). Make all my components use these tokens
instead of hard-coded values."प्रॉम्प्ट से रंग-पैलेट चुनना
आपको रंग सिद्धांत जानने की ज़रूरत नहीं है। किसी एहसास का वर्णन करें और AI को पैलेट सुझाने दें, फिर उसमें बदलाव करें।
एक मुख्य रंग (आपका ब्रांड), एक उभार रंग (विशेष रूप से दिखाने के लिए) और तटस्थ रंग (पृष्ठभूमि और पाठ के लिए) माँगें। वास्तविक हेक्स कोड भी माँगें, ताकि आप उन्हें निश्चित कर सकें।
"Suggest a color palette for a healthy-eating app: fresh, calm,
and trustworthy. Give me a primary, an accent, and 5 neutral greys,
as hex codes. Then apply them across all my components."अंतराल: 'साफ़-सुथरे' डिज़ाइन का रहस्य
अधिकांश शुरुआती UI बहुत भरे हुए लगते हैं। इसका समाधान एकसमान अंतराल और खाली जगह है। डिज़ाइनर अंतराल का पैमाना इस्तेमाल करते हैं (4 या 8px के गुणज), ताकि दूरियाँ सोच-समझकर रखी हुई लगें।
अगर कुछ 'ठीक नहीं' लग रहा हो, तो आमतौर पर कारण अंतराल होता है। बस कहें, "थोड़ी और खुली जगह दें," और AI समझ जाएगा कि क्या करना है।
"Increase the whitespace throughout the page. Use a consistent
8px spacing scale. Add more padding inside cards and more gap
between sections so it feels calm and uncluttered."ऐसी टाइपोग्राफी जो डिज़ाइन की हुई लगे
टाइपोग्राफी व्यक्तित्व का बहुत बड़ा हिस्सा व्यक्त करती है। टाइप स्केल (h1, h2, मुख्य पाठ और कैप्शन के स्पष्ट आकार) तथा पढ़ने योग्य पंक्ति-ऊँचाई माँगें।
विशिष्ट शीर्षक फ़ॉन्ट को साफ़ मुख्य-पाठ फ़ॉन्ट के साथ मिलाने से डिज़ाइन तुरंत बेहतर दिखने लगता है।
"Set up typography: use 'Inter' for body text and a slightly bolder
geometric font for headings. Define a clear scale (h1 48px, h2 32px,
h3 24px, body 16px) with comfortable line height. Apply it everywhere."Tailwind से परिचय
अधिकांश AI UI टूल Tailwind CSS से स्टाइल करते हैं — उपयोगिता वर्ग जैसे p-4 (आंतरिक रिक्ति) या text-lg (बड़ा पाठ), जो सीधे मार्कअप में लिखे जाते हैं।
आप इन्हें अक्सर हाथ से नहीं लिखेंगे, लेकिन इन्हें पहचानने से आप सटीक प्रतिक्रिया दे पाएँगे, जैसे "यहाँ पाठ का आकार बड़ा करें।"
<button class="px-4 py-2 rounded-lg bg-blue-600
text-white text-sm font-semibold hover:bg-blue-700">
Save
</button>डार्क मोड जोड़ना
आधुनिक ऐप में डार्क मोड अपेक्षित होता है। सही तरीका है कि अपनी थीम के हल्के और गहरे संस्करण परिभाषित करें, फिर टॉगल से उनके बीच स्विच करें।
AI से रंगों को सीधे लिखे हुए मानों के बजाय थीम के अनुसार काम करने वाला बनाने को कहें, ताकि डार्क मोड हर जगह अपने-आप काम करे।
"Add dark mode. Create a dark version of my color tokens: dark
backgrounds, light text, and slightly muted accents. Add a toggle
in the navbar that switches themes, and remember the user's choice."थीम टॉगल का अनुकरण
पर्दे के पीछे थीम बदलना केवल अलग-अलग रंग मानों के समूह में से चयन करना है। यहाँ उस विचार का छोटा JavaScript मॉडल है — इसे चलाकर देखें कि टॉगल थीम ऑब्जेक्ट में से रंग कैसे चुनता है।
const themes = {
light: { bg: '#ffffff', text: '#111111' },
dark: { bg: '#111111', text: '#f5f5f5' }
};
let current = 'light';
function toggle() {
current = current === 'light' ? 'dark' : 'light';
const t = themes[current];
console.log(current + ' -> bg ' + t.bg + ', text ' + t.text);
}
toggle();
toggle();चतुराई से अधिक महत्वपूर्ण है एकरूपता
सुंदर ऐप वह नहीं होता जिसमें सबसे शानदार बटन हो — सुंदर ऐप वह है जिसमें हर चीज़ एक-दूसरे से मेल खाती हो। कोनों की समान गोलाई, छाया की समान शैली, वही उभार रंग और अंतराल की वही लय।
जब आपको असंगति दिखे, तो AI से एक ही बार में पूरे ऐप में उसे एकसार करने को कहें।
"Audit my app for visual inconsistencies. Make all corner radii,
shadows, button styles, and spacing consistent. Use my theme tokens
everywhere and remove any one-off hard-coded colors."बारीक सुधार: गति और स्थितियाँ
छोटी बातें गुणवत्ता का संकेत देती हैं: हल्के हॉवर प्रभाव, सहज संक्रमण और सुलभता के लिए स्पष्ट फ़ोकस स्थितियाँ। हल्का एनीमेशन माँगें — इसे कभी ज़रूरत से ज़्यादा न करें।
ये अंतिम सुधार बनाए गए UI को हाथ से तैयार किया हुआ महसूस कराते हैं।
"Add subtle polish: smooth 150ms transitions on hover, a gentle
lift on cards, and clear keyboard focus rings on buttons and inputs.
Keep animations tasteful and quick, not flashy."अभ्यास: दो प्रॉम्प्ट में नया रूप दें
अपने बनाए किसी भी UI को केवल पैलेट और फ़ॉन्ट बदलकर पूरी तरह नई पहचान दें। देखें कि थीम-आधारित डिज़ाइन तुरंत कैसे बदल जाता है। हाथ से स्टाइल करने के बजाय टोकन से स्टाइल करने की यही शक्ति है।
Prompt 1: "Switch the theme to a warm sunset palette:
deep orange primary, soft pink accent, cream backgrounds."
Prompt 2: "Change headings to a bold rounded font and add
dark mode with a matching warm-dark variant."त्वरित जाँच
हर घटक में सीधे लिखे हुए रंगों से स्टाइल करने के बजाय डिज़ाइन टोकन वाली थीम तैयार करना बेहतर क्यों है?
पुनरावलोकन: प्रॉम्प्ट से सुंदर डिज़ाइन
आपने शब्दों की मदद से ऐप का रूप-रंग नियंत्रित करना सीखा: डिज़ाइन टोकन से थीम परिभाषित करना, भाव के अनुसार रंग-पैलेट चुनना, सुसंगत अंतराल से ‘भरे-भरे’ रूप को ठीक करना, टाइप स्केल तय करना और रंगों को थीम-अनुकूल बनाकर डार्क मोड जोड़ना।
हल्की-सी गति से इसे निखारें और सबसे बढ़कर संगति बनाए रखें। अगला पाठ: अपने सुंदर डिज़ाइन को फ़ोन और डेस्कटॉप, दोनों पर शानदार दिखाना — प्रॉम्प्ट के ज़रिए अनुक्रियाशील डिज़ाइन।
एआई शिक्षक के साथ JavaScript सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 25
- पाठ
- 100
अक्सर पूछे जाने वाले प्रश्न
क्या “स्टाइलिंग और थीमिंग” पाठ निःशुल्क है?
हाँ — वाइब कोडिंग अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “स्टाइलिंग और थीमिंग” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। वाइब कोडिंग पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“स्टाइलिंग और थीमिंग” में मैं क्या सीखूँगा?
प्रॉम्प्ट से रंग, अंतराल और डार्क मोड तय करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ वाइब कोडिंग का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या वाइब कोडिंग शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर वाइब कोडिंग शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।
“स्टाइलिंग और थीमिंग” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस वाइब कोडिंग पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर वाइब कोडिंग पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- UI का शब्दों में वर्णन करना
- घटक बनाना
- स्टाइलिंग और थीमिंग
- इसे अनुक्रियाशील बनाना