← AI नुस्खेकाम✓ जाँचा गया 28 अग॰ 2026

Claude Code और Fable के साथ एक ही प्रॉम्प्ट से कार्यरत वेब ऐप बनाएं

अपने विचार को एक वाक्य में बताएं - 10 मिनट में तैयार कोड और चरण-दर-चरण इंटरैक्टिव गाइड पाएं।

1.Node.js (LTS संस्करण) को आधिकारिक वेबसाइट से इंस्टॉल करें, अगर पहले से इंस्टॉल नहीं है। टर्मिनल में node -v कमांड चलाकर जांचें - वर्शन दिखना चाहिए।
अगर सेवा आपके क्षेत्र में सीधे उपलब्ध नहीं है, तो डाउनलोड के समय VPN का उपयोग करें।
Node.js ↗
2.npm के ज़रिए Claude Code को ग्लोबली इंस्टॉल करें। टर्मिनल खोलें और इंस्टॉल कमांड चलाएं, फिर कंसोल में दिए गए निर्देशों से लॉगिन करें।
Claude Code, Claude Pro और Max सब्सक्राइबर्स के लिए मुफ़्त है। बिना सब्सक्रिप्शन के पेड प्लान चाहिए - लागत सेक्शन देखें।
Claude Code ↗टूल के बारे में
प्रॉम्प्ट
```
npm install -g @anthropic-ai/claude-code
```
यह प्रॉम्प्ट क्या करता हैयह कमांड Claude Code CLI-इंस्ट्रुमेंट को ग्लोबली इंस्टॉल करता है। कुछ भी बदलने की ज़रूरत नहीं - टर्मिनल में ऐसे ही चलाएं।
3.प्रोजेक्ट के लिए एक खाली फ़ोल्डर बनाएं, टर्मिनल में उसमें जाएं और claude कमांड से Claude Code चालू करें। पहली बार चलाने पर Anthropic अकाउंट जोड़ने के लिए स्क्रीन पर दिए निर्देशों का पालन करें।
अगर सेवा आपके क्षेत्र में उपलब्ध नहीं है, तो लॉगिन के लिए VPN की ज़रूरत पड़ेगी।
Claude Code ↗टूल के बारे में
प्रॉम्प्ट
```
mkdir my-app && cd my-app && claude
```
यह प्रॉम्प्ट क्या करता हैmy-app फ़ोल्डर बनाता है, उसमें जाता है और Claude Code की इंटरैक्टिव सत्र शुरू करता है। फ़ोल्डर का नाम आप कुछ भी रख सकते हैं।
4.Claude Code सत्र में नीचे दिया प्रॉम्प्ट डालें। यह एक ही चरण में प्रोजेक्ट स्ट्रक्चर, लॉजिक और फ़ाइलें बना देगा।
Claude Code खुद मौजूदा फ़ोल्डर में फ़ाइलें बना देगा। कोड मैन्युअली कॉपी करने की ज़रूरत नहीं।
Claude Code ↗टूल के बारे में
प्रॉम्प्ट
```
एक सिंगल-पेज वेब ऐप बनाएं जिसका नाम «[APP_NAME]» है और जो यह करता है: [DESCRIBE_WHAT_IT_DOES]। वनिला HTML, CSS और JavaScript का उपयोग करें एक ही index.html फ़ाइल में। UI क्लीन और रिस्पॉन्सिव रखें। एक हेडिंग «[APP_NAME]», एक इनपुट फ़ॉर्म और एक रिज़ल्ट एरिया शामिल करें। बेसिक इनपुट वैलिडेशन जोड़ें।
```
यह प्रॉम्प्ट क्या करता हैप्रॉम्प्ट Claude Code से एक सिंगल-पेज वेब ऐप बनाने को कहता है। [APP_NAME] को अपने ऐप के नाम से बदलें (जैसे, Task Tracker), और [DESCRIBE_WHAT_IT_DOES] को ऐप के काम के विवरण से बदलें (जैसे, लेट अ यूज़र एड टास्क्स, मार्क देम डन एंड डिलीट देम)। बाकी टेक्स्ट ऐसे ही रखें - Claude मौजूदा फ़ोल्डर में index.html फ़ाइल बना देगा।
5.Fable वेबसाइट खोलें, Get Started दबाएं और Google या ईमेल से लॉगिन करें। मुफ़्त टैरिफ से पब्लिक गाइड बनाए जा सकते हैं।
बिना ज़रूरत के थर्ड-पार्टी सेवाओं में निजी या पेमेंट जानकारी न डालें। Fable स्क्रीन रिकॉर्डिंग के लिए उपयोग होता है।
Fable ↗
6.Fable में स्क्रीन रिकॉर्डिंग शुरू करें, ब्राउज़र में index.html फ़ाइल खोलें (डबल-क्लिक से), ऐप का काम दिखाएं - डेटा डालें, नतीजा दिखाएं। रिकॉर्डिंग रोकें और गाइड पब्लिश करें, लिंक कॉपी करें।
रिकॉर्डिंग से पहले निजी जानकारी वाले टैब बंद करें - वे फ्रेम में आ सकते हैं।
Fable ↗

💰 इसे अपनाने में कितना खर्च आएगाकीमतें 2026-08 के अनुसार

मुफ़्तNode.jsडाउनलोड और उपयोग के लिए पूरी तरह मुफ़्त।
सब्सक्रिप्शनClaude CodeClaude Pro ($20/माह) या Max ($100/माह) सब्सक्रिप्शन चाहिए; बिना सब्सक्रिप्शन के API से टोकन के हिसाब से इस्तेमाल कर सकते हैं। कोई मुफ़्त टैरिफ नहीं।
मुफ़्तFableमुफ़्त टैरिफ से पब्लिक इंटरैक्टिव गाइड बनाए जा सकते हैं; टीमों के लिए पेड टैरिफ भी हैं।

आज़माएँ और सबसे पहले निशान लगाएँ

आज ही क्यों

48 घंटे में क्रिएटर्स के वीडियो

स्रोत चैनल

6.2 हज़ार

कुल व्यूज़

Nate Herk | AI Automationyoutubeकैटलॉग में चैनल

Борис опятьtelegramकैटलॉग में चैनल

Anthropic Docsweb

Fableweb

Anthropic Pricingweb

सप्ताह का नुस्खा ईमेल पर

AI सेवाएँ तेज़ी से बदलती हैं - इंटरफ़ेस और मुफ़्त सीमाएँ बताए गए से अलग हो सकती हैं।