Claude Design से WordPress: डिज़ाइन को थीम में कैसे बदलें

Claude Design का कौन-सा आउटपुट आपके पास है?

Claude Design दो तरह के आउटपुट बनाता है, और WordPress तक हर एक का रास्ता अलग है। शुरू करने से पहले देख लें कि आपके पास कौन-सा है, क्योंकि कन्वर्ज़न का समय इसी पर निर्भर करता है।

Claude ने आपको क्या दिया	यह क्या है	रास्ता
HTML आर्टिफ़ैक्ट	अपने-आप में पूरी एक .html फ़ाइल: कोड, स्टाइल और स्क्रिप्ट सब उसी के अंदर हैं।	यही लेख। यह पहले से सपाट HTML है, ठीक वही इनपुट जो कन्वर्टर को चाहिए।
React आर्टिफ़ैक्ट	एक कंपोनेंट। पेज JavaScript चलने के बाद ही दिखता है। उसके आसपास का HTML एक खाली एलिमेंट है, जिसमें ऐप माउंट होता है।	Lovable वाली गाइड: उसी तरह का इनपुट, वही अतिरिक्त चरण।

अगर पक्का न हो, तो फ़ाइल खोलें और <body> के अंदर देखें। वहां आपकी हेडिंग और पैराग्राफ़ दिखें, तो आपके पास HTML आर्टिफ़ैक्ट है और आप सही जगह पर हैं। अगर body में एक खाली <div> और एक script टैग है, तो आपके पास दूसरी तरह का आउटपुट है।

Claude Design से फ़ोल्डर में एक्सपोर्ट, इमेज समेत

इनपुट हमेशा आपकी डिस्क पर एक फ़ोल्डर होता है। लाइव साइट का पता इनपुट के रूप में नहीं चलता, और ऐसा जानबूझकर है। प्रकाशित पेज की कॉपी में सिर्फ़ रेंडर हुआ नतीजा बचता है। सोर्स फ़ाइल जो जानती है, वह खो जाता है।

इसलिए Claude से डिज़ाइन एक्सपोर्ट करें (आर्टिफ़ैक्ट डाउनलोड करें)। एक फ़ोल्डर बनाएं और फ़ाइल को उसमें index.html नाम से सेव करें। डिज़ाइन में कुछ इमेज फ़ाइल के बाहर से लिंक होती हैं, तो उन्हें फ़ाइल के बगल में रखें। उन्हें उन्हीं रिलेटिव जगहों पर रखें, जहां कोड उन्हें ढूंढता है।

mkdir my-site && cd my-site
mv ~/Downloads/artifact.html index.html
mkdir -p images        # if the design uses any images

एक पेज या ज़्यादा?

एक आर्टिफ़ैक्ट एक पेज है, और एक पेज वाली साइट बिना किसी परेशानी के कन्वर्ट होती है। वह थीम का फ़्रंट पेज बन जाती है। अगर आपको About और Contact पेज वाली साइट चाहिए, तो Claude से वे भी मांगें। हर पेज को उसी फ़ोल्डर में अलग .html फ़ाइल के रूप में सेव करें। फ़ाइल के नाम मायने रखते हैं, क्योंकि विश्लेषण उन्हें पढ़ता है। blog.html या about.html नाम वाली फ़ाइल को वह उसके नाम से पहचानता है।

पांच या उससे कम फ़ाइलें हों, तो Claude Design से WordPress तक का पूरा कन्वर्ज़न फ़्री टियर में आ जाता है।

Claude Design को WordPress में बदलने के लिए आपके कंप्यूटर को क्या चाहिए

Claude Design से WordPress का छोटा रास्ता भी आपकी मशीन पर चलता है, और ज़रूरतें कम नहीं होतीं। ब्राउज़र और अस्थायी WordPress नतीजा जाँचने के लिए हैं, उसे बनाने के लिए नहीं:

• Node 20 या नया और Python 3, साथ में Playwright और Pillow पैकेज।
• Docker, docker compose कमांड के साथ। यह आपके कंप्यूटर पर एक अस्थायी WordPress चलाता है। आपके देखने से पहले कन्वर्टर थीम को वहीं इंस्टॉल करता है।
• php-cli, क्योंकि ZIP में जाने से पहले हर PHP फ़ाइल की सिंटैक्स जाँच होती है।
• jq, curl, bash और tar। जिस WordPress पर थीम लगेगी, उसका वर्ज़न 6.6 या नया होना चाहिए।

