ربما اكتشفت بالفعل أن السحر الأساسي لـenter.converge.aiيكمن فيprompt. إنها اللغة التي تستخدمها للتواصل والتعاون والإبداع مع الذكاء الاصطناعي الخاص بنا.

كلما كان الـ prompt الخاص بك أفضل، كانت النتيجة أكثر إبهاراً.

فكّر فيEnterكمطور مبتدئ عبقري وسريع للغاية... لكنه لا يجيد قراءة الأفكار إطلاقاً. يمكنه بناء أي شيء تطلبه، لكنه لا يستطيع تخمين قصدك. وظيفتك هي تقديم مجموعة تعليمات واضحة تماماً، مثل وثيقة متطلبات عمل (BRD) مثالية.

سيرشدك هذا الدليل عبر فن وعلم كتابة الـ prompt بفعالية، ليأخذك من مستوى المبتدئ إلى المحترف.

الجزء الأول: المبادئ الأساسية — بناء أساس متين

قبل أن تبني أي شيء، احفظ هذه القواعد الذهبية الثلاث.

القاعدة الأولى: الوضوح هو الملك (توقف عن الغموض)

الغموض هو أسوأ عدو لك. يجب أن تكون تعليماتك دقيقة للغاية.

الـ prompt السيئ 👎:

"أحتاج إلى خطط الأسعار لموقعي."

الـ prompt الجيد 👍:

"أنشئ مكون قسم أسعار تفاعلي بالميزات التالية: - 3 مستويات تسعير (Starter, Professional, Enterprise) مع زر تبديل شهري/سنوي - خلفية حقل نجوم متحركة تتفاعل مع حركة الماوس باستخدام Framer Motion - تأثير قصاصات ورق ملونة (Confetti) عند التبديل إلى الفوترة السنوية - انتقالات أسعار سلسة باستخدام @number-flow/react - بطاقة احترافية مع شارة "الأكثر شيوعاً" ترتفع عند استخدام سطح المكتب - زر تبديل شهري/سنوي مع تأثير انزلاق متحرك - تصميم متجاوب مع حركات بطاقات متتابعة عند التمرير - نظام ألوان أزرق عصري باستخدام رموز التصميم الدلالية (semantic design tokens)"

https://9564a74b85ba4b6b877a95dcf70a26a8.prod.enterapp.pro

نصيحة احترافية: ابدأ الـ prompts الخاصة بك بأفعال قوية ونشطة مثلCreate،Generate،Refactor،Write،Design، أوList

القاعدة الثانية: السياق هو الملكة (قدّم "السبب")

Enterليس لديه أي فكرة عما هو مشروعك، ولمن هو موجه، أو ما هي أهدافك. يجب عليك توفير "السبب" الكامن وراء "ماذا".

الـ prompt السيئ 👎:

"أنشئ صفحة هبوط لي."

مطالبة جيدة 👍:

"أقوم ببناء صفحة هبوط لـ 'Chroma'، وهو مولد لوحة ألوان جديد يعتمد على AI للمصممين. يجب أن يكون التصميم مستقبلياً، وفنياً، وراقياً لإبهار هذا الجمهور. أريد قسماً رئيسياً (hero section) يعتمد على 'glassmorphism' مع خلفية متدرجة متحركة وناعمة. بدلاً من قائمة 'ميزات' مملة، أريد قسماً تفاعلياً حيث يمكن للمستخدم رؤية نماذج لوحات الألوان مطبقة ديناميكياً على بطاقة واجهة مستخدم تجريبية. هذه هي نقطة البيع الرئيسية."

https://a9e8f5c49fbf4b2ca5a7ed6db9253f69.prod.enterapp.pro

القاعدة 3: فرض الاتساق (حدد "إطار عملك")

ليس لدى AI ذوق افتراضي. بدون قواعد، سيصبح فناناً فوضوياً. يجب عليك تحديد "الإطار" — نظام التصميم الخاص بك — ليعمل الـ AI ضمنه. هذا هو سر التطبيق المصقول والاحترافي.

ممارسة سيئة 👎:

"اصنع زر CTA أزرق."

"أنشئ بطاقة تسعير وقم بتمييز خطة 'Pro'."

ممارسة جيدة 👍:

"التطبيق عبارة عن أداة تحليل مالي متطورة، لذا يجب أن يكون المظهر 'الوضع المظلم أولاً' (dark mode first)، واحترافياً، وكثيف البيانات، مثل Bloomberg Terminal أو Linear. افرض هذه القواعد: المظهر: الوضع المظلم فقط. الخلفية: '#111111'. خلفية البطاقة/الوحدة الرئيسية: '#1A1A1A'. الخطوط: استخدم 'Inter' لجميع النصوص. استخدم 'SF Mono' لجميع الأرقام والبيانات المالية. لون التمييز: لون تمييز واحد نابض بالحياة: '#00F5D4' (أزرق مخضر ساطع). استخدم هذا فقط لأزرار CTA الرئيسية ونقاط البيانات النشطة. النمط: لا تستخدم تدوير الزوايا (border-radius)؛ يجب أن تحتوي جميع العناصر على زوايا حادة بـ 90 درجة. استخدم حدوداً بـ 1px بلون '#333333' لتحديد المكونات، وليس الظلال."

