كيف بنيت مستكشف مفاهيم مدعومًا بـ AI في 4 ساعات باستخدام Enter

استخدم مصمم لا يملك أي خبرة في تطوير الواجهات الخلفية (backend) منصة Enter.pro لبناءEssence— وهو تطبيق لوحة (canvas) مدعوم بالذكاء الاصطناعي يقوم بتفكيك أي مفهوم إلى لبناته الأساسية. من مجرد فكرة إلى منتج جاهز بالكامل مع دمج الذكاء الاصطناعي، ودعم ثنائي اللغة، وتجربة معززة بعناصر الألعاب — كل ذلك في 4 ساعات فقط.

الشرارة

بصفتي مصمماً، لطالما أثار فضولي سؤال واحد: من أين يأتي الإبداع؟

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

قادتني تلك الفكرة إلىEssence— وهي لوحة لاستكشاف المفاهيم مدعومة بالذكاء الاصطناعي. أدخل أي مفهوم، وسيقوم الذكاء الاصطناعي بتفكيكه إلى عناصره الجوهرية. ثم، من خلال إعادة دمج تلك العناصر، تبدأ أفكار جديدة في الظهور.

لماذا Enter

أنا مصمم منتجات، ولست مطوراً متكاملاً (full-stack). كانت فكرة Essence تتطلب عدة أشياء بدت لي مخيفة:

• لوحة تفاعليةمع ميزات السحب والإفلات، والتكبير والتصغير، والتحريك — وهو نوع واجهة المستخدم المعقدة الذي تراه في أدوات مثل Figma أو Miro.

• دمج الذكاء الاصطناعيلتشغيل منطق تفكيك المفاهيم وإعادة دمجها.

• **واجهة خلفية بدون خادم (serverless backend)**لمعالجة طلبات API الخاصة بالذكاء الاصطناعي بشكل آمن.

• **النشر (Deployment)**لكي يتمكن الناس من استخدامه فعلياً.

كان الاتصال بـ API لنماذج اللغة الكبيرة (LLM) عائقاً أمام معظم غير المطورين — مفاتيح API، إعداد البيئة، ومنطق المصادقة.

مع ميزة AI All في Enter، قلت فقط: "استخدم Claude Sonnet 4.5"، وقام النظام بربط كل شيء — وظائف الحافة (Edge Functions) في الواجهة الخلفية، وتنسيق الطلبات، ومعالجة الأخطاء.

معEnter.pro، لا ألمس البنية التحتية على الإطلاق. أنا أصف ما أريده، وهو يتولى التعامل مع React، وSupabase، وEdge Functions، ودمج النماذج. أنا أركز فقط على "ماذا" و"لماذا".

البناء: 5 مراحل في 4 ساعات

المرحلة الأولى: التأسيس

نظمت الفكرة في ذهني في توجيه (prompt) شامل وأرسلتها إلى Enter. إليك الخلاصة:

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

بعد قراءة هذا التوجيه، كان أول ما فعله Enter هو تحميل قدرات الذكاء الاصطناعي الخاصة به، ثم سألني مباشرة: "أي نموذج ذكاء اصطناعي تود استخدامه لتفكيك وإعادة تركيب المفاهيم؟" عرض الخيارات المتاحة — GPT-5.2 Pro، وGemini 3 Pro، وClaude Sonnet 4.5 — مع توضيح التكلفة والسرعة ونقاط القوة لكل منها. اخترت Claude Sonnet 4.5 (الممتاز في اتباع التعليمات والمهام الإبداعية)، وقام Enter بربط اتصال API بالكامل تلقائياً.

بعد دقائق، كانت بنية المشروع كاملة وجاهزة — React 18 مع TypeScript، وVite كأداة بناء، وTailwind CSS للتنسيق، و@xyflow/reactللوحة، ووظيفة Edge Function من Supabase متصلة بـ API الخاص بـ Claude. كان منطق التفكيك وإعادة الدمج الأساسي يعمل من المحاولة الأولى.

المرحلة الثانية: ضبط منطق الذكاء الاصطناعي

كان هذا الجزء الأكثر أهمية وإثارة في المشروع بأكمله. يعتمد كون Essence ممتعاً أو مملاً بالكامل على جودة مخرجات الذكاء الاصطناعي. يقسم الكود النهائي منطق الذكاء الاصطناعي إلى ثلاث وظائف مستقلة، لكل منها استراتيجيات توجيه (prompts) مصممة بعناية.

المشكلة: كان الذكاء الاصطناعي "أكاديمياً" أكثر من اللازم

بعد تشغيل الإصدار الأول، كانت نتائج AI مضحكة بشكل غير مقصود؛ عند إدخال "scissors" كانت النتيجة "pincer appendages" و"symmetrical evolution"؛ وعند إدخال "love" كانت النتيجة "neurotransmitters" و"quantum states". تقنياً ليست خاطئة، لكنها ليست ممتعة على الإطلاق، وليست بديهية. لم تكن هذه هي التجربة التي أردتها.

#1 الإصلاح: منح AI شخصية

كان الاختراق الرئيسي هو تحديد دور نظام واضح لـ AI - ليس "أنت مساعد تفكيك"، بل**"أنت لعبة تفكيك ممتعة. حوّل الأشياء المعقدة إلى لبنات بناء بسيطة! استخدم كلمات يومية."**هذه الجملة الواحدة حولت أسلوب المخرجات تماماً من ورقة أكاديمية إلى محادثة مرحة.

#2 الإصلاح: أمثلة إيجابية + أنماط سلبية

وجدت أن الأمثلة الإيجابية وحدها لم تكن كافية - حيث كان AI ينزلق أحياناً إلى النمط الأكاديمي. لذا قمت بتضمين أمثلة جيدة وسيئة في آن واحد:

**أمثلة جيدة:**Scissors → 🔪 شفرة + 🔗 مفصلة (شفرتان متصلتان بمفصلة) Coffee → ☕ ماء ساخن + 🫘 حبوب (ماء ساخن + حبوب قهوة) Friend → 👤 شخص + 🤝 ثقة (أشخاص يثقون ببعضهم البعض) Dream → 😴 نوم + 💭 خيال (خيال أثناء النوم)أمثلة سيئة (أكاديمية أكثر من اللازم):❌ زوائد كلابية، تطور متماثل، نواقل عصبية، حالات كمومية

هذا "التباين بين الإيجابي والسلبي" منح AI فهماً دقيقاً جداً للنبرة التي أردتها:بسيطة، بديهية، وتلك التي تجعل الناس يبتسمون أو يشعرون بلحظة "وجدتها!".

#3 الإصلاح: ثلاث وظائف، ثلاث استراتيجيات

تم تقسيم منطق AI النهائي إلى ثلاث وظائف مستقلة، لكل منها تصميم "prompt" خاص وضبط للمعايير:

① توليد الإيموجي (generateEmojiForConcept): عندما يدخل المستخدم مفهوماً ما، يقوم استدعاء منفصل لـ AI أولاً بتوليد إيموجي مطابق دلالياً. تم ضبط دور النظام على "أنت مولد إيموجي. أنت تخرج JSON فقط"، مع درجة حرارة 0.7 (الدقة فوق الإبداع)، مسترشداً بأمثلة few-shot: stone → 🪨، fire → 🔥، love → ❤️. إذا فشل التحليل، فإنه يعود بذكاء إلى إيموجي افتراضي هو ✨.

② تفكيك المفهوم (decomposeConcept): الوظيفة الأساسية. يوجه الـ prompt الـ AI لـ "تفكيك الأشياء مثل لبنات البناء"، مع إرجاع عقدتين بالضبط (إيموجي + كلمة قصيرة) بالإضافة إلى شرح من جملة واحدة. تم ضبط درجة الحرارة على 0.8 — أعلى من توليد الإيموجي للسماح بمساحة إبداعية أكبر. قرار التصميم الحاسم: كل طلب يحقن قيمة عشوائية (randomSeed)، مما يضمن أن المفهوم نفسه ينتج نتائج مختلفة في كل مرة — وهذا يمنح الاستكشاف "قابلية إعادة" حقيقية.

③ إعادة تركيب المفاهيم (recombineConcepts): الجزء الأكثر إبداعاً. يصيغ الـ prompt الأمر كـ "فكر كأنك في لعبة"، مع أمثلة خيالية: ماء + نار = بخار ♨️، دقيق + نار = خبز 🍞، إنسان + أجنحة = ملاك 👼، حزن + فرح = حياة 🎭. يجب أن تكون النتائج "مفاجئة، ثاقبة، فكاهية قليلاً، وغير بديهية". نفس تقنية randomSeed للتنوع.

#4 الإصلاح: شرح التمرير (Hover) يجعل المنطق مرئياً

كل عملية تفكيك أو إعادة تركيب لـ AI تعيد أيضاً شرحاًمختصراً. لا يظهر هذا النص مباشرة على العقدة (للحفاظ على واجهة بسيطة)، ولكنه يُخزن في بيانات العقدة. عندما يمرر المستخدم مؤشر الماوس فوق عقدة، تظهر HoverCard أنيقة تعرض سلسلة التفكير الكاملة:

• العقد المفككة(ملصقات زمردية): 🎭 دراما = 😢 صراع + 👥 شخصيات، مع عبارة "الدراما هي أساساً صراع بين الشخصيات" في الأسفل

• العقد المدمجة(ملصقات بنفسجية): 😴 نوم + 💭 خيال = 💫 حلم، مع عبارة "الخيال أثناء النوم هو حلم" في الأسفل

هذا التصميم يجعل طبقات المعلومات أنيقة بشكل رائع — على السطح، بطاقات إيموجي بسيطة؛ وعند الفحص الدقيق، عملية تفكير الـ AI.

النتيجة

بعد كل هذا الضبط، تحسنت جودة مخرجات AI بشكل كبير:

❤️ حب → 👤 شخص + 🤝 ثقة (أشخاص يثقون ببعضهم البعض) ☕ قهوة → 🫘 حبوب + ☕ ماء ساخن (ماء ساخن يلتقي بحبوب القهوة) 💭 حلم → 🔮 خيال + 🔥 رغبة (رؤية متقدة للمستقبل) 🔥 نار + 💧 ماء = ♨️ بخار 😴 نوم + 💭 خيال = 💫 حلم

كل عملية تفكيك تثير لحظة "وجدتها!"؛ وكل عملية إعادة تركيب ترسم ابتسامة. تلك هي قوة هندسة الأوامر (prompt engineering) — فالأمر لا يتعلق بكتابة المزيد من الكود، بل بإيجاد الطريقة الصحيحة للتحدث إلى AI.

المرحلة 3: تحسين التفاعل

هنا بدأ التطبيق يبدو حياً:

• اختيار عقدة واحدة (node) → يظهر زر "تفكيك" (Decompose)— لتفكيكها بشكل أكبر

• الضغط على Shift + النقر على عقدتين → يظهر زر "إعادة تركيب" (Recombine)— لدمجهما معاً

• النقر المزدوج على أي عقدة → تفكيك فوري— استكشاف سريع

• تمرير الفأرة فوق أي عقدة تمت معالجتها → رؤية منطق AIفي HoverCard

أضفت أيضاً طبقة ألعاب (gamification) خفيفة: تبدأ بـ 20 نقطة(التفكيك يكلف 1، وإعادة التركيب تكلف 2)، مما يخلق قيداً لطيفاً يجعلك تفكر في المسارات التي ستستكشفها. تُحفظ النقاط محلياً، ويمكنك دائماً إعادة التعيين.

المرحلة 4: تحسين تصميم واجهة المستخدم

مع عمل الوظائف، كان التركيز التالي هو جعل Essence تبدوبجمال أدائها.

كان أول قرار تصميم رئيسي هو الخطوط. اخترت Bricolage Grotesqueكخط عالمي — وهو خط sans-serif هندسي وعصري رفع التطبيق فوراً عن مستوى خطوط النظام الافتراضية ومنحه هوية علامة تجارية مميزة.

مرت صور بطاقات العقد بعدة تكرارات. استقر التصميم النهائي على بطاقات مستطيلة كبيرة ذات زوايا دائرية (rounded-2xl) مع خلفيات باستيل ناعمة — ألوان amber-50، وemerald-50، وviolet-50 موزعة عشوائياً — مع رمز تعبيري كبير كمرتكز بصري وتسمية قصيرة في الأسفل. انتهى الأمر باللوحة الفنية لتبدو كأنها قصاصات ملاحظات ملونة مبعثرة: خفيفة، مرحة، وغير مزدحمة.

مربع الإدخال هو "الانطباع الأول" للتطبيق، لذا وضعت أعلى المعايير له. هنا تألقت ميزة Enter Componentsفي Enter — وهي مكتبة مكونات AI مدمجة حيث يمكنك البحث عن المكونات ومعاينتها وإضافتها بنقرة واحدة. كتبت "ai" في شريط البحث واكتشفت مكوناً يسمى claude-style-chat-input— وهو مدخل محادثة ذو تصميم أنيق. نقرت على "+ إضافة إلى الدردشة"، وقامت Enter بدمجه تلقائياً في مشروعي، مع تكييف التصميم ليتناسب مع لغة التصميم الحالية. تحول مدخل HTML البسيط فوراً إلى تجربة إدخال محادثة مصقولة — حواف دائرية، ظلال ناعمة، تخطيط زر مضمن — متناغمة تماماً مع الهوية البصرية للتطبيق.

لا حاجة لكتابة المكونات من الصفر أو العبث بـ CSS. تتيح لك Enter Components تجميع واجهة مستخدم عالية الجودة مثل مكعبات البناء، وتقوم Enter تلقائياً بضبط التصميم للحفاظ على الاتساق البصري.

أخيراً، أضفت مجموعة من بطاقات المفاهيم سريعة البدء— ❤️ حب، 💰 مال، ⏰ وقت، 🌳 شجرة، 🎵 موسيقى، 💭 حلم — معروضة كبطاقات صغيرة ملونة ومائلة على شاشة الترحيب، مما يقلل من حاجز البدء البارد ويجعل المستخدمين يفهمون فوراً ما يمكنهم كتابته.

المرحلة 5: التدويل (Internationalization)

تم بناء Essence لجمهور عالمي، لذا لم يكن دعم اللغتين الصينية والإنجليزية أمراً ثانوياً — بل كان ضرورياً.

لكن التدويل لا يتعلق فقط بترجمة نصوص واجهة المستخدم. في Essence، يجب أن تتطابق مخرجات AI أيضاً مع اللغة المختارة للمستخدم — في وضع اللغة الصينية، يجب أن يؤدي تفكيك "爱" إلى نتائج بالصينية مثل "人 + 信任"؛ وعند التبديل إلى وضع اللغة الإنجليزية، يجب أن يؤدي تفكيك "Love" إلى "Person + Trust". هذا يعني أن مفتاح تبديل اللغة في الواجهة الأمامية يجب أن ينقل الإعداد وصولاً إلى طبقة أوامر AI.

للتنفيذ، استخدمت Zustand لإدارة حالة اللغة بشكل خفيف. يعمل نظام i18n بالكامل على النحو التالي: ينقر المستخدم على مفتاح تبديل اللغة في الزاوية العلوية اليمنى ← يتم تحديث الحالة العالمية ← تتحول جميع نصوص واجهة المستخدم فوراً ← تتلقى طلبات AI معلمة اللغة الحالية ← تختار قوالب الأوامر النسخة الصينية أو الإنجليزية ← تتطابق مخرجات AI تلقائياً مع لغة المستخدم. يتم أيضاً حفظ تفضيلات اللغة في localStorage، مما يسمح باستعادتها بسلاسة في الزيارة التالية.

في Enter، تطلب تحقيق كل هذا وصفاً واحداً فقط: "أضف مفتاح تبديل للغة الصينية/الإنجليزية مع زر لغة في الزاوية العلوية اليمنى. يجب أن تتحول جميع نصوص واجهة المستخدم، وأوامر AI، ومخرجات AI تلقائياً بناءً على اللغة المختارة." قامت Enter بهيكلة خط الأنابيب بالكامل — من إدارة الحالة إلى تفرع قوالب الأوامر إلى الحفظ المحلي — في خطوة واحدة.

وقد أكد هذا أيضًا درسًا مهمًا:كلما قمت بدمج i18n مبكرًا، كان ذلك أفضل. إذا انتظرت حتى تكتمل جميع الميزات قبل إضافة التدويل (internationalization)، فستجد نصوصًا ثابتة (hardcoded) متناثرة في مطالباتك (prompts) وسلاسل واجهة المستخدم مدمجة في كل مكون - وستكون عملية التعديل اللاحقة مؤلمة. ابنِ البنية التحتية متعددة اللغات من اليوم الأول، وبعد ذلك ستكتفي بإضافة محتوى الترجمة فقط.

---

ما الذي يجعل Essence مميزًا

التفكيك: رؤية الهيكل غير المرئي لكل شيء

اكتب أي كلمة. سيقوم AI بتفكيكها إلى مفهومين ذريين بدقة — لكل منهما رمز تعبيري دلالي وشرح من جملة واحدة. ثم استمر في ذلك. فكك تلك المفاهيم أيضًا. شاهد شجرة المفاهيم وهي تنمو أمام عينيك.

🎭 دراما ← 😢 صراع + 👥 شخصيات 😢 صراع ← ⚡ توتر + 🎯 أهداف 👥 شخصيات ← 👤 إنسان + 💬 قصة

إعادة التركيب: ابتكار أفكار جديدة من ذرات الأفكار القديمة

اختر أي عقدتين (nodes) على اللوحة — حتى من فروع مختلفة تمامًا — وقم بدمجهما. سيجد AI الرابط المفاجئ بينهما.

🔥 نار + 💧 ماء = ♨️ بخار 😴 نوم + 💭 خيال = 💫 حلم 👤 إنسان + ✈️ أجنحة = 👼 ملاك

العب، لا تكتفِ بالتفكير

يحول نظام الـ 20 نقطة الاستكشاف المجرد إلى لعبة ممتعة. كل نقرة هي اختيار. أي فرع ستستكشف؟ أي ذرات ستدمج؟ إنها مساحة تجريبية للفضول.

حزمة التقنيات (Tech Stack) — تم تجميعها بواسطة Enter

لم أقم بتهيئة أي من هذا يدويًا. قام Enter.pro بتجميع الحزمة الكاملة بناءً على أوصافي ومطالباتي التكرارية.

الدروس المستفادة

1. المطالبة من طبقتين، وعقليتان

بناء تطبيقات AI باستخدام Enter هو عبارة عن محادثتين متزامنتين: التحدث إلى Enter يشبه التعاون مع مهندس برمجيات متكامل - يتطلب متطلبات واضحة؛ أما التحدث إلى Claude داخل التطبيق فيشبه التعاون مع شريك إبداعي - يتطلب توجيهًا عاطفيًا وتعليمًا يعتمد على الأمثلة. إتقان كلا الطبقتين هو الحرفة الحقيقية.

2. امنح الـ AI شخصية، وليس مجرد قواعد

تغيير دور النظام من "أنت مساعد تفكيك مفاهيم" إلى "أنت لعبة تفكيك ممتعة" غير أسلوب المخرجات بالكامل في جملة واحدة. القواعد تقيد التنسيق؛ الشخصية تحدد الجودة.

3. الأمثلة الإيجابية + الأنماط المضادة تتفوق على الأوصاف الطويلة

✅ مقص ← شفرة + مفصل ❌ زوائد كلابية، تطور متماثل، نواقل عصبية

هذه الأسطر الثلاثة تنقل أكثر مما يمكن أن تنقله 100 كلمة. التباين بين الإيجابي والسلبي هو أكثر تقنيات هندسة المطالبات (prompt engineering) استخفافًا.

4. البذور العشوائية (Random Seeds) تمنح منتجات الاستكشاف إمكانية إعادة اللعب

المفهوم نفسه يعطي نتائج مختلفة في كل مرة — اليوم "الحب = إنسان + ثقة"، غدًا "الحب = ضعف + شجاعة". البذور العشوائية + درجة حرارة (temperature) 0.8 تزيد التنوع إلى أقصى حد مع الحفاظ على الجودة. شريان الحياة لأي منتج استكشافي هو "شيء جديد في كل مرة".

5. القيود تخلق اللعب

حول نظام الـ 20 نقطة النقرات العشوائية إلى استكشاف استراتيجي. مبدأ كلاسيكي في تصميم الألعاب:الخيارات الهادفة تتطلب موارد محدودة.

6. "Vibe Coding" بالطريقة الصحيحة: ركز على مرحلة واحدة في كل مرة

الأساس أولاً ← ثم شخصية AI ← ثم صقل التفاعل ← ثم التصميم البصري ← ثم i18n. تركز كل مرحلة على بُعد واحد، مما يجعل المحادثة مع Enter دقيقة والمخرجات متوقعة.

🔗ابنِ تطبيقك الخاص باستخدام Enter: enter.converge.ai