पहला चरण यह सब जाँचता है। कुछ चीज़ें वह आपके अपने फ़ोल्डरों में खुद इंस्टॉल कर सकता है। बाकी का फ़ैसला आपको करना है, और वह दोनों को अलग दिखाता है। आपके कहे बिना वह Docker इंस्टॉल नहीं करेगा।

Claude Design से WordPress कन्वर्ज़न चलाएँ

Claude Code

/plugin marketplace add iOSDevSK/html2wp-cc-plugin
/plugin install html2wp@html2wp

python3 -m playwright install chromium

Codex

codex plugin marketplace add iOSDevSK/html2wp-codex-plugin
codex plugin add html2wp@html2wp

फिर कहीं से भी यह लिखें:

/html2wp:html2wp

convert ./my-site

फ़ोल्डर का पाथ ही पूरा निर्देश है। आप न कोई कॉन्फ़िग फ़ाइल लिखते हैं, न बिल्ड कमांड चुनते हैं। Codex में लिखें convert ./my-site with html2wp। टर्मिनल में काम नहीं करना चाहते, तो यही फ़ोल्डर html2wp डेस्कटॉप ऐप में खोलें (स्क्रीनशॉट वाली गाइड)।

Flash में लगभग 30 मिनट लगते हैं और Full में लगभग एक घंटा। समय पेजों की संख्या और आपके कंप्यूटर की रफ़्तार पर निर्भर करता है। एक पेज वाला आर्टिफ़ैक्ट कम समय वाले सिरे पर रहता है। फिर भी जाँच हमेशा पूरी चलती है, इनपुट कितना भी छोटा हो।

यह आपके लिए क्या तय करता है, और क्या पूछता है

कुछ भी बनाने से पहले यह आपकी फ़ाइलों को मापता है। यह पेजों की सूची बनाता है और पता करता है कि कोड के कौन-से हिस्से साझा हैं और कौन-से अलग। साथ ही डिज़ाइन टोकन, ब्लॉग जैसी दिखने वाली हर चीज़ और अकेले खड़े पेज भी ढूंढता है। फिर यह अपनी योजना लिखता है और उसी के मुताबिक कन्वर्ट करता है।

Claude Design से WordPress तक जाते हुए जनरेट किए गए डिज़ाइन में अक्सर दो चीज़ें सामने आती हैं:

