من Claude Design إلى WordPress: الدليل

أولًاما الذي لديك فعلًا

ما المخرج الذي أعطاك إياه Claude Design؟

ينشئ Claude نوعين من المخرجات، ولكل نوع مسار مختلف. تحقق من النوع الذي لديك قبل أن تبدأ، لأنه يحدد مدة التحويل.

ما أعطاك إياه Claude	ما هو	المسار
artifact بصيغة HTML	ملف `.html` مكتفٍ بذاته: الكود والأنماط والسكربتات كلها داخله.	هذا المقال. إنه HTML مسطّح أصلًا، أي المدخل الذي يحتاجه المحوّل بالضبط.
artifact بصيغة React	مكوّن (component). لا تظهر الصفحة إلا بعد تشغيل JavaScript، وما يحيط بها من HTML مجرد عنصر فارغ يُركَّب فيه التطبيق.	شرح مسار Lovable: النوع نفسه من المدخلات، والخطوة الإضافية نفسها.

إذا لم تكن متأكدًا، فافتح الملف وانظر داخل <body>. إن رأيت عناوينك وفقراتك هناك، فلديك artifact بصيغة HTML وأنت في المكان الصحيح. أما حين يكون الـ body مجرد <div> فارغ ووسم script، فلديك النوع الآخر.

سبب سهولة حالة HTML

مشروع React يجب بناؤه أولًا ثم فتحه في متصفح حقيقي، وقبل ذلك لا يوجد شيء يمكن تحويله. ملف artifact بصيغة HTML يتخطى هذه الخطوة. الكود مكتوب كاملًا في الملف، وكل خطوة لاحقة تقرأ منه.

صدّر من Claude Design إلى مجلد مع الصور

المدخل دائمًا مجلد على قرصك. عنوان موقع منشور ليس مدخلًا مدعومًا، وهذا مقصود. نسخة الصفحة المنشورة تحتفظ بالنتيجة المعروضة فقط، وتفقد ما يعرفه الملف المصدر.

لذلك صدّر التصميم من Claude (نزّل ملف artifact)، ثم أنشئ مجلدًا واحفظ الملف فيه باسم index.html. إذا كان التصميم يشير إلى صور ليست داخل الملف، فضعها بجانبه في المواضع النسبية نفسها التي يتوقعها الكود.

الطرفية

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

صفحة واحدة أم أكثر؟

كل artifact صفحة واحدة، والموقع ذو الصفحة الواحدة يتحوّل دون أي مشكلة. تصبح هذه الصفحة الصفحة الرئيسية للقالب. إذا أردت موقعًا فيه صفحتا «من نحن» و«اتصل بنا»، فاطلبهما من Claude أيضًا، واحفظ كل صفحة في ملف .html مستقل داخل المجلد نفسه. لأسماء الملفات أهمية: التحليل يقرؤها، ويفهم من الاسم وحده ملفًا مثل blog.html أو about.html.

إذا بقيت عند خمسة ملفات أو أقل، فالتحويل كله يدخل ضمن النسخة المجانية (Free).

ما يحتاجه حاسوبك لتحويل Claude Design إلى WordPress

المسار الأقصر يعمل أيضًا على جهازك، والمتطلبات لا تقل. المتصفح وWordPress المؤقت موجودان لفحص النتيجة، لا لإنتاجها:

Node 20 أو أحدث وPython 3 مع حزمتي Playwright وPillow.
Docker مع الأمر docker compose. يشغّل WordPress مؤقتًا على حاسوبك، ويثبّت المحوّل القالب فيه قبل أن تراه.
php-cli، لأن كل ملف PHP يمر بفحص للصياغة قبل أن يدخل ملف ZIP.
jq وcurl وbash وtar. ويجب أن يكون WordPress الهدف بالإصدار 6.6 أو أحدث.

الخطوة الأولى تتحقق من كل هذا. وتفصل ما تستطيع تثبيته بنفسها داخل مجلداتك عمّا يجب أن تقرره أنت. ولن تثبّت Docker لك إلا إذا طلبت ذلك.

Docker ليس اختياريًا، وهو أكثر ما يفاجئ الناس

المحوّل الذي يعمل في المتصفح لا يحتاجه، لأنه يتخطى هذه الخطوة. هنا يدخل القالب المولَّد إلى WordPress حقيقي، ويختبره المحوّل هناك قبل أن تراه. هذه هي وظيفة الحاوية (container). إذا لم يكن Docker يعمل، يتوقف التحويل عند الخطوة الأولى تمامًا ويخبرك فورًا، لا في النهاية.

