عبدالله خطاطبة

I build products with AI

WhatsApp
Skip to content
All gifts
GuideinstagramMay 25, 20265 min read

ابني موقع احترافي بالذكاء الاصطناعي بدون مبرمج

الدليل الكامل: من فكرة بدماغك لموقع منشور خلال يومين.

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

الجزء الأول

قبل ما تفتح أي أداة

1

Step 1

مين زبونك بالضبط؟

مش «الكل». حدّد بدقة: مين الشخص اللي رح يدخل موقعك؟ شو المشكلة اللي عنده؟ شو بيدوّر عليه؟ وشو القرار اللي بدك ياه يعمله (يحجز، يتواصل، يشتري)؟ مثال لعيادة أسنان: الزبون مريض بيدوّر على عيادة قريبة، بده يعرف الخدمات والأسعار، وبده يحجز موعد بسرعة بدون مكالمة.

2

Step 2

شو شكل الموقع اللي ببالك؟

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

3

Step 3

شو الصفحات اللي بموقعك؟

لا تترك الأداة تقرر. الأساسيات لأغلب المشاريع: الرئيسية، الخدمات، عنّا، التواصل، والحجز (لو بدك). حدّد كل صفحة ومحتواها قبل ما تبدأ.

مواقع مراجع التصميم

من وين تجمع صور الإلهام

1

Dribbble

أكبر منصة تصاميم. ابحث عن نوع موقعك مثلاً dental website أو restaurant website.

dribbble.com
2

Land-book

مكتبة مواقع حقيقية مصنّفة حسب المجال. ممتاز للإلهام الواقعي.

land-book.com
3

Awwwards

أفضل المواقع بالعالم. للذوق العالي والاتجاهات الجديدة.

awwwards.com
4

Pinterest

ابحث عن «website design» مع مجالك. مفيد للأقسام والتفاصيل.

pinterest.com

الجزء الثاني

أي أداة تستخدم

5

Lovable

بتبني مواقع وتطبيقات كاملة من الوصف. بتربط قاعدة بيانات أوتوماتيك، بتنشر بضغطة زر، وبتدعم العربي. أنصح فيها للبداية.

lovable.dev
6

Claude Code

أداة برمجة بالذكاء الاصطناعي. بتعطيك تحكّم كامل بالكود والتصميم. مناسبة لما بدك شي مخصص جداً أو دمج أدوات.

anthropic.com
7

Bolt

بديل كويس للوفابل. بيزبط للمواقع البسيطة والمتوسطة.

bolt.new
8

Replit

بيئة تطوير أونلاين كاملة فيها ذكاء اصطناعي مدمج.

replit.com

الجزء الثالث

الخطوات العملية بلوفابل

1

Step 1

افتح حساب وابدأ مشروع

روح على lovable.dev، سجّل حساب مجاني، واضغط New Project.

2

Step 2

اكتب وصف مفصّل (مش جملة عامة)

بدل ما تكتب «اعمل موقع لعيادة»، اكتب وصف كامل فيه نوع البزنس، الزبون المستهدف، الصفحات المطلوبة بالتفصيل، الستايل المطلوب، واللغة. شوف البرومبتات الجاهزة بالأسفل.

3

Step 3

ارفع صور المراجع

بعد الوصف، ارفع الصور اللي جمعتها وقلّه: «بدي التصميم بنفس ستايل هاي الصور، نفس الألوان وترتيب العناصر».

4

Step 4

ابني صفحة صفحة

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

5

Step 5

راجع وعدّل بطلبات صغيرة

أول نتيجة غالباً مش مثالية. عدّل بطلب واحد بكل مرة: «كبّر الزر الرئيسي»، «غيّر اللون لأزرق غامق»، «حرّك قسم التقييمات لفوق». التعديل التدريجي بيعطي نتيجة أحسن.

6

Step 6

انشر واربط الدومين

لوفابل بتعطيك رابط مباشر فوراً. اشتري دومين من Namecheap أو GoDaddy (٥ لـ ١٠ دولار بالسنة) واربطه من إعدادات المشروع.

الجزء الرابع

تريكات متقدمة بتفرق

1

Step 1

أنيميشن احترافية

احكِ للأداة: «ضيف أنيميشن ناعمة على كل قسم لما المستخدم يسكرول. العناصر تطلع من تحت ببطء. استخدم Framer Motion». هاد التريك لحاله بيخلي الموقع يبان غالي.

2

Step 2

نظام حجوزات ببلاش

أسهل طريقة: اعمل حساب على Calendly مجاناً، وقل للأداة: «ضيف زر «احجز موعدك» يفتح رابط Calendly بتاب جديد». أو اطلب نظام حجز داخلي يخزّن البيانات بقاعدة البيانات ويبعتلك إشعار.

3

Step 3

زر واتساب عائم

أهم زر لأي بزنس بالعالم العربي. قل للأداة: «ضيف زر واتساب عائم بزاوية الشاشة، لما يضغط عليه يفتح محادثة مع الرقم [رقمك]، والرسالة الافتراضية: أهلاً، بدي أستفسر عن خدماتكم».