• डिज़ाइन का हर वेरिएंट बचा रहता है। हो सकता है आपके पेजों का हेडर एक जैसा न हो। तब यह कोई एक विजेता चुनकर बाकी को उसी जैसा नहीं बनाता। यह हर वेरिएंट के लिए एक टेम्पलेट पार्ट बनाता है। फिर हर पेज को उसी से जोड़ता है, जो उसने सच में इस्तेमाल किया था। अलग-अलग Claude चैट के आर्टिफ़ैक्ट अक्सर आपकी याद से ज़्यादा अलग होते हैं।
• आपके टेक्स्ट में कर्ली ब्रैकेट बचे रहते हैं। बीच का चरण JSX जैसे फ़ॉर्मैट में काम करता है। वरना आपके टेक्स्ट में JSON या CSS का नमूना बिल्ड तोड़ देता या पेज पर { बनकर दिखता। कन्वर्टर इन्हें संभालता है, इसलिए पेज पर ब्रैकेट ब्रैकेट ही रहते हैं।

दोहराए जाने वाले समूह, जैसे कार्ड, टेस्टिमोनियल या FAQ, हार्ड-कोड मार्कअप की जगह कलेक्शन के रूप में सेव होते हैं। इसी वजह से आप बाद में उन्हें सच में एडिट कर सकते हैं। वे सिर्फ़ एडिट होने लायक दिखते भर नहीं हैं।

वह जाँच, जिसे आप छोड़ नहीं सकते

कन्वर्टर हर पेज को उसके मूल के साथ एक इमेज में रखता है। फिर आप हर इमेज ऊपर से नीचे तक पढ़ते हैं।

एक कन्वर्ज़न में पेज के नीचे का एक सेक्शन गायब था। पिक्सेल तुलना में फ़र्क सिर्फ़ 0.4% आया, इसलिए पेज जाँच में पास हो गया। संख्या वाली जाँच अपने स्वभाव से तीन तरह की गड़बड़ियां नहीं देख सकती। पहली: ऐसा कंट्रोल जो एकदम सही दिखता है, पर कुछ नहीं करता। दूसरी: ऐसी वैल्यू, जो उस एक पेज से हार्ड-कोड हो गई जिससे टेम्पलेट बना। तीसरी: कुछ भी, जो स्क्रॉल, क्लिक या फ़ॉर्म भेजने के बाद ही दिखता है।

यह भी जाँचें कि कंटेंट एडिट हो सकता है या नहीं। पेज पिक्सेल तक मेल खा सकता है। फिर भी हो सकता है कि wp-admin से कोई उसका FAQ या फ़ीचर ग्रिड एडिट न कर पाए। ऐसा हो चुका है, और इसे इसी जाँच ने पकड़ा, किसी ऑटोमैटिक जाँच ने नहीं।

WordPress में कन्वर्ज़न के बाद एडिटिंग: थीम, Visual Edit या पेज बिल्डर

आपके फ़ोल्डर में दो फ़ाइलें आती हैं: थीम ZIP और उसके बगल में CONVERSION-REPORT.md। रिपोर्ट में लिखा होता है कि कन्वर्ज़न ने क्या कवर किया, जाँच में क्या मिला और क्या अभी बाकी है। थीम आप किसी भी WordPress थीम की तरह इंस्टॉल करते हैं (Appearance → Themes → Add New → Upload Theme)।

थीम अपने दम पर चलती है। पेज, ब्लॉग, फ़ॉर्म, मेन्यू, SEO और रीडायरेक्ट सब उसका अपना कोड हैं। उसे चलने के लिए किसी प्लगइन की ज़रूरत नहीं, और वह हमारे सर्वर से कभी बात नहीं करती। ब्लॉग पोस्ट ब्लॉक एडिटर में लिखी जाती हैं, जबकि पेजों का टेक्स्ट HTML में रहता है। बिना कोड के पेज एडिट करने के दो विकल्प हैं: Visual Edit और पेज बिल्डर।

पेज बिल्डर तब अच्छा विकल्प है, जब डिज़ाइन सिर्फ़ शुरुआत हो। जब डिज़ाइन ही वह चीज़ है जो आप सौंपते हैं, तब यह बुरा विकल्प है। मान लें, आप चाहते हैं कि जनरेट किया गया डिज़ाइन WordPress में बचा रहे। तब उसे विजेट में दोबारा बनाना कन्वर्ज़न की वजह ही खत्म कर देता है। लेकिन अगली तिमाही में कोई और लेआउट बदलेगा, तो उसका Elementor अनुभव सटीक डिज़ाइन से ज़्यादा कीमती हो सकता है।

Visual Edit चुनें, तो Lite या Pro

AI चैट आपकी अपनी API key पर चलती है। हम आपको टोकन नहीं बेचते, और उनका खर्च आप अपने प्रोवाइडर के साथ चुकाते हैं।

Claude Design से WordPress: कीमत, और कन्वर्ज़न किससे मना करता है

सबके लिए फ़्री, बिना key और बिना साइन-अप: पांच-पांच पेज के तीन कन्वर्ज़न और कुल पांच री-रन। दोनों संख्याएं हर IP पते के हिसाब से गिनी जाती हैं। इसलिए एक पते वाले दफ़्तर को एक ही कोटा मिलता है। फ़्री टियर टूल आज़माने, निजी साइटों और गैर-व्यावसायिक काम के लिए है।

Pro लाइसेंस पेजों की सीमा हटा देता है और कन्वर्ज़न व री-रन असीमित कर देता है। यह वह चरण भी खोलता है, जो दुकान को WooCommerce में बदलता है। यह चरण कभी फ़्री नहीं होता। दुकान वाली साइट का फ़्री कन्वर्ज़न ऐप सीधे मना कर देता है, आधा काम करने के बजाय। Pro आप कीमतों के पेज पर मासिक या सालाना खरीद सकते हैं। बीटा के दौरान पहले पेमेंट पर 30% छूट है।

एक सावधानी: यह बीटा है। जाँच ज़्यादातर फ़र्क पकड़ती है, सब नहीं। इसीलिए हर पेज को उसके मूल के साथ पढ़ना प्रक्रिया का हिस्सा है, वैकल्पिक सजावट नहीं। इसी वजह से पहले अपना कुछ फ़्री में कन्वर्ट करें, और उसके बाद ही इस पर भरोसा करें।

पूरी प्रक्रिया की चरण-दर-चरण गाइड html2wp ऐप के डॉक्यूमेंटेशन में है। अगर आपका आर्टिफ़ैक्ट React है, तो Lovable से WordPress वाली गाइड वह रास्ता बताती है।