https://41849c3aa6604b49a9b8a9a6e6cb5df4.prod.enterapp.pro

الجزء 2: enter.converge.aiدليل العمل — البناء مثل Lego

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

الاستراتيجية 1: ابْنِ بنظام الوحدات، وليس ككتلة واحدة (طريقة Lego)

هذا هو الخطأ الأول للمبتدئين. لا تحاول جعل Enterينشئ تطبيقاً كاملاً ومعقداً دفعة واحدة.

النهج الاحترافي هو بناء شاشة واحدة كاملة أو تدفق مستخدم واحد في كل مرة.

مطالبة سيئة 👎:

"ابنِ لي تطبيقاً مثل Airbnb."

مطالبة جيدة 👍:

"لنقم ببناء تدفق حجز المستخدم الكامل لنسخة Airbnb الخاصة بنا، 'Roam'. سنقوم بذلك شاشة تلو الأخرى. ابدأ بالشاشة 1: صفحة تفاصيل القائمة. تحتاج هذه الشاشة إلى شبكة صور (مثل Airbnb، صورة رئيسية واحدة و4 صور أصغر)، وشريط جانبي 'ثابت' (sticky) على اليمين مع وحدة الحجز/السعر في الليلة، وعمود المحتوى الرئيسي على اليسار."

"حسناً، رائع. الآن، أنشئ الشاشة 2: صفحة 'التأكيد والدفع'. عندما ينقر المستخدم على 'حجز' من الشاشة 1، يصل إلى هنا. تحتاج هذه الصفحة إلى عرض ملخص الحجز، وتفاصيل السعر، ونموذج بسيط وعالي الأمان لإدخال بطاقة الائتمان. يجب أن يكون التصميم نظيفاً للغاية وجديراً بالثقة لزيادة التحويل إلى أقصى حد."

https://26985927857e4d70be5075c634aae015.prod.enterapp.pro

الاستراتيجية 2: تقديم أمثلة (Few-Shot Prompting)

عندما يصعب وصف نمط التصميم الذي تريده، أرِهِ ولا تكتفِ بالشرح. قدم مثالاً مصغراً للمدخلات/المخرجات لتعليم Enterنمطك البصري المطلوب.

مطالبة سيئة 👎:

"أحتاج إلى عرض قائمة بأعضاء فريقي."

مطالبة جيدة 👍:

"أحتاج إلى إنشاء صفحة 'تعرّف على الفريق'. لدي قائمة بأسماء الأشخاص، لكنني أريد تطبيق نمط بصري محدد عليهم. إليك النمط الخاص بي: نمط الإدخال: [الاسم]، [الدور]، [سيرة ذاتية مختصرة]، [رابط الصورة]. نمط الإخراج (التصميم البصري): أنشئ بطاقة. يجب أن يكون [رابط الصورة] بنسبة عرض إلى ارتفاع 3:4 مع تطبيق مرشح (فلتر) رمادي افتراضيًا. التفاعل: عند تمرير المؤشر، تتحول الصورة إلى ألوان كاملة وتكبر قليلاً (scale 1.05). أسفل الصورة، اعرض [الاسم] بخط 'Inter' بأحرف كبيرة (tracking-wide). أسفل الاسم، اعرض [الدور] بخط 'serif'، مائل، ورمادي فاتح. * الآن، طبق نمط الإخراج البصري هذا بدقة على البيانات التالية: [بيانات لـ 3 أعضاء في الفريق...]. ثم، اعرض البطاقات الأربع في شبكة متجاوبة مكونة من 3 أعمدة."

https://203ec90377454c449b382cba0dd6dc99.prod.enterapp.pro

الجزء 3: تقنيات متقدمة — اجعل AI شريكك

بمجرد إتقانك للأساسيات، استخدم هذه التقنيات لرفع مستوى سير عملك.

التقنية 1: اطلب من AI أن يطرح عليك الأسئلة

لست متأكداً مما إذا كنت قد قدمت تفاصيل كافية لشاشة تطبيق معقدة؟ اعكس الأدوار واجعل Enterيُنشئ المتطلبات.

مطالبة سيئة 👎:

"أريد صفحة ملف تعريف مستخدم."

مطالبة جيدة 👍:

"أريد تصميم منطقة 'إعدادات الحساب' الكاملة لمستخدم. ستكون هذه صفحة معقدة تحتوي على علامات تبويب متعددة. قبل البدء في البناء، اطرح علي 5 أسئلة جوهرية حول الأقسام المطلوبة، والبيانات، وإجراءات المستخدم (مثل 'مناطق الخطر' لحذف الحساب) حتى تتمكن من إنشاء التصميم المثالي."