4

Step 4

زبّط السيو من البداية

قل للأداة: «اعمل سيو كامل: عنوان ووصف ميتا لكل صفحة، عناوين بتسلسل صحيح (H1 واحد لكل صفحة)، وصف بديل لكل صورة، سرعة عالية، متجاوب مع الموبايل». بعد النشر، سجّل الموقع بـ Google Search Console وGoogle Analytics.

الجزء الخامس

برومبتات جاهزة انسخها مباشرة

1

موقع عيادة أسنان

انسخه وغيّر الاسم والمدينة فقط. النتيجة بتطلع جاهزة للنشر.

بدي موقع لعيادة أسنان اسمها «ابتسامة» بعمّان، الأردن.

الصفحات:
١. الرئيسية: هيرو بعنوان «ابتسامتك تبلّش من هون»، زر «احجز موعدك»، قسم خدمات بأيقونات، قسم «ليش تختارنا»، تقييمات مرضى.
٢. الخدمات: تنظيف، حشوات تجميلية، تقويم، تبييض، زراعة. كل خدمة بوصف قصير وسعر تقريبي.
٣. عن الدكتور: صورة، خبرة ١٠ سنين، شهادات، تخصصات.
٤. التواصل: فورم (اسم، رقم، رسالة)، عنوان، خريطة جوجل، رقم واتساب، إيميل.

التصميم: احترافي، أبيض وأزرق فاتح، خطوط واضحة، متجاوب مع الموبايل.
اللغة: عربي من اليمين لليسار.
ضيف زر واتساب عائم بالزاوية.
2

موقع مطعم

مناسب لأي مطعم أو كافيه. غيّر الاسم ونوع الأكل بس.

بدي موقع لمطعم اسمه «بيت الشاورما» بعمّان.

الصفحات:
١. الرئيسية: صورة كبيرة للمطعم أو لأكلة مميزة، عنوان «أطيب شاورما بعمّان»، زر «شوف القائمة»، أوقات العمل، الموقع على الخريطة.
٢. القائمة: كل صنف بصورة واسم وسعر. مقسّمة: شاورما، مشاوي، مقبّلات، مشروبات.
٣. عنّا: قصة المطعم، من متى، شو اللي يميّزنا.
٤. التواصل: عنوان، خريطة، رقم واتساب، فورم طلب خاص.

التصميم: دافئ، بني غامق وذهبي، صور أكل شهية، خطوط عربية حلوة.
اللغة: عربي.
ضيف زر واتساب عائم وزر «اطلب أونلاين».
3

بورتفوليو فريلانسر

للمصممين، المبرمجين، المسوّقين، وأي فريلانسر بده يعرض شغله.

بدي موقع بورتفوليو شخصي. أنا مصمم جرافيك فريلانسر.

الصفحات:
١. الرئيسية: اسمي، عنوان «مصمم جرافيك، بحوّل أفكارك لتصاميم»، زر «شوف أعمالي»، زر «تواصل معي».
٢. الأعمال: غاليري بالمشاريع، كل مشروع بصورة وعنوان ووصف قصير، لما يضغط عليه تفتح التفاصيل.
٣. الخدمات: تصميم لوغو، هوية بصرية، سوشال ميديا، بروشورات. كل خدمة بوصف وسعر تقريبي.
٤. عنّي: صورتي، خبرتي، الأدوات اللي بستخدمها، شهادات عملاء.
٥. التواصل: فورم، إيميل، LinkedIn، Instagram.

التصميم: عصري ومينيمالست، أسود وأبيض مع لون واحد مميز، أنيميشن ناعمة على السكرول.
اللغة: إنجليزي.

الملخص

عشر خطوات بنظرة وحدة

خارطة الطريق كاملة

الخطوةشو تعمل
١حدّد زبونك وشو بده
٢اجمع صور مرجعية
٣حدّد صفحات الموقع
٤افتح Lovable أو Claude Code
٥اكتب وصف مفصّل
٦ارفع الصور المرجعية
٧ابني صفحة صفحة
٨عدّل وحسّن بطلبات صغيرة
٩ضيف الأنيميشن والحجوزات والواتساب والسيو
١٠انشر واربط الدومين

ابدأ اليوم بصفحة وحدة فقط: الصفحة الرئيسية. لما تزبط، انتقل للثانية. أهم شي إنك تبدأ، لأن كل ساعة موقعك مش موجود فيها هي ساعة زبون راح لغيرك.

ما عندك وقت؟

خلّيني أبنيلك موقعك

لو حابب أبنيلك موقعك بنفسي، بنفس الستايل اللي بشتغل فيه على مشاريعي، احكيلي على إنستغرام. بنحكي بفكرتك، وبرجعلك بعرض واضح وخطة تنفيذ.

تواصل معي على إنستغرامAbdallah

Get the next guide by email

One email per new video. No spam, unsubscribe anytime.

More gifts