शब्दों से स्टाइल करें: इसे खूबसूरत बनाएँ
शब्दों से स्टाइल करें: इसे खूबसूरत बनाएँ
यह वह राज़ है जो आपको कोई नहीं बताता: vibe coding में आप कोड से स्टाइल नहीं करते — आप विशेषणों से स्टाइल करते हैं।
आपको CSS प्रॉपर्टीज़ रटनी नहीं हैं। आप वह लुक बयान करते हैं जो आपको चाहिए, ठीक वैसे जैसे किसी डिज़ाइनर को ब्रीफ़ देते हैं: एहसासों, विशेषणों और रेफ़रेंस के साथ। "डार्क, ग्लासी, प्रीमियम — किसी म्यूज़िक ऐप जैसा।" AI उस vibe को क्लासेस में बदल देता है।
एक असली उदाहरण देखिए।
आप कहते हैं:
"मेरे प्रोफ़ाइल कार्ड को डार्क और ग्लासी बनाओ, नरम गोल कोनों और प्रीमियम फ़ील के साथ — Spotify की now-playing स्क्रीन जैसा।"
AI यह बनाता है:
<body class="bg-gradient-to-br from-slate-950 to-indigo-950 text-white">
<div class="bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl p-8">
हर विशेषण एक क्लास बन गया:
- डार्क →
bg-gradient-to-br from-slate-950 to-indigo-950 - ग्लासी →
bg-white/10 backdrop-blur-md border border-white/20 - प्रीमियम, नरम कोने →
rounded-2xl p-8
बस यही पूरी ट्रिक है: विशेषण अंदर, क्लासेस बाहर। आपके रेफ़रेंस जितने बेहतर होंगे ("किसी म्यूज़िक ऐप जैसा", "किसी बैंक के लैंडिंग पेज जैसा", "किसी नियॉन आर्केड जैसा"), नतीजा उतना ही बेहतर होगा।
नीचे पिछले पाठ वाला आपका प्रोफ़ाइल कार्ड है — सारी स्टाइलिंग हटाकर। सादा सफ़ेद बैकग्राउंड, डिफ़ॉल्ट टेक्स्ट, ज़ीरो vibe। आपका मिशन: एक-एक करके लुक बयान करते हुए इसे फिर से ज़िंदा करना।
निर्देश
<body> को एक डार्क ग्रेडिएंट बैकग्राउंड दें — पहले खुद से vibe बयान करें: डार्क, गहरा, प्रीमियम। फिर क्लासेस जोड़ें
संकेत: आज़माएँ: `<body class="bg-gradient-to-br from-slate-950 to-indigo-950 text-white min-h-screen flex items-center justify-center p-8">`
कार्ड कंटेनर को स्टाइल करें: फ़्रॉस्टेड ग्लास, नरम गोल कोने, खुली-खुली पैडिंग — वही 'ग्लासी, प्रीमियम' लुक
CTA लिंक को एक ग्रेडिएंट बटन में बदलें — बोल्ड, रंगीन, जिसे नज़रअंदाज़ करना नामुमकिन हो
एक hover इफ़ेक्ट जोड़ें ताकि माउस छूते ही बटन रिएक्ट करे — छोटी-छोटी डिटेल्स ही चीज़ों में जान डालती हैं
आपका कोड
इस स्टेप के लिए आप जो बनाना चाहते हैं उसे बताएं और मैं कोड लिख दूंगा — फिर इसे अपने एडिटर में डालने के लिए Apply पर क्लिक करें। यह स्टेप: <body> को एक डार्क ग्रेडिएंट बैकग्राउंड दें — पहले खुद से vibe बयान करें: डार्क, गहरा, प्रीमियम। फिर क्लासेस जोड़ें