التقنية 2: تحدث كمدير فني

Enterيعرف المصطلحات. استخدم كلمات رئيسية متخصصة لتحديد جمالية معقدة بسرعة.

مطالبة سيئة 👎:

"اصنع لي موقعاً إلكترونياً لعرض صوري."

مطالبة جيدة👍

"ابنِ صفحة رئيسية لمصور أزياء راقٍ. يجب أن تكون الجمالية 'تحريرية' و'بسيطة'. أريد تخطيط 'شبكة مكسورة' غير متماثلة بملء الشاشة، مستوحى من 'Awwwards' أو 'Vogue'. يجب أن تكون الشبكة تفاعلية: عندما يمرر المستخدم المؤشر فوق صورة، يجب أن تتوسع قليلاً (مثلاً، scale: 1.05) وتتحول من الرمادي إلى الألوان الكاملة. يجب أن يكون الخط جريئاً وأنيقاً من نوع Serif (مثل 'Playfair Display')، مع تداخل بعض العناوين مع الصور. يجب أن يكون التنقل صغيراً وبسيطاً بخط sans-serif، ومثبتاً في الزاوية العلوية اليسرى."

https://d38e2d22eb6b4173b8adfefb7a02816a.prod.enterapp.pro

التقنية 3: كيفية التصحيح (عندما تسوء الأمور)

عندما Enterيتعثر أو يرتكب خطأً بصرياً في تطبيقك، لا تقل فقط "أصلحه". وجهه كمطور أول.

قدم لقطة شاشة 🌟: هذه هي الطريقة الأسرع. قم بتحميل لقطة شاشة للجزء المعطل ورسالة الخطأ.

"كما ترى في لقطة شاشة الهاتف هذه، تتجاوز البطاقات حدود الحاوية. يجب أن تكون في تخطيط flex بعمود واحد على الشاشات التي يقل عرضها عن 600 بكسل. يرجى التحقق من وسائط الاستعلام (media queries)."

اسأل عن السبب 🌟:

"ما هو السبب الجذري لهذا التحول في التخطيط؟ اشرحه لي بكلمات بسيطة."

محور الارتكاز 🌟:

"يبدو أن نهج CSS Grid هذا يفشل. لنحاول استخدام طريقة مختلفة تماماً. أعد هيكلة هذا القسم بالكامل لاستخدام Flexbox بدلاً من ذلك."

الخلاصة: رحلتك قد بدأت للتو

صياغة الأوامر (Prompting) هي فن ومهارة في آن واحد. أفضل طريقة للتعلم هي من خلال التجربة والخطأ والتكرار.

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

الآن، اذهب إلى enter.converge.aiوجرّب أمرك الأول!

الملحق: ورقة الغش الخاصة بـ enter.converge.aiلصياغة الأوامر

جرب استخدام هذه الكلمات المفتاحية في أوامرك. فهي تساعد Enterعلى فهم قصدك بدقة.

Category	Keywords
Layout	`Responsive`, `Grid layout`, `Flexbox`, `Three-column layout`, `Sidebar`, `Navbar`, `Footer`, `Header`, `Full-width`, `Centered`, `Sticky`, `Split-screen`, `Masonry layout`, `Dashboard layout`, `Card-based layout`
Style	`Glassmorphism`, `Neumorphism`, `Minimalist`, `Techy`, `Corporate`, `Modern`, `Dark mode`, `Rounded corners`, `Shadow`, `Gradient`, `Brutalist`, `Playful`, `Editorial`, `Futuristic`, `Retro`, `Pastel`, `High contrast`, `Clean white`, `Colorful accents`
Component	`Modal`, `Popup`, `Date picker`, `Carousel`, `Slider`, `Accordion`, `Tabs`, `Breadcrumbs`, `CTA button`, `Form`, `Input field`, `Dropdown`, `Table`, `Pagination`, `Search bar`, `Sidebar menu`, `Chat bubble`, `Notification toast`, `Progress bar`, `Stepper`, `Timeline`, `Card`
Animation & Motion	`Hover animation`, `Fade-in`, `Slide-up`, `Parallax scrolling`, `Microinteraction`, `Smooth transition`, `Framer Motion`, `GSAP-like`, `Scroll-based reveal`, `Animated gradient`, `Looping hero video`, `Subtle hover glow`, `Animated icons`
Inspiration	`Inspired by Linear`, `Like Superhuman's onboarding`, `Airbnb-style grid`, `Bloomberg-style (data-dense)`, `Notion-like interface`, `Framer aesthetic`, `Apple-style marketing page`, `Stripe documentation look`, `Pitch deck vibe`, `Figma-like collaboration feel`