التحويلمن artifact إلى قالب

شغّل التحويل من Claude Design إلى WordPress

Claude Code

claude

/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

ثم اكتب، من أي مكان:

claude

/html2wp:html2wp

convert ./my-site

مسار المجلد هو التعليمة كلها. لا تكتب ملف إعدادات، ولا تختار أمر بناء. في Codex اكتب convert ./my-site with html2wp. وإذا كنت تفضّل ألّا تعمل في الطرفية (Terminal)، يمكنك فتح المجلد نفسه في تطبيق سطح المكتب html2wp (دليل مع لقطات شاشة).

يستغرق Flash نحو 30 دقيقة، وFull نحو ساعة، حسب عدد الصفحات وسرعة حاسوبك. ملف artifact من صفحة واحدة يقع في الطرف الأقصر، لكن الفحوص تعمل دائمًا كاملة مهما صغر المدخل.

ما يقرره نيابةً عنك، وما يسألك عنه

قبل أن يولّد أي شيء، يقيس المحوّل ملفاتك. يعدّد الصفحات، ويحدد أي أجزاء الكود مشتركة وأيها فريدة. ويجد أيضًا رموز التصميم (design tokens)، وكل ما يشبه مدونة، والصفحات القائمة بذاتها. بعد ذلك يدوّن خطته ويحوّل وفقها.

التصميم المولَّد يصطدم غالبًا بأمرين:

كل نسخة من التصميم تبقى. إذا لم تشترك صفحاتك في الترويسة نفسها، فلا يختار المحوّل واحدة ويمحو الباقي. بل ينشئ جزء قالب (template part) لكل نسخة، ويربط كل صفحة بالنسخة التي استخدمتها فعلًا. ملفات artifact من محادثات Claude مختلفة تتباين غالبًا أكثر مما تتذكر.
الأقواس المعقوصة في نصك تبقى. الخطوة الوسيطة تستخدم صيغة شبيهة بـ JSX. وبدون معالجة خاصة، قد تكسر عيّنة JSON أو CSS في نصك عملية البناء، أو تظهر على الصفحة بشكل {. المحوّل يعالجها، فتبقى الأقواس أقواسًا على الصفحة.

المجموعات المتكررة، مثل البطاقات أو آراء العملاء أو الأسئلة الشائعة، تُحفظ كمجموعات بيانات (collections) بدل كود ثابت. لهذا تستطيع تعديلها لاحقًا فعلًا، ولا تكتفي بأن تبدو قابلة للتعديل.

الفحص الذي لا يمكنك تخطيه

يضع المحوّل كل صفحة في صورة واحدة بجانب أصلها، وتقرأ أنت كل صورة من الأعلى إلى الأسفل.

في أحد التحويلات غاب قسم في أسفل الصفحة، وأظهرت مقارنة البكسلات فرقًا بنسبة 0.4% فقط، فاجتاز الفحص. الفحوص الرقمية بطبيعتها لا ترى ثلاثة أنواع من العيوب. الأول عنصر تحكم يبدو مثاليًا لكنه لا يفعل شيئًا. الثاني قيمة مكتوبة في الكود من الصفحة الوحيدة التي جاء منها القالب. الثالث كل ما لا يظهر إلا بعد التمرير أو النقر أو إرسال نموذج.

تحقق أيضًا من أنك تستطيع تعديل المحتوى. قد تطابق الصفحة أصلها بكسلًا بكسلًا، ومع ذلك لا يستطيع أحد تعديل أسئلتها الشائعة أو شبكة ميزاتها من wp-admin. حدث هذا فعلًا، وكشفه هذا الفحص اليدوي، لا أي فحص آلي.

بعد التحويلالعمل مع القالب لاحقًا

التعديل بعد نقل Claude Design إلى WordPress: القالب أو Visual Edit أو أداة بناء الصفحات

يصل إلى مجلدك ملفان: ملف ZIP للقالب، وبجانبه CONVERSION-REPORT.md. يذكر التقرير ما غطاه التحويل، وما وجده الفحص، وما بقي مفتوحًا. تثبّت القالب مثل أي قالب WordPress من «المظهر ← قوالب ← أضف جديد ← رفع قالب» (Appearance → Themes → Add New → Upload Theme).

القالب مستقل بذاته. الصفحات والمدونة والنماذج والقوائم وSEO وإعادة التوجيه كلها من كوده الخاص. لا يحتاج إلى إضافة ليعمل، ولا يتصل بخادمنا أبدًا. مقالات المدونة تُكتب في محرر الكتل، أما نص الصفحات فيبقى في HTML. ولتعديل الصفحات دون كود أمامك خياران: Visual Edit وأداة بناء الصفحات.

المسار	ما تحصل عليه	ما يكلفك
القالب وحده	كودك كما هو، دون أي شيء مثبّت فوقه. لا شيء تجدّده، ولا شيء ينكسر بسبب تحديث من طرف آخر.	دون إضافة، يتغير نص الصفحات في HTML. إذا أراد العميل تعديله بنفسه، فهذا ما يفعله Visual Edit (نسخة Lite مجانية).
Visual Edit، إضافتنا	انقر على عنوان في الصفحة، واكتب فوقه، واحفظ. تعدّل النصوص والصور والروابط والنماذج والقوائم في أماكنها، ويبقى الكود كما كان. Lite مجانية ولا تحتاج إلى مفتاح ترخيص.	إضافة أخرى مثبّتة. تحفظ Lite سجلًا من 10 خطوات، وليس فيها دردشة بالذكاء الاصطناعي. Pro تضيف الاثنين وتكلف 59 يورو في السنة.
Elementor أو أداة أخرى لبناء الصفحات	بيئة عمل مألوفة لمن يستخدمها أصلًا، وعميل يستطيع إعادة بناء صفحة دونك.	يُعاد بناء الكود على شكل عناصر (widgets) الأداة. لم يعد التصميم الذي صنعه Claude. وبعدها لا يُعرض الموقع دون Elementor، وترث بنيته وCSS الخاص به وتحديثاته.

أداة بناء الصفحات خيار جيد حين يكون التصميم مجرد نقطة بداية. وهي خيار سيئ حين يكون التصميم هو ما تسلّمه. إذا كنت تحوّل كي يبقى التصميم المولَّد في WordPress، فإعادة بنائه كعناصر تلغي سبب بدئك أصلًا. أما إذا كان شخص آخر سيعيد التخطيط في الربع القادم، فقد تساوي خبرته في Elementor أكثر من تصميم أمين للأصل.

Lite أم Pro، إذا اخترت Visual Edit

	Lite (مجانية)	Pro
تعديل المحتوى بالنقر	✓	✓
النماذج والقوائم وحقول SEO	✓	✓
التعديل عبر دردشة الذكاء الاصطناعي	–	✓، بمفتاح API الخاص بك
تصدير القالب	–	✓
حماية النماذج عبر Turnstile	–	✓
تعديل الصور بالذكاء الاصطناعي وتحريك الصور	–	✓
سجل التعديلات	10 خطوات	300 خطوة

تعمل دردشة الذكاء الاصطناعي بمفتاح API الخاص بك. لا نبيعك رموزًا (tokens)، وتدفع تكلفتها مباشرة لمزوّدك.

من Claude Design إلى WordPress: السعر وما يرفضه التحويل

مجانًا للجميع، دون مفتاح ودون تسجيل: ثلاثة تحويلات بخمس صفحات لكل منها، وخمس إعادات تشغيل إجمالًا. الرقمان يُحسبان لكل عنوان IP، فالمكتب الذي له عنوان واحد يحصل على حصة واحدة. النسخة المجانية مخصصة لتجربة الأداة، وللمواقع الشخصية، وللأعمال غير التجارية.

ترخيص Pro يلغي حد الصفحات، ويجعل التحويلات وإعادات التشغيل غير محدودة. ويفتح أيضًا الخطوة التي تحوّل المتجر إلى WooCommerce. هذه الخطوة ليست مجانية أبدًا: يرفض التطبيق التحويل المجاني لموقع فيه متجر رفضًا تامًا، بدل أن ينجز نصفه. يمكنك شراء Pro شهريًا أو سنويًا من صفحة الأسعار، وخلال النسخة التجريبية (بيتا) تحصل على خصم 30% على الدفعة الأولى.

تنبيه واحد: هذه نسخة تجريبية. الفحوص تلتقط معظم الفروق، لا كلها. لهذا فقراءة كل صفحة بجانب أصلها جزء من العملية، وليست لمسة اختيارية. ولهذا أيضًا حوّل أولًا شيئًا من أعمالك مجانًا، ثم ثق بالأداة بعد ذلك.

دليل العملية كلها خطوة بخطوة موجود في توثيق تطبيق html2wp. وإذا كان ملف artifact لديك بصيغة React، فإن دليل نقل Lovable إلى WordPress يشرح ذلك المسار.