मैं तुरंत हाई-क्वालिटी वायरफ्रेम बनाना चाहता हूँ।
मैंने इस बार ऐसे सभी प्रॉम्प्ट को एक गाइड में संकलित किया है।
Claude को वायरफ्रेम नियम सिखाने से आपका काफी समय बचेगा।
विषय सूची
- "स्किल" नियम के रूप में रजिस्टर करना
- कॉपी-पेस्ट प्रॉम्प्ट
- प्रत्येक नियम की व्याख्या
- मल्टी-पेज साइटों के लिए, Claude Code का उपयोग करें
"स्किल" नियम के रूप में रजिस्टर करना
जब आप प्रॉम्प्ट पेस्ट करेंगे, तो Claude स्किल के लिए एक फ़ाइल तैयार करेगा। एक बार रजिस्टर हो जाने पर, आप बस "वायरफ्रेम बनाएँ" कह सकते हैं।
- निम्नलिखित "कॉपी-पेस्ट प्रॉम्प्ट" को Claude को दें, और एक ZIP फ़ाइल बन जाएगी।
- चैट में दिखाई देने वाले "Save बटन" को दबाएँ।
इससे हर बार प्रॉम्प्ट पेस्ट करने की ज़रूरत खत्म हो जाती है।
*स्किल सुविधा Pro और Max जैसी पेड प्लान में उपलब्ध है।
कॉपी-पेस्ट प्रॉम्प्ट
Claude चैट में निम्नलिखित पेस्ट करें ताकि स्किल रजिस्ट्रेशन (नियम के रूप में याद रखने के लिए रजिस्ट्रेशन) शुरू हो सके।
बस चैट के निर्देशों का पालन करें और ✔️ Save बटन दबाएँ।
निम्नलिखित एक वायरफ्रेम प्रॉम्प्ट है। कृपया इसे एक स्किल में बदलें।
HTML में एक वायरफ्रेम बनाएँ। कृपया नीचे दिए गए सभी नियमों का पालन करें।
[लेआउट] ・ऐसा लेआउट बनाएँ जो पढ़ने में बोझिल न लगे और एक नज़र में समझ में आ जाए। ・एक परिष्कृत, शहरी और न्यूनतम लेआउट बनाएँ। ・मार्जिन और संतुलन के लिए पूरे पेज का अच्छी तरह से उपयोग करें। ・फ़ॉन्ट के लिए Noto Sans JP का उपयोग करें, और इसे थोड़ा छोटा रखें।
[डिज़ाइन] ・रंगों के लिए केवल "सफेद, काला और ग्रे" का उपयोग करें। ・बैकग्राउंड मूल रूप से सफेद रखें। पूरी तरह से काले पेज न बनाएँ। ・किसी भी अनावश्यक अंग्रेज़ी, रेखाओं, छायाओं या अन्य सजावट का उपयोग न करें। ・जहाँ डायग्राम या इमेज की आवश्यकता हो, वहाँ ग्रे बॉक्स का उपयोग करें। ・आइकन के लिए "Font Awesome" के मुफ़्त संस्करण का उपयोग करें।
[लेखन] ・प्रत्येक वाक्य को कुछ हद तक छोटा रखें। प्रति वाक्य कम से कम एक बार अल्पविराम का उपयोग करें। ・हर 1-2 वाक्य के बाद पैराग्राफ को अलग करें। ・जहाँ स्वाभाविक लगे, वहाँ कांजी के लिए हीरागाना का उपयोग करें (जैसे, 行う को おこなう में बदलें)। ・नामों या संवादों के लिए जिन पर आप जोर देना चाहते हैं, ब्रैकेट 「」 का उपयोग करें। ・किसी भी टाइपो या छूटे हुए अक्षरों को सही करें और टोन को विनम्र (Desu/Masu) में एकीकृत करें।
प्रत्येक नियम की व्याख्या
उन लोगों के लिए जो नियमों का विवरण जानना चाहते हैं।
1. लेआउट और डिज़ाइन
एक "समझने में आसान लेआउट" जानकारी की प्राथमिकता को व्यवस्थित करता है। रंगों को केवल "सफेद, काले और ग्रे" तक सीमित करके, डिज़ाइन नियंत्रण से बाहर नहीं होगा।
https://x.com/hiroho150cm/status/2061576024878633393
2. आइकन
आइकन के लिए "Font Awesome" निर्दिष्ट करने से दिखावट में काफी सुधार होता है।
https://x.com/hiroho150cm/status/2062376294688387540
3. HTML के साथ बनाना
HTML का उपयोग करने से निर्माण और संशोधन सुचारू हो जाता है।
https://x.com/hiroho150cm/status/2061938409577574818
https://x.com/hiroho150cm/status/2064112737865576597
4. लेखन
पठनीयता इतनी अधिक हो जाती है कि आप आंतरिक टेक्स्ट का उपयोग वैसे ही कर सकते हैं।
https://x.com/hiroho150cm/status/2063750350776287429
मल्टी-पेज साइटों के लिए, Claude Code का उपयोग करें
अब तक, यह LP (एकल पेज) के बारे में था। मल्टी-पेज साइटों के लिए, हम दृष्टिकोण बदलते हैं।
चैट प्रीव्यू एक साथ कई HTML फ़ाइलों के बीच स्विच करने को अच्छी तरह से हैंडल नहीं करते हैं। इसलिए, हम "Claude Code" का उपयोग करते हैं।
अपने डेस्कटॉप पर एक फ़ोल्डर तैयार करें और उसके अंदर सब कुछ मैनेज करें। इस तरह, Claude Code कई HTML फ़ाइलों को ठीक से एडिट कर सकता है।
https://x.com/hiroho150cm/status/2065267853922898022
मैं Claude का उपयोग करके वेब प्रोडक्शन और डायरेक्शन के लिए समय बचाने वाली तकनीकें साझा करता हूँ।
मैं उपयोगी जानकारी देता रहूँगा, इसलिए अगर आपको पसंद आए तो कृपया मुझे फॉलो करें।
