الدليل الكامل اللي بياخدك من فكرة بدماغك → Design System كامل → صفحات جاهزة → Figma أو كود. مش tutorial نظري — هاد الـ workflow اللي بشتغل فيه فعلياً على مشاريع حقيقية.

🎯 لمين هاد الدليل

إنت مطوّر بتعرف تبرمج، بس أول ما تسمع UI/UX بتحس إنه عالم تاني مش إلك. الخبر الحلو: AI خلّى أي مطوّر يبني واجهات احترافية — بشرط واحد: تعرف شو بدك بالضبط، وتعرف قواعد UI الأساسية عشان تحكم على النتيجة.

الدليل هاد مش بيعلّمك كيف تكتب برومبت "مثالي"، ومش بيعلّمك أساسيات التصميم من الصفر. بيعلّمك الآلية — كيف تشغّل أداتين مع بعض (Claude + Stitch) عشان تنجز شغل أسبوع بساعات.

🧩 الفكرة بسطر واحد

بدل ما تروح على Stitch وتكتبله "اعمللي dashboard" وتطلعلك نتيجة عشوائية بكل صفحة — بتخلّي Claude يبني إلك أولاً ملف design.md (الـ Design System كامل)، وبعدين Stitch بيبني كل الصفحات ملتزم بنفس الهوية. هون السر.

Claude (حوار + design.md)  →  Stitch (Design System + صفحات)  →  Figma / كود (تشطيب بإيدك)

🛠️ الأدوات اللي بتحتاجها (كلها مجانية)

الأداة دورها Claude (أو ChatGPT / Gemini) بيحلل الهوية البصرية، بيحاورك، وبيكتب ملفات البرومبت والـ design.md Stitch (من Google) بيبني الـ UI الفعلي من الملفات اللي جهّزها Claude Figma التشطيب النهائي + التسليم لوجو + محتوى مبدئي مدخلاتك الأساسية للـ AI

ملاحظة: تقدر تستبدل Claude بأي LLM بتفضّله. الفكرة في الآلية مش في الأداة بعينها.

📍 المرحلة 1 — التحليل والتجهيز (مع Claude)

هاي أهم مرحلة، وأغلب الناس بتتخطّاها وبتروح مباشرة على أداة البناء — وهون بيصير الخراب.

الخطوة 1: افتح حوار مع Claude (مش برومبت محترف)

ارفعله اللوجو + احكيله عن المشروع بشكل طبيعي:

"بدي أبني web site لفريق تقني. بدي إنت تحلّلي شو الصفحات اللي بحتاجها، وتحلّل الهوية البصرية من اللوجو، وبعدين تساعدني أكتب البرومبتات. أنا رح أستخدم Stitch من Google لبناء الـ UI — اشتغل حسب قواعد UI/UX محترفة."

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

الخطوة 2: جاوب على أسئلته بقرارات واضحة

Claude رح يسألك أسئلة زي:

  • شو الهدف الأساسي؟ (جذب عملاء؟ عرض خدمات؟)

  • لغة الموقع؟ → RTL للعربي

  • كم صفحة وشو هي؟

  • صفحة الأسعار فيها سعر واحد ولا أكتر؟ صفحة التواصل فورم ولا حجز؟

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

الخطوة 3: خلّي Claude يكتبلك ملفّين

في نهاية الحوار، اطلب منه:

أ) ملف design.md — الأهم على الإطلاق 🏆

هاد الـ Design System كامل: الألوان، الخطوط، قواعد RTL، المسافات، التفاصيل البصرية كاملة. ليش مهم لهالدرجة؟ لأنه Stitch رح يعتمد عليه في كل صفحة — فما رح يخترع تصميم أو خط أو ألوان من عنده بكل مرة. كل صفحة جديدة رح تتبع نفس القواعد = هوية موحّدة.

خلّي Claude هو اللي يبحث ويكتبه (لا تكتبه إنت). بس وضّحله احتياجاتك: RTL، زر تبديل لغات، حركات معينة، أي تفاصيل خاصة بالـ UI تاعك.

ب) ملف برومبت لكل صفحة

ملف .md فيه اسم كل صفحة وتحته البرومبت التفصيلي تاعها. هاد عشان تنسخه مباشرة لـ Stitch صفحة صفحة.

📍 المرحلة 2 — بناء الـ Design System (في Stitch)

الخطوة 4: إعدادات Stitch الصحيحة

  1. افتح Stitch واختار Web (مش App) — لأنك بتبني web.

  2. اختار الموديل: Flash أسرع، بس Pro غالباً بيطلع نتيجة أدق.

  3. دوّر على زر "Use design.md" → اضغط Start with your design.

في خيار "designs جاهزة"، بس إحنا بدنا design خاص فينا.

الخطوة 5: الصق design.md

انسخ محتوى design.md من Claude → الصقه في المكان المخصص في Stitch (Copy / Paste). ارفع اللوجو كمان (يُفضّل نسخة شفافة وكبيرة، لأنه رح يُستعمل بكل الصفحات).

الخطوة 6: Continue → خليه يبني

اضغط Continue واطلب منه Create Design System. Stitch رح ياخد وقت شوي ويبنيلك الـ Design System كامل: الخطوط، الألوان، الأيقونات، كل القواعد. هاي القاعدة اللي رح يشتغل عليها كل الصفحات.

📍 المرحلة 3 — بناء الصفحات (Stitch + برومبت كل صفحة)

الخطوة 7: ابنِ كل صفحة من ملف البرومبت تاعها

ارجع لملف البرومبتات من Claude. انسخ برومبت أول صفحة → الصقه في حقل Stitch → اضغط Enter.

💡 ميزة قوية: Stitch بيشتغل أكتر من task بالتوازي. تقدر ترسل برومبت الصفحة الأولى، وبعدها الثانية، والثالثة — وكلهم بيشتغلوا بنفس اللحظة. النتيجة بتطلع وحدة وما فيها مشاكل.

راجع كل برومبت قبل ما ترسله للتأكد إن التفاصيل كاملة 100%.

الخطوة 8: التعديل التكراري — هون بيجي الاحتراف

أول نتيجة نادراً بتكون النهائية. عندك أكتر من طريقة:

التعديل الدقيق (Edit): اضغط ضغطتين عالعنصر اللي بدك تعدّله → حدّد الجزء → احكي مع Stitch (Edit): "اللغة العربية أفضل، خلّي الشعار لليمين بدل الشمال."

إعادة تصميم سكشن كامل: حدّد القسم (مثلاً الصفحة الرئيسية) → "أعِد التصميم بشكل كامل." Stitch بيطلعلك إبداع مختلف.

دمج أحسن النسخ (أقوى تكنيك): خلّي Claude يكتبلك أكتر من برومبت بإبداعات مختلفة لنفس الصفحة. ابنِ نسختين، وبعدين خُد أحسن سكشن من كل وحدة وادمجهم:

"سكشن الـ pricing هون أحسن من هناك، والـ hero هون أفضل — لو دمجتهم بطلع نتيجة أحسن."

⚠️ ملاحظة من التجربة: لو ما بعتّ تفاصيل كافية (صور، محتوى دقيق)، رح تطلع نتيجة بسيطة. كل ما تعطي تفاصيل أكتر في البرومبت، النتيجة أحترف. والإنجليزي في البرومبت غالباً بيطلع نتيجة أدق من العربي — حتى لو الموقع نفسه عربي RTL.

📍 المرحلة 4 — التصدير (Figma أو كود)

بعد ما تخلّص التعديلات وتحدّد الصفحات النهائية، روح على Export. عندك طريقتين:

الطريقة 1: التصدير لـ Figma عبر MCP (الأحدث)

لو عندك Figma MCP مربوط، Claude بيقدر يوصل لـ Figma مباشرة ويعمل الـ design فيه. أو بسيطة: اضغط Confirm للتصدير لـ Figma. أحياناً بتطلعلك رسالة — اعمل refresh للموقع وأعد المحاولة، وبتزبط.

الطريقة 2: View Code (للمبرمج)

كنقطة قوة إلك كمبرمج: على أي صفحة اضغط View Code → بيعطيك الكود مباشرة (HTML + Tailwind + شوية CSS). تنسخه وتشتغل عليه على طول.

تقدر كمان تطلب نسخة موبايل: Generate Mobile Adaptive Version — بيحوّل الصفحة لنسخة جوال، أو بيعدّل على نفس النسخة لتصير responsive.

📍 المرحلة 5 — التشطيب النهائي في Figma (المرحلة الحقيقية)

هون لازم تكون عارف UI/UX — هاي اللحظة اللي بتفرّق بين مطوّر بيستخدم AI ومطوّر بيعتمد عليه.

افتح Figma → صفحة جديدة → Ctrl+V (Paste here) → بيلصقلك الصفحة.

بعدين تبدأ تشتغل بإبداعك:

  • صلّح الخطوط الناقصة (Figma بيحوّل الخطوط أحياناً) واضبط التايبوغرافي.

  • اضبط الـ spacing والمسافات لتصير منتظمة.

  • اشتغل على كل صفحة في group لحالها — اسحبها على جنب واشتغل فيها براحتك.

  • اطلع على صفحة "منيحة" (الشكل الأساسي)، وبعدها انسخ منها الـ navbar والـ hero لباقي الصفحات عشان تتوحّد.

  • لحد ما توصل للشكل النهائي وتسلّم الـ Figma كامل.

⚖️ القواعد الذهبية (الخلاصة)

  1. AI بيوفّر الهيكل — الاحتراف بيجي لما تعدّل بعينك، مش بالصدفة.

  2. design.md هو القلب — هو اللي بيمنع الفوضى ويوحّد كل الصفحات.

  3. حاور الـ AI، ما تكتبله برومبت جامد — الحوار بيوصل لنتيجة أدق.

  4. معرفتك بـ UI = سرعتك — كل ما تعرف أكتر، تختصر الأسئلة وتحكم على النتيجة أسرع.

  5. التفاصيل في البرومبت = جودة النتيجة. برومبت فاضي → نتيجة فاضية.

  6. النسخة الأولى مش النهائية — ادمج، عدّل، أعِد التصميم.

🧱 قواعد UI/UX الأساسية اللي لازم تعرفها

عشان تحكم على النتيجة وتعدّل صح، مش بس تقبل اللي بيطلعلك:

  • تباين واضح (Contrast): النص لازم يُقرأ بوضوح على الخلفية.

  • مسافات منتظمة (Spacing): نظام مسافات ثابت (8px scale مثلاً) بيخلّي كل شي يبيّن مرتّب.

  • عنصر واحد بس يلفت النظر بكل صفحة (Visual Hierarchy): CTA واحد رئيسي، مش عشرة.

  • تايبوغرافي محدود: خط أو اثنين، أحجام واضحة (heading / body / caption).

  • RTL صح: للعربي، الشعار والاتجاه والأيقونات كلها تنقلب صح — مش بس النص.

هاد الدليل جزء من معرض أعمالي — @alsaeyd.tech