00:00:00أدوات التصميم بالذكاء الاصطناعي تتطور بسرعة، وبينما يعد الكثير منها بإحداث ثورة في سير عملك، فإن القليل فقط يفي بوعوده فعلاً.
00:00:07لقد قضيت وقتاً طويلاً في اختبار أدوات مختلفة للفصل بين ما هو مفيد حقاً وما هو مجرد ضجيج.
00:00:13في هذا الفيديو، أشارككم الأدوات التي أحدثت تأثيراً حقيقياً على عملية التصميم الخاصة بي.
00:00:18تتراوح هذه الأدوات بين التخطيط وإنشاء الأصول والرسوم المتحركة وتحويل التصميم.
00:00:23بعضها مجاني وبعضها مدفوع، والقليل منها له بدائل مجانية قوية تعمل بنفس الكفاءة.
00:00:27لنبدأ بأداة تخطيط قوية وأساسية يمكنها تحويل أفكارك الفوضوية إلى مخطط تقني منظم.
00:00:32منتج من builder methods يُدعى Design OS.
00:00:35إنه حرفياً القطعة المفقودة في عمليتك.
00:00:37يمكنك الوصول إلى المستودع مفتوح المصدر على GitHub حيث يمكنك التحميل والاستخدام.
00:00:42تم تصميم Design OS خصيصاً لمحاكاة سير عمل تطوير البرمجيات.
00:00:46أنت تعمل كصاحب المصلحة بينما يتولى Design OS تخطيط المنتج ونظام التصميم ومواصفات المتطلبات.
00:00:51وأخيراً، يؤكد خطة تصميم البرنامج الخاصة بك وبعدها يمكنك تصديرها.
00:00:55هذه الأداة مناسبة لكل من المطورين التقنيين وغير التقنيين.
00:00:59إنها متوافقة مع جميع أدوات الذكاء الاصطناعي الشائعة مثل Claude Code وCursor وCopilot..
00:01:05التثبيت بسيط.
00:01:05فقط انسخ أمر git clone والصقه في مجلد مشروعك وقم بتغيير الاسم الافتراضي إلى اسم مشروعك الفعلي.
00:01:11بمجرد التثبيت، سيكون للمشروع وصول إلى سلسلة من الأوامر المتخصصة ومهارات التصميم.
00:01:16عندما تنتقل إلى localhost 3000، يتم سرد جميع الخطوات واحدة تلو الأخرى حتى لا تشعر بالحيرة بشأن الأمر الذي يجب اتباعه أولاً..
00:01:24تطرح عليك سلسلة من الأسئلة لتحديد كل تفصيلة من تفاصيل فكرة مشروعك.
00:01:28تقوم بتحسين الخطة أثناء التقدم، وتوفر مخططات عامة، وتطلب موافقتك في منتصف الطريق وتوثق كل شيء بطريقة محسّنة لنموذج الذكاء الاصطناعي.
00:01:36إنها عملية تستغرق وقتاً طويلاً لذلك عليك أن تتحلى بالصبر وتتحمل الأسئلة المستمرة للحصول على أفضل النتائج لموقعك الإلكتروني.
00:01:43بمجرد الانتهاء من جميع الأقسام، ستكون الخطة جاهزة للتصدير.
00:01:47تحتوي الخطة المُصدَّرة على تعليمات حول كيفية استخدامها بالإضافة إلى نماذج البيانات وبيانات العينات والوثائق.
00:01:53كما تتضمن أنواع TypeScript ورموز CSS وجميع ملفات التصميم الضرورية.
00:01:57يمكنك العثور على التعليمات هنا حول كيفية استخدام التصدير لبناء التطبيق، سواء اخترت الطريقة التدريجية أو طريقة الأمر الواحد.
00:02:04بشكل عام، هذه أداة مثيرة للاهتمام حقاً جعلت جزء التخطيط من التصميم أسهل بكثير وأكثر سلاسة.
00:02:09الأصول عالية الجودة هي العمود الفقري لأي موقع ويب رائع، وإذا كنت تبحث عن طريقة لإنشاء صور منتجات احترافية بسرعة، فإن VSCOM هو الأداة التي تحتاج إلى معرفتها..
00:02:19لديه قدرة مذهلة على استخدام الأوامر النصية لإنشاء صور مرئية مذهلة، واستخدام الرسومات التخطيطية لإنشاء العروض وحتى تصميمها لك.
00:02:26إنه مليء بالأدوات المذهلة ويمكنه توفير الرسوم المتحركة أيضاً.
00:02:29لاستخدامه، ما عليك سوى تقديم رسم تخطيطي ووصف ويقوم الذكاء الاصطناعي بإنشاء صور مرئية بناءً على مدخلاتك.
00:02:35يمكنك فعل الكثير به، بما في ذلك تحرير العناصر الفردية، واستخدام الذكاء الاصطناعي لتعديلها، وتنزيل النتائج بجودة 4k لاستخدامها في صور القسم الرئيسي..
00:02:43VSCOM أداة مدفوعة لكن يمكنك البدء مجاناً.
00:02:46الخطة المجانية سخية وتوفر ميزات مفيدة بينما توفر الخطة الشهرية المزيد من الإمكانيات.
00:02:51هذا يجعلها خياراً رائعاً إذا كنت تحتاج بشكل متكرر إلى تصميم منتجاتك عبر مجالات مختلفة.
00:02:56لكن إذا كنت لا ترغب في استخدام الأدوات المدفوعة، يمكنك استخدام مشروع Google الذي لم يحظَ بالتقدير الكافي والذي يُدعى Mixed Board.
00:03:04لا يزال في المرحلة التجريبية لذا فهو مجاني حالياً.
00:03:07تتيح لك هذه الأداة إنشاء لوحات مزاجية واستخدام قوة إمكانيات nano banana المذهلة لإنشاء صور لموقعك الإلكتروني.
00:03:14يمكنك استخدام الأوامر النصية لتعديل الصور وستقوم بإنشاء صور جديدة تماماً كما تريد.
00:03:19يمكنك أيضاً تحميل صور عينات وستستخدم إمكانياتها لإنشاء صور مطابقة.
00:03:23يمكنك إنشاء أكبر عدد تريده من الإصدارات وحتى بناء عرض تقديمي كامل لتصور مفهوم منتجك باستخدام nano banana بالكامل.
00:03:30إذا لم تعجبك صورة، يمكنك إعادة إنشائها، أو مطالبة النموذج بإنشاء صور مشابهة، أو نسخ صورة أو حتى وضع تعليقات توضيحية عليها لإعطاء النموذج مزيداً من التوجيه.
00:03:39سيقوم بعد ذلك بإنشاء جميع التفاصيل وفقاً لمواصفاتك.
00:03:42هذا أمر رائع حقاً لأنه يمكنك أخذ هذه الأصول وتنزيلها للاستخدام مباشرة على موقعك الإلكتروني.
00:03:48من الأفضل دائماً تحليل كيفية هيكلة المواقع المنافسة لمواقعها قبل الغوص في تصميم موقعك الخاص.
00:03:54لهذا الغرض استخدمت إضافة تُدعى GoFullPage التي التقطت لقطة شاشة كاملة لأي موقع.
00:03:58سمح لي ذلك بتنزيل لقطات شاشة كاملة للمواقع للرجوع إليها.
00:04:02ثم قدمت لقطات الشاشة هذه إلى Claude مع أمر نصي متخصص مصمم لاستخراج عناصر واجهة المستخدم.
00:04:07هذا الأمر أرشد Claude لتحديد جميع القيود ومواضع الكائنات وتفاصيل موضوع واجهة المستخدم من الصور.
00:04:13عندما أعطيت Claude لقطات الشاشة مع هذا الأمر المتخصص، استخرج جميع تفاصيل نمط واجهة المستخدم بشكل شامل.
00:04:19بمجرد أن حصلت على إرشادات النمط المستخرجة، قدمتها إلى Claude code في مجلد المشروع الذي يحتوي على الأصول التي قمت بتنزيلها للاستخدام.
00:04:27ثم قام Claude بإنشاء الموقع بالكامل مع تطبيق جميع الأنماط وإرشادات التصميم التي استخرجها من تحليل المنافسين..
00:04:35الحركة هي مفتاح الاحتفاظ بالمستخدمين، والتي يمكنك من أجلها استخدام إضافات Figma المدعومة بالذكاء الاصطناعي لتحريك كل شيء من الشعارات إلى الواجهات الكاملة في بضع نقرات فقط.
00:04:44Magic Animator هو موقع رائع وقوي حقاً يستخدم الذكاء الاصطناعي لتحريك جميع تصميماتك.
00:04:49يمكنه تحريك كل شيء من الشعارات إلى منشورات وسائل التواصل الاجتماعي إلى واجهات المستخدم وإنشاء تفاعلات دقيقة في تطبيقاتك تساعد في الحفاظ على اهتمام المستخدمين والاحتفاظ بهم.
00:04:59Magic Animator متاح كإضافة Figma مما يتيح لك إضافة الرسوم المتحركة بسهولة إلى تصميمات واجهة المستخدم الخاصة بك.
00:05:05عند تشغيل الإضافة، تكتشف تلقائياً الطبقات في واجهة المستخدم الخاصة بك وتنشئ أربع رسوم متحركة لك لتختار منها.
00:05:11يمكنك بعد ذلك تصدير الرسم المتحرك الذي اخترته كملف Lottie وهو تنسيق JSON متخصص لإضافة الرسوم المتحركة.
00:05:17الآن Magic Animator أداة مدفوعة ولكن إذا كنت تبحث عن بديل مماثل يمكنك استخدام Lottie files المتاح أيضاً كإضافة Figma.
00:05:23يتيح لك تطبيق الرسوم المتحركة في تصميمات موقعك الإلكتروني وتصديرها بتنسيقات متعددة بما في ذلك أنواع مختلفة من ملفات Lottie JSON.
00:05:30يمكنك حتى إعطاء ملف الرسوم المتحركة إلى Claude code وسيطبق الرسوم المتحركة على واجهة المستخدم الخاصة بك نيابة عنك.
00:05:36إذا كنت لا ترغب في التصميم على Figma من الصفر، يمكنك استخدام إضافة HTML to design لتحويل أي موقع بتنسيق HTML إلى تصميم Figma قابل للتحرير بالكامل.
00:05:45إنها متاحة في كل من الخطط المجانية والمدفوعة وفي الخطة المجانية تحصل على ما يصل إلى 10 عمليات استيراد كل 30 يوماً.
00:05:51الجزء الرائع هو أنه يمكنك استخدامه كـ MCP والوصول إلى قدرات التصميم لوكيل الذكاء الاصطناعي الخاص بك مباشرة داخل تصميم Figma الخاص بك.
00:05:58للقيام بذلك، تقوم بربطه بأدوات الذكاء الاصطناعي الخاصة بك مثل Claude أو Cursor وتكوين MCP باتباع دليل الإعداد..
00:06:05كلما أردت إنشاء تصميم، كل ما عليك هو إعطاء أمر لوكيل الذكاء الاصطناعي الخاص بك واستخدام الكلمة المفتاحية
00:06:11"إرسال إلى Figma"
00:06:12أو
00:06:12"إرسال إلى HTML"
00:06:13للتصميم.
00:06:14هذا ينشئ ملف JSON يحتوي على التصميم ويرسله إلى Figma بمجرد موافقتك عليه.
00:06:18يمكنك بعد ذلك عرض التصميم في Figma والتعاون مع أداة الذكاء الاصطناعي المفضلة لديك لإنشاء تصاميم مذهلة وتعديل أي شيء لا يعجبك بشكل فوري.
00:06:26لنتحدث الآن عن Automata.
00:06:27بعد تعليم الملايين من الأشخاص كيفية البناء باستخدام الذكاء الاصطناعي، بدأنا في تطبيق هذه الأساليب بأنفسنا.
00:06:33اكتشفنا أننا نستطيع بناء منتجات أفضل بشكل أسرع من أي وقت مضى.
00:06:37نحن نساعد في تحويل أفكارك إلى واقع سواء كانت تطبيقات أو مواقع إلكترونية.
00:06:41ربما شاهدت مقاطع الفيديو الخاصة بنا وفكرت
00:06:43"لدي فكرة رائعة لكن ليس لدي فريق تقني لتنفيذها"
00:06:46.
00:06:46هذا بالضبط ما نقدمه.
00:06:47فكر فينا كشريكك التقني المساعد.
00:06:49نطبق نفس الأساليب التي علمناها للملايين مباشرة على مشروعك، محولين المفاهيم إلى حلول عملية حقيقية دون صداع توظيف أو إدارة فريق تطوير..
00:06:57هل أنت مستعد لتحويل فكرتك إلى واقع بسرعة؟ تواصل معنا على hello@automata.dev.
00:07:01بهذا نصل إلى نهاية هذا الفيديو.
00:07:02إذا كنت ترغب في دعم القناة ومساعدتنا على الاستمرار في صنع مقاطع فيديو مثل هذه، يمكنك القيام بذلك باستخدام زر الشكر الفائق أدناه.
00:07:09كما هو الحال دائماً، شكراً لك على المشاهدة وسأراك في الفيديو التالي..