بناء أول تطبيق حديث - تصميم واجهة المستخدم
هل ما زلت تتذكر شعورك في المرة الأولى التي صادفت فيها صفحة منتج بتصميم جميل؟ رغم أن الوظائف متشابهة تقريبًا، إلا أن صفحة الآخرين تبدو دائمًا أكثر "راقية": ألوان نظيفة، ومساحات بيضاء مريحة، وزوايا دائرية للأزرار في موضعها الصحيح. لا يسعك إلا أن تتساءل — "كيف صمموها؟ وهل يمكننا أيضًا إنشاء صفحة مثل هذه؟"
هذا الفضول حول "معرفة كيف يفعل الآخرون ذلك" هو بالضبط أفضل نقطة انطلاق لتصميم الواجهات الأمامية. قبل البدء، دعنا نراجع ما أتقناه بالفعل:
- في الدروس السابقة، تعلمنا استخدام NanoBanana لتوليد أصول التصميم بكميات كبيرة، وفهمنا كيف تؤثر "الأنماط" في الأوامر على الناتج النهائي؛
- تعرفنا على أدوات التصميم الاحترافية مثل Figma و MasterGo، وفهمنا كيف يتم تنظيم ملف التصميم؛
- كما اطلعنا على سير عمل تحويل التصميم إلى كود واجهة أمامية.
لكن عندما تريد فعلًا إنشاء صفحة لائقة لمشروعك الخاص، قد تتعثر: تستطيع استخدام الأدوات وتوليد الأصول، لكنك لا تعرف كيف يبدو "الجميل"، ولا تعرف كيف تفكك وتقلد صفحة ممتازة. لا تقلق، هذا الدرس مخصص لحل هذه المشكلة بالضبط.
لربط ما سبق بما سيأتي، فكر أولًا في بعض الأسئلة الصغيرة:
- من أي أقسام يتكون عادةً موقع ويب حديث؟
- هل "الجميل" إحساس ذاتي، أم يمكن قياسه بأرقام (قيم الألوان، أحجام الخطوط، المسافات، الزوايا الدائرية)؟
- إذا طُلب منك تقليد الأسلوب البصري لموقع ما، من أين ستبدأ؟
إذا لم تكن لديك إجابات واضحة عن هذه الأسئلة، فلا بأس — هذا بالضبط ما سيعلمك إياه هذا الدرس. إذا واجهت خطوات يصعب فهمها أثناء التطبيق، فلا تتردد في تصوير الشاشة الحالية وإرسالها إلى النموذج الكبير للاستفسار؛ جرب بجرأة ولا تخف من الخطأ، فكل محاولة فرصة للتعلم والتقدم.
🎯 السؤال الجوهري
عند مواجهة تطبيق أو موقع ويب بتصميم جميل، كيف تحلل كيف تم تصميمه، وبمساعدة أدوات تصميم الذكاء الاصطناعي تقلده إلى درجة "الخداع"؟
ما ستتعلمه في هذا الدرس
- تعلّم "رؤية" التصميم: عند الحصول على صفحة، تعرف ماذا تنظر إليه وكيف تفككه
- إتقان منهجية الدخول: ابحث عن مرجع ← حلّل ← قلد ← حتى يتطابق ← ادخل المجال
- التعرف على مسارين للتصميم: Figma/MasterGo و Claude Design/Open Design (بما في ذلك Skills تصميم UI)
- تمرين التقليد: اختر موقعًا ويب حقيقيًا وقلده من الصفر حتى التسليم بدرجة دقة عالية
- ترسيخ نظام التصميم: حوّل معايير التصميم الخاصة بالشركات الكبرى إلى معاييرك الخاصة
📚 المعرفة المسبقة
هذا البرنامج التعليمي مناسب للمطورين الذين يعرفون بالفعل استخدام أدوات البرمجة بالذكاء الاصطناعي (مثل Trae) ويريدون استكمال قدرات التصميم البصري للواجهة الأمامية لمشاريعهم. إذا كنت تريد أولًا بناء إحساس بتوليد الصور، يُنصح بتعلم إنتاج أصول NanoBanana أولًا؛ وإذا كنت تريد التعمق في أدوات التصميم، يمكنك الدمج مع دراسة مقدمة في Figma و MasterGo.
الفصل 1: دخول تصميم الواجهات الأمامية، يبدأ بـ"التقليد"
في القسم السابق طرحنا ثلاثة أسئلة — من أي أقسام تتكون الصفحة، وما الذي يجعلها جميلة، وكيف نقلدها. هذا القسم يبدأ من المنهجية: الدرس الأول في تصميم الواجهات الأمامية ليس الإبداع، بل إعادة الإنتاج.
كما أن تعلم الخط يبدأ بنسخ الخطوط الكلاسيكية، وتعلم الرسم يبدأ برسم تماثيل الجبس، لماذا "التقليد" تحديدًا؟
- جودة التصميم يمكن قياسها كميًا — قيم الألوان، أحجام الخطوط، المسافات، الزوايا الدائرية، الظلال، كلها أرقام
- عندما تعيد إنتاج نظام تصميم ناضج بكسلًا بكسل، فأنت مجبر على فهم كل قرار كامن خلفه
- عندما "تقلد حتى يتطابق"، في المرة القادمة التي تواجه فيها موقفًا مشابهًا، ستعرف "في أي اتجاه تقلد"
💡 خلاصة في جملة واحدة: إذا استطعت تقليد منتج جيد، فهذا يعني أنك تمتلك الأساسيات في تصميم الواجهات الأمامية؛ وإذا استطعت إجراء تعديلات عليه، فهذا يعني أنك قد تخرجت.
1.1 لماذا التقليد هو أسرع طريقة للدخول
قد يقلق البعض: "أنا أنسخ من الآخرين، هل سأتعلم فعلًا شيئًا؟" الإجابة: نعم، وهي أسرع طريق. السبب أن التقليد ليس نسخ النتيجة، بل إجبار نفسك على إعادة بناء العملية:
- ستضطر إلى قياس كل مسافة، وبالتالي تفهم "كيف تخلق المساحات البيضاء إحساسًا بالتنفس"
- ستضطر إلى البحث عن كل قيمة لون، وبالتالي تفهم "لماذا يبدو هذا التنسيق اللوني متناسقًا"
- ستضطر إلى مقارنة كل مستوى، وبالتالي تفهم "كيف يتم ترتيب المعلومات الرئيسية والثانوية"
عندما تتمكن من "تفكيك صفحة ممتازة إلى مستوى المعلمات" ثم إعادة بنائها، فإن فهمك للتصميم سيتجاوز الكثيرين ممن يعتمدون فقط على "الإحساس".
1.2 الشركات الكبرى "ترجع إلى المراجع" أيضًا، هذا ليس سرًا
طريقة عمل المصممين تتضمن المراجع بشكل طبيعي: Pinterest للبحث عن الإلهام، Dribbble لمتابعة الاتجاهات، وتحليل المنافسين لدراسة البنية. في عصر الذكاء الاصطناعي تضخم هذا الأمر — لأن الأدوات حوّلت "المرجع" مباشرة إلى قدرة قابلة للتنفيذ:
- يمكن لـ Claude Design استيراد المواقع المرجعية التي تحفظها، وتوليد مسودة أولى بأسلوبها
- يضم Open Design 151 نظام تصميم مفتوح المصدر مدمجًا، ويمكن تطبيقه على مشروعك بنقرة واحدة
- تعمل مختلف Skills تصميم UI على تغليف "المعايير البصرية للشركات الكبرى" في أوامر قابلة للتنفيذ بواسطة الذكاء الاصطناعي
لذا سؤالك لا ينبغي أن يكون "هل يمكنني النسخ"، بل "كيف أنسخ باحترافية، وبشكل قانوني، وأخرج بشيء خاص بي".
أين تجد المراجع؟ احفظ هذه المواقع أولًا
الخطوة الأولى في المراجع هي بناء "مكتبة مراجع". المواقع التالية مصنفة حسب الاستخدام، يُنصح بحفظها جميعًا واستخدامها حسب الحاجة:
| الموقع | الاستخدام | ما يناسب البحث عنه |
|---|---|---|
| Awwwards | "الأوسكار" في عالم تصميم الويب | الإبداع المتطور والحركات والتفاعلات، تعلّم كيف يبدو "سقف الإمكانيات" |
| Recent (كان سابقًا Godly) | مجموعة إلهام لمواقع ويب عالية الجودة | التصاميم الرائدة لمواقع الذكاء الاصطناعي و Web3 ومواقع المعارض |
| Landbook | مختارات تصميم الصفحات المقصودة | تصفية المواقع الرسمية وصفحات التسعير وتخطيط الشاشة الأولى حسب الصناعة/الألوان |
| Lapa Ninja | مكتبة تضم أكثر من 7300 لقطة شاشة لصفحات مقصودة | تصفح حسب العناصر: التنقل، عرض المميزات، تقييمات العملاء |
| Mobbin | مكتبة واجهات تطبيقات حقيقية | دراسة الصفحات والعمليات الحقيقية لمنتجات مثل Uber و Notion |
| Dribbble | مجتمع المصممين | إلهام الألوان والأيقونات وأساليب الرسوم التوضيحية والتفاعلات الدقيقة |
| Behance | مكتبة حالات مشاريع كاملة | الاطلاع على أفكار التصميم وعمليات البحث وأعمال كاملة |
كيف تبدو هذه المواقع؟ خذ نظرة سريعة (انقر على الصورة للتكبير):
💡 ابنِ مكتبة المراجع الخاصة بك
عندما تصادف صفحة تعجبك، التقط لقطة شاشة فورًا + احفظ الرابط، وصنفها حسب "صفحة مقصودة / مكون / ألوان / حركات". عند التقليد، اختر الهدف مباشرة من هذه المكتبة، فهذا أسرع بكثير من البحث على الإنترنت في اللحظة الأخيرة.
1.3 المرجع مقابل الانتحال: خط واضح
| البُعد | مرجع (موصى به ✅) | انتحال (خطير ❌) |
|---|---|---|
| الهدف | بنية التخطيط، الأسلوب البصري، معايير التصميم | شعار العلامة التجارية، الأيقونات الحصرية، الرسوم التوضيحية الأصلية |
| الطريقة | إعادة صنع بعد الفهم، ودمجها في منتجك | نسخ الأصول والكود والصور مباشرة |
| النتيجة | تشبه الأسلوب، لكن المحتوى مختلف تمامًا | حتى النصوص والألوان والأصول متطابقة تمامًا |
| المخاطرة | منخفضة | مخاطر حقوق النشر/تجارية عالية |
سيتناول الفصل 7 حدود حقوق النشر بالتفصيل، لكن تذكر أولًا جملة واحدة: نسخ "القواعد" مسموح، نسخ "النتائج" خطير.
الفصل 2: من يرى جيدًا، يصمم جيدًا — تفكيك صفحة
شرط "التقليد المتطابق" هو "الفهم الجيد". هذا الفصل يعطيك إطارًا عامًا لتفكيك الصفحات.
2.1 انظر إلى البنية: من أي أقسام تتكون الصفحة
الغالبية العظمى من مواقع الويب الحديثة يمكن تفكيكها إلى 4 أقسام كبيرة:
┌─────────────────────────┐
│ ① شريط التنقل Nav │ Logo · القائمة · تسجيل الدخول/CTA
├─────────────────────────┤
│ ② الشاشة الأولى Hero │ العنوان الرئيسي · العنوان الفرعي · الزر الرئيسي · صورة المنتج
├─────────────────────────┤
│ ③ منطقة المحتوى Sections │ بطاقات المميزات · عرض البيانات · التقييمات · التسعير
├─────────────────────────┤
│ ④ التذييل Footer │ الروابط · الحقوق · الاشتراك
└─────────────────────────┘عند النظر إلى صفحة، تجاهل التفاصيل أولًا، ارسم "مخططها الهيكلي" بعينيك: أي جزء هو التنقل، وأي جزء هو الشاشة الأولى، وكم قسمًا في المنتصف، وكم عنصرًا في كل قسم.
2.2 انظر إلى البصريات: 4 عناصر قابلة للقياس
| العنصر | ماذا تنظر إليه | كيف تسجله |
|---|---|---|
| الألوان | ما هو اللون الرئيسي ولون الخلفية ولون النص | خذ قيم Hex مباشرة باستخدام منتقي الألوان |
| الخطوط | ما الخط المستخدم للعناوين/النصوص، وما الحجم والوزن | انظر إلى font-family/size/weight في DevTools الخاص بالمتصفح |
| المسافات | المساحات البيضاء بين الأقسام وداخل البطاقات | سجل إيقاع 8 / 16 / 24 / 48 px الشائع |
| الزوايا الدائرية والظلال | نصف قطر الزوايا وشدة الظل للبطاقات والأزرار | انظر إلى border-radius / box-shadow في DevTools |
💡 الميزة الطبيعية لتصميم الواجهات الأمامية
أنت مطور واجهات أمامية، وDevTools هو محلل التصميم الخاص بك. انقر بزر الماوس الأيمن ← افحص العنصر، وستنكشف جميع قيم الألوان وأحجام الخطوط والمسافات والزوايا الدائرية في أي صفحة. هذه قدرة يحلم بها المصممون ويمتلكها المطورون بالفطرة.
أدوات منتقي الألوان الشائعة: منتقي الألوان في Chrome DevTools، إضافات من نوع color-picker؛ يمكنك أيضًا إرسال لقطة الشاشة مباشرة إلى نموذج متعدد الوسائط كبير وطلب منه استخراج معايير التصميم لك.
2.3 انظر إلى المكونات: فكك إلى "أجزاء قابلة لإعادة الاستخدام"
فكك الصفحة إلى مكونات، وسجل معلمات الأنماط لكل مكون:
زر Primary Button
- الخلفية: #4F46E5
- النص: #FFFFFF، 14px / 600
- الزوايا الدائرية: 8px
- الهامش الداخلي: 12px 24px
- الظل: 0 2px 8px rgba(79,70,229,0.3)
بطاقة Card
- الخلفية: #FFFFFF
- الزوايا الدائرية: 16px
- الحدود: 1px solid #E2E8F0
- الظل: 0 4px 12px rgba(15,23,42,0.08)بعد تفكيك 3-5 صفحات، سيكون لديك "مكتبة أنماط مكونات" — وهذا هو النموذج الأولي لنظام التصميم الخاص بك.
2.4 ترجمة "ما تراه من تصميم" إلى "كلام يفهمه الذكاء الاصطناعي"
لنقل التصميم إلى أدوات الذكاء الاصطناعي، تحتاج إلى ترجمة البصريات إلى وصف منظم. كلما نظرت بدقة أكبر، كانت الترجمة أدق، وكان تقليد الذكاء الاصطناعي أقرب.
ارجع إلى أسلوب هذه الصفحة المقصودة، وساعدني في إنشاء صفحة متماثلة:
- البنية: تنقل + شاشة أولى (Hero) + 3 بطاقات مميزات + منطقة تسعير + تذييل
- الألوان: اللون الرئيسي Indigo #4F46E5، الخلفية #F8FAFC، النص #0F172A
- الخطوط: العنوان Space Grotesk 700، النص Inter 400
- المسافات: الأقسام 96px، داخل البطاقة 24px، الشبكة 24px
- الزوايا الدائرية: البطاقة 16px، الزر 8px
- الظل: 0 4px 12px rgba(15,23,42,0.08)الفصل 3: نظرة شاملة على أدوات تصميم الواجهات الأمامية في عصر الذكاء الاصطناعي
"كيف صمموها؟" الإجابة أصبحت أكثر تنوعًا. إليك مساران نموذجيان، يغطيان من "التحكم اليدوي الدقيق" إلى "التوليد التلقائي بالمحادثة".
3.1 المسار الأول: Figma / MasterGo — أدوات التصميم الاحترافية
إذا كنت تريد ملف تصميم قابلًا للتعديل والتعاون مع تحكم دقيق على مستوى البكسل، استخدم Figma (الأكثر شيوعًا دوليًا) أو MasterGo (منتج محلي، أسهل في البدء):
- بناء التخطيط وضبط المكونات وإنشاء نماذج أولية تفاعلية على اللوحة
- الاستعانة بقدرات مثل Figma Make / MasterGo AI للتوليد والضبط بكميات كبيرة
- وفي النهاية تسليمها إلى الواجهة الأمامية لتنفيذها وفق التصميم، أو تحويلها إلى كود عبر الإضافات
مناسب: السيناريوهات التي تتطلب تسليم ملف تصميم صارم وتعاون جماعي وتفاعلات معقدة. لتشغيل الأدوات بالتفصيل، راجع مقدمة في Figma و MasterGo.
3.2 المسار الثاني: Claude Design / Open Design — لوحة التصميم بالمحادثة
القاسم المشترك بين هذه الأدوات هو توليد نماذج أولية تفاعلية مباشرة باللغة الطبيعية، بدلًا من الصور الثابتة. الأدوات الأكثر تمثيلًا هي Claude Design وبديلها مفتوح المصدر Open Design.
Claude Design: لوحة التصميم بالمحادثة الرسمية
Claude Design هو منتج تصميم بالذكاء الاصطناعي أطلقته Anthropic (المدخل claude.ai/design):
- أدخل متطلبًا بجملة واحدة، ويُنتج افتراضيًا 3 أشكال تصميم، تغطي الصفحات المقصودة والرسوم التخطيطية والعروض التقديمية وغيرها
- يدعم استيراد أنظمة التصميم (مستودعات GitHub، تصديرات Figma، لقطات شاشة المواقع، ملفات العلامة التجارية)، ويستخرج الألوان/الخطوط/المكونات تلقائيًا
- داخل اللوحة يمكنك التعليق والتعديل مباشرة وسحب العناصر للضبط الدقيق، وأخيرًا تصدير HTML / PDF / PPTX، أو تسليمها إلى Claude Code لتنفيذها ككود حقيقي
سيناريوهات الاستخدام النموذجية:
① إعادة إنتاج صفحات عالية الدقة مباشرة من لقطات مرجعية (الأكثر استخدامًا)
أدخل وصف المنتج والمرجع الأسلوبي، ويُولد Claude تلقائيًا صفحة مقصودة كاملة — سجل المحادثة على اليسار يعرض الـ prompt وعملية التوليد، واللوحة على اليمين تعرض النتيجة في الوقت الفعلي.
Create a high-fidelity landing page designed to raise $500,000 from angel investors
for "雾屿咖啡 Mist Island Coffee" - a boutique specialty coffee shop that combines
premium coffee, quiet workspaces, and warm community events.
Tone should feel warm, premium, calm, and trustworthy - think a mix of Blue Bottle
Coffee + Apple Store + minimalist lifestyle design.
② إنتاج 3 أشكال تصميم افتراضيًا، اختر الاتجاه ثم حسّن
Claude Design لا يعطيك إجابة واحدة فقط، بل يولّد افتراضيًا عدة اتجاهات لتختار منها — بأسلوب المحرر، أسلوب المتحف، أسلوب Zine وغيرها، انقر للدخول ثم فصّل أكثر.
③ توليد نماذج أولية تفاعلية (ليست مجرد صور ثابتة)
الصفحات المولدة هي HTML قابلة للنقر والإدخال فعلًا — الأزرار لها تأثيرات hover، والنماذج قابلة للإدخال، والبيانات تُحسب في الوقت الفعلي.
④ إنشاء عروض تقديمية/PPT للمنتج
لا يقتصر على صفحات الويب، بل يمكنه أيضًا توليد شرائح كاملة (متعددة الصفحات، مع تنقل، قابلة للتصدير PDF/PPTX).
⑤ توليد فيديوهات متحركة
من خلال "From template" يمكنك إنشاء فيديو HTML متحرك — سيناريو اللقطات + اللقطات المتحركة المُقدَّمة فعليًا، مع شريط تحكم بالتشغيل.
⑥ تكرار التصاميم الحالية (التعليق مباشرة على اللوحة)
بعد توليد النموذج الأولي، لا داعي لإعادة كتابة prompt، فقط انقر زر Comment وحدد العنصر واكتب تعليقًا، وسيقوم Claude بالتعديل الجزئي.
⑦ تصميم صفحات تطبيقات الجوال
يدعم تحديد أبعاد الجهاز (مثل iPhone)، وتوليد نماذج واجهة جوال مع إطار الجهاز.
مناسب: من ليس لديه خلفية تصميم، ويريد تجاوز منحنى تعلم Figma، والحصول بسرعة على نماذج أولية تفاعلية.
Open Design: البديل مفتوح المصدر لـ Claude Design
إذا كنت لا تريد الاشتراك، أو تهتم أكثر بخصوصية البيانات، جرب Open Design (مشروع nexu-io مفتوح المصدر). إنه على نفس المسار مثل Claude Design: توليد نماذج التصميم بالمحادثة، والفرق أنه محلي أولًا، وBYOK (بمفتاح النموذج الخاص بك)، وغير مرتبط بأي Agent.
له مفهومان أساسيان:
| المفهوم | الشرح | قيمته لك |
|---|---|---|
| Skills (المهارات) | 16 مهارة تصميم موجهة بالأوامر (النصوص، الألوان، التوجيه الإبداعي، العصف الذهني...) | مهارة واحدة = قالب مهمة احترافي واحد |
| Templates (القوالب) | 288 قالبًا قابلًا للتشغيل (نماذج أولية، شرائح، حركات...)، جميعها مع example.html | انسخ (fork) وبدّل البيانات للتسليم |
| Design Systems (أنظمة التصميم) | 151 نظام تصميم قابل للنقل (لوحات ألوان، خطوط، حركات، أسلوب النصوص) | طبّق المعايير البصرية للشركات الكبرى بجملة واحدة |
سيكتشف وكيل البرمجة المحلي لديك (Claude Code و Codex و Cursor و Qwen و Kimi وغيرها، وتدعم رسميًا 21 نوعًا) باعتباره "محرك التصميم" — وكيلك الحالي هو المصمم. بالإضافة إلى ذلك، يمكن لمهارات UI design Skill في منظومة أدوات مثل Claude Code (مثل frontend-design) تغليف معايير التصميم في أوامر قابلة للتنفيذ بواسطة الذكاء الاصطناعي، ليجعل AI يخرج وفق المعايير.
سيناريوهات الاستخدام النموذجية:
① مشروع جديد: اختر Skill + نظام تصميم + دقة
عند إنشاء نموذج أولي، يمكنك اختيار الرسم التخطيطي أو الدقة العالية، وتحديد المنصة المستهدفة (ويب متجاوب / جوال وغيرها)، واختيار نظام من بين أكثر من 150 نظام تصميم مدمج كأساس بصري.
استخدم Open Design، وطبّق نظام تصميم Linear، لتوليد صفحة مقصودة بتنسيق HTML لمنتج SaaS
② مساحة عمل Studio: محادثة موجهة، توليد في الوقت الفعلي
على اليسار لوحة المحادثة (تعرض خطوات تفكير الذكاء الاصطناعي وقائمة Todo وعمليات Write)، وعلى اليمين لوحة iframe تعرض نتيجة التوليد في الوقت الفعلي — مشابه لـ Claude Design، لكن في الأسفل يظهر أي وكيل CLI محلي يُستدعى حاليًا (مثل Claude Code و Codex و deepseek وغيرها).
③ تطبيق نظام تصميم لتوليد شرائح/PPT
اختر نوع Slide deck، وأدخل الموضوع لتوليد شرائح كاملة متعددة الصفحات. الصورة التالية عرض تقديمي صيني ولّده مستخدم من المجتمع باستخدام Open Design.
④ توليد نماذج أولية عالية الدقة لتطبيقات الجوال
يدعم معاينة شاشات متعددة في نفس الوقت، ويولد إطار iPhone تلقائيًا، مع مكونات كاملة مثل شريط Tab وتخطيط البطاقات وأشرطة التقدم.
⑤ استخدام UI design Skill لتوحيد ناتج الذكاء الاصطناعي
ثبّت مهارات مثل frontend-design على Claude Code / Cursor، وسيتبع الذكاء الاصطناعي معايير التصميم تلقائيًا عند كتابة الصفحات:
# الاستدعاء في Claude Code
/frontend-design ساعدني في تنفيذ صفحة تسجيل دخول
→ يتم الإخراج تلقائيًا وفق معايير التصميم المدمجة في المهارة:
- الألوان: اللون الرئيسي #4F46E5، النجاح #10B981، الخطأ #EF4444
- المسافات: شبكة أساسية 8px
- المكونات: Button / Input / Form متوافقة مع معايير إمكانية الوصول
- الاستجابة: تكيف مع الجوال / الجهاز اللوحي / سطح المكتب⑥ المشاريع الخاصة المحلية لا تخرج من الشبكة
المشاريع الداخلية للشركات، وتصميم المنتجات الحساسة للبيانات، جميع الملفات تُعالج محليًا، ويمكن للنموذج أن يعمل بنشر محلي أو BYOK:
# تشغيل Open Design محليًا، والنموذج يعمل بنشر محلي لـ Qwen
OPENAI_API_KEY=your-local-key OPENAI_BASE_URL=http://localhost:8000/v1 \
opendesign
# جميع ملفات التصميم محفوظة محليًا في ~/.open-design/، ولا تمر عبر أي خادم طرف ثالث
مناسب: المطورون الذين يهتمون بخصوصية البيانات، ولديهم بالفعل وكيل برمجة، ويريدون السيطرة الكاملة على عملية التصميم.
3.3 كيف تختار بين المسارين
| عنصر المقارنة | المسار الأول: Figma / MasterGo | المسار الثاني: Claude Design / Open Design |
|---|---|---|
| التموضع | أداة تصميم احترافية | لوحة تصميم AI بالمحادثة |
| الأدوات الممثلة | Figma و MasterGo | Claude Design (رسمي)، Open Design (بديل مفتوح المصدر) |
| الناتج | ملف تصميم قابل للتعديل | نموذج HTML تفاعلي |
| سهولة البدء | ⭐⭐ متوسط | ⭐ منخفض |
| التكلفة | نسخة مجانية متاحة | Claude Design يتطلب اشتراكًا؛ Open Design مفتوح المصدر مجاني (BYOK) |
| المناسب | تسليم دقيق وتعاون جماعي | تحقق سريع من النماذج، أولوية للخصوصية |
💡 الاستخدام المشترك في الواقع
مرجع ← تصميم ← تسليم يمكن خلطها في كل المسار: استخدم Claude Design / Open Design لإخراج الاتجاه والنموذج الأولي بسرعة ← بعد التثبيت استورد إلى Figma/MasterGo للتنقيح الدقيق ← سلم إلى Claude Code لكتابة الكود. كل مسار يكمّل الآخر.
الفصل 4: تمرين عملي 1: قلد "صفحة شخص آخر" حتى تطابق
الهدف محدد جدًا: اختر موقعًا ويب حقيقيًا يعجبك، وقلده حتى "يتطابق". هنا نأخذ الصفحة المقصودة كمثال.
الخطوة 1: حدد الهدف
اختر صفحة مقصودة ببنية واضحة وتهتم بها (موقع SaaS الرسمي، صفحة تعريف منتج). احفظ لقطة شاشتها ورابطها.
الخطوة 2: فكك باستخدام إطار الفصل 2
في المتصفح انقر بزر الماوس الأيمن ← افحص، وسجل وفق 4 خطوات:
الهدف: الصفحة المقصودة لموقع SaaS الرسمي
① البنية: تنقل (Logo/القائمة/CTA) → Hero (العنوان/العنوان الفرعي/الزر/لقطة الشاشة) → 3 بطاقات مميزات → تسعير (3 مستويات) → تذييل
② الألوان: اللون الرئيسي #0F172A داكن، التمييز #6366F1، الخلفية #FFFFFF / #F8FAFC
③ الخطوط: العنوان Inter 800 48px، النص Inter 400 16px
④ المكونات: الزر بزوايا دائرية 8px/ممتلئ، البطاقة بزوايا دائرية 16px/خلفية رمادية فاتحة/بدون حدودالخطوة 3: أطعمها لأداة تصميم الذكاء الاصطناعي لتوليد النسخة الأولى
أرسل نتيجة التفكيك إلى Claude Design / Open Design، واطلب منها التوليد وفق هذه المعايير:
قم بتوليد صفحة مقصودة متماثلة وفق معايير التصميم التالية:
[الصق سجل تفكيك الخطوة 2]
المنتج: مشروعي (وصف الاستخدام بجملة واحدة)
المتطلبات: اتبع معايير الألوان والخطوط والمسافات والزوايا الدائرية أعلاه بدقة على مستوى البكسلالنسخة الأولى عادةً تكون "متشابهة في الروح ومختلفة في الشكل" — البنية صحيحة لكن التفاصيل منحرفة. هذا ليس فشلًا، بل يخبرك بالضبط أين يجب الضبط بعد ذلك.
الخطوة 4: قارن قسمًا بقسم وكرر التعديلات
ضع لقطة الشاشة المرجعية والنتيجة جنبًا إلى جنب، وقارن قسمًا بقسم، واقترب باستخدام "أوامر التعديل":
| المشكلة المكتشفة | أمر التعديل |
|---|---|
| اللون الرئيسي فاتح جدًا | "غيّر اللون الرئيسي إلى #0F172A واللون المميز إلى #6366F1" |
| زوايا الزر الدائرية غير صحيحة | "وحّد كل الأزرار بزوايا دائرية 8px وخلفية ممتلئة" |
| المسافات ضيقة جدًا | "غيّر المسافة بين الأقسام إلى 96px والهامش الداخلي للبطاقة إلى 24px" |
| الخط غير صحيح | "غيّر العنوان إلى Inter 800 والنص إلى Inter 400" |
| عناصر زخرفية زائدة | "أزل زخارف الخلفية واحتفظ بالمحتوى الأساسي فقط" |
الخطوة 5: معايير القبول — "التطابق"
كيف تعرف أنك دخلت المجال؟ ضع لنفسك معيارًا موضوعيًا:
- [ ] التقط صورتين: الموقع الأصلي مقابل نسختك المقلدة
- [ ] كبّر الصورتين جنبًا إلى جنب وقارن بكسلًا بكسل
- [ ] لا يمكن تمييز اختلاف التخطيط بالعين المجردة في قيم الألوان وأحجام الخطوط والمسافات والزوايا الدائرية
- [ ] صغّر إلى 50% وقارن مرة أخرى، ولا يزال من المستحيل تمييز أيها النسخة الأصلية
💡 "التطابق" ليس هدفًا، بل وسيلة. بعد تقليد 2-3 مواقع بأنماط مختلفة تمامًا، ستتراكم لديك طبيعيًا "إحساس تصميمي": متى تستخدم مساحات بيضاء كبيرة، ومتى تستخدم تشبعًا عاليًا، ومتى تخفف الزوايا الدائرية. عندها سيكون تقليد صفحات جديدة أسرع بكثير.
الفصل 5: تمرين عملي 2: من التصميم إلى الكود
ملف التصميم/النموذج الأولي المقلد يجب أن يتحول في النهاية إلى صفحة حقيقية في المنتج. هناك مساران للتسليم:
5.1 المسار أ: أداة تصميم AI → كود الواجهة الأمامية
- Claude Design: بعد التثبيت على اللوحة، استخدم
/design-syncللمزامنة إلى Claude Code، ومواصلة كتابة الكود مباشرة من التصميم دون إعادة البدء من لقطة الشاشة - Open Design: يمكن تصدير HTML مباشرة، ثم تسليمها إلى الوكيل لتحويلها إلى مكونات المشروع
- Figma/MasterGo: تصدير كود React / Vue عبر الإضافات أو MCP
5.2 المسار ب: لقطة الشاشة → إعادة البناء بنموذج متعدد الوسائط كبير
الأبسط: أرسل لقطة شاشة التصميم المقلد مباشرة إلى نموذج متعدد الوسائط كبير، واطلب "إعادة بنائها كمكونات React"، ونفذها قسمًا بقسم.
للمقارنة التفصيلية للمسارات الثلاثة "من التصميم إلى الكود"، راجع من النموذج الأولي للتصميم إلى كود المشروع. إذا أردت رفع كفاءة هندسة المكونات، يمكنك أيضًا الاطلاع على تحديث واجهتك باستخدام مكتبة مكونات حديثة.
الفصل 6: حوّل نظام تصميم الشركات الكبرى إلى نظامك الخاص
بعد تقليد 3 صفحات ستكتشف: خلف كل صفحة جميلة يوجد "نظام تصميم" مستقر. بدلًا من اختراع نظام من الصفر، قف على أكتاف العمالقة.
6.1 ما هو "نظام التصميم القابل للنقل"
يحوّل Open Design أنظمة التصميم إلى ملفات DESIGN.md (Linear و Vercel و Stripe و Apple و Cursor و Figma...)، بينما يستخرجها Claude Design تلقائيًا من مستودع الكود/ملفات التصميم لديك. في جوهرها كلها شيء واحد:
DESIGN.md = رموز الألوان + معايير الخطوط + إيقاع المسافات + أنماط المكونات + اصطلاحات الاستخداممثال هيكلي حقيقي:
# Design System: Linear
## Colors
- background: #08090A
- primary: #5E6AD2
- text: #F7F7F8
## Typography
- heading: 22px / 600, letter-spacing -0.4px
- body: 14px / 400
## Radius
- card: 8px
- button: 6px
## Spacing
- 4 / 8 / 12 / 16 / 24 / 32 px
## Do / Don't
- Do: 大量留白，克制用色
- Don't: 不使用渐变、不使用阴影堆叠6.2 ثلاث خطوات لبناء نظام التصميم الخاص بك
- اختر الأساس: طبّق نظام تصميم من شركة كبرى تعجبك (مثل ضبط الألوان الداكنة لـ Linear، أو المساحات البيضاء لـ Apple)
- غيّر المعلمات: استبدل اللون الرئيسي بلون علامتك التجارية، واضبط الزوايا الدائرية والمسافات
- رسّخه في ملف: احفظه كـ
DESIGN.mdأو Skill، ليجعل الذكاء الاصطناعي يلتزم به تلقائيًا في كل توليد
6.3 تقدم متقدم: تثبيت الأسلوب باستخدام UI design Skill
بعد تغليف نظام التصميم في Skill، يكفي جملة واحدة لاستدعائه:
استخدم معايير التصميم الخاصة بمهارة my-brand skill، لتوليد مخططات الشاشة الأولى لثلاث صفحات وظيفيةلطريقة إنشاء واستخدام المهارات، راجع اجعل واجهتك جميلة باستخدام LLM وSkills.
الفصل 7: حقوق النشر والأخلاقيات
كلما كانت قدرتك على التقليد أقوى، كلما كان عليك الحفاظ على الحدود:
انسخ القواعد، لا النتائج. يمكن تعلم "القواعد" مثل التخطيط والألوان والمسافات؛ ولا تنسخ مباشرة "النتائج" مثل الشعارات والأيقونات والرسوم التوضيحية والنصوص.
كن حذرًا في المشاريع التجارية. قبل التسليم التجاري تأكد من: حقوق أصول المواد، تراخيص الخطوط (الخطوط التجارية تحتاج إلى شراء)، وشروط استخدام الموقع المرجعي.
ملكية المحتوى المولد بالذكاء الاصطناعي. شروط المنصات المختلفة (Claude Design و Open Design وغيرها) تختلف، راجع اتفاقية الخدمة قبل الاستخدام التجاري.
وضع علامة على مشاركة الذكاء الاصطناعي. بعض المنصات/اللوائح تتطلب الإفصاح بأن المحتوى منشأ بواسطة الذكاء الاصطناعي.
المراجعة النهائية. في السيناريوهات الحساسة مثل هوية العلامة التجارية والمواد الإعلانية، يجب المراجعة اليدوية.
💡 نصيحة
في مرحلة التعلم والنماذج الأولية، انطلق بحرية في التقليد؛ عند الدخول في التسليم التجاري، حوّل "المرجع" إلى "إعادة إبداع من نظام التصميم الخاص بك"، واحتفظ بسجلات التوليد.
الخلاصة
هذا الفصل وضع "دخول تصميم الواجهات الأمامية" على مسار قابل للتنفيذ:
- العقلية: دخول تصميم الواجهات الأمامية يبدأ بـ"التقليد"، انسخ القواعد ولا تنسخ النتائج
- الرؤية: فكك أي صفحة بثلاث طبقات — البنية (4 أقسام كبيرة) + البصريات (الألوان/الخطوط/المسافات/الزوايا الدائرية) + المكونات، وDevTools هو محللك
- الأدوات: مساران — Figma/MasterGo (تصميم دقيق)، Claude Design / Open Design + Skills تصميم UI (نماذج أولية بالمحادثة)
- التقليد: اختر الهدف ← فكك ← ولّد ← كرر قسمًا بقسم ← تحقق بالمقارنة بكسلًا بكسل
- الترسيخ: حوّل DESIGN.md للشركات الكبرى إلى نظام التصميم الخاص بك، ثم ثبّته بمهارة
💡 الخطوة التالية
أكمل اليوم تمرين تقليد كامل:
- ابحث عن صفحة مقصودة تريد "نسخها"، وفكك ألوانها وخطوطها ومسافاتها وزواياها الدائرية باستخدام DevTools
- استخدم Claude Design أو Open Design لتوليد النسخة الأولى، وعدّلها قسمًا بقسم حتى "تتطابق"
- سلم النسخة النهائية إلى الذكاء الاصطناعي لتحويلها إلى كود، واحفظ أيضًا نسخة DESIGN.md خاصة بك