00:00:00أهلاً بك في حلقة جديدة من سلسلة التصميم الخاصة بنا، حيث نكتشف أدوات ذكاء اصطناعي جديدة تساعدك على التصميم بشكل أفضل.
00:00:07مع نماذج مثل Opus 4.5 و Gemini 3 Pro، لقد قطع التصميم بمحث واحد شوطاً طويلاً.
00:00:12لكن هناك الكثير من الأدوات وسير العمل المختلفة التي سنعرضها لك في هذا الفيديو والتي تساعدك بالفعل في إنشاء تصاميم مذهلة حقاً.
00:00:20ShadCN هي مكتبة توفر مكونات واجهة مستخدم جميلة وقابلة للتخصيص بالكامل وسهلة الوصول تتكامل بسلاسة مع مشاريع React و Next.js الخاصة بك.
00:00:28تتيح لك ميزتها الجديدة إنشاء إعدادات مسبقة للاستيراد إلى مشروعك.
00:00:32انقر على
00:00:33"مشروع جديد"
00:00:34، وستشاهد مكونات عينة على جانب من الصفحة والإعدادات المسبقة على الجانب الآخر، حيث يمكنك تجربة واستكشاف حتى تجد نمط المكون الذي يناسبك بشكل أفضل.
00:00:43بمجرد أن تقرر أي نمط تريد استيراده، انقر على
00:00:46"إنشاء مشروع"
00:00:47، واختر الإطار الذي يستخدمه مشروعك، انسخ أمر التثبيت والصقه في المحطة الطرفية، وسيتم تثبيت مشروع جديد بالإعدادات المسبقة في مشروعك على الفور.
00:00:56من الأفضل دائماً أن يكون لديك تصميم جاهز لموقعك قبل الذهاب إلى وكيلك في البرمجة، حتى لا تضطر إلى طلب من وكيلك مراراً وتكراراً لإجراء تغييرات لا تبدو كما كنت تريد.
00:01:06لهذا، Google Stitch هي أفضل أداة للتصميم، لأنها تدعم الآن تفكير Gemini 3 Pro و Nano Banana المدمجة مباشرة لتحسين التصاميم باستخدام الصور المولدة.
00:01:15لكن قبل أن ننتقل إلى التصميم، فإن تحديد مخطط الألوان لتطبيقك هو الخطوة الأكثر أهمية.
00:01:20لهذا، أفضل مكان هو Coolers، وهو منشئ لوحة الألوان حيث يمكنك تجربة ورؤية عدة ألوان جنباً إلى جنب وتحليل تركيباتها..
00:01:28استمر في الضبط حتى تجد الذي يعجبك ثم قم بتصدير لوحة الألوان بالصيغة التي تناسبك بشكل أفضل.
00:01:34بعد حوالي 4 دقائق، كان واجهة المستخدم التي أنشأتها Stitch بسيطة جداً مع توازن واضح بين الألوان الرئيسية والألوان المميزة.
00:01:41إحدى تحديثات الميزات الجديدة في Google Stitch هي أنه يمكنك تحديد جميع شاشات التصميم وإنشاء نموذج أولي لأغراض الاختبار.
00:01:49النموذج الأولي هو في الأساس عرض توضيحي لكيفية عمل المشروع سواء كان تطبيق ويب أو جوال.
00:01:54يقوم تلقائياً بضبط تدفقات الملاحة والعثور على المناطق القابلة للنقر وإنشاء نموذج أولي كامل يعمل لك مباشرة من التصميم.
00:02:01حتى إذا كان بإمكان الذكاء الاصطناعي إنشاء تصاميم جيدة جداً بمفرده، فلا بأس بالحصول على الإلهام من مصدر جيد.
00:02:08لهذا الغرض، هناك معارض متعددة تحتوي على أقسام أبطال وأشرطة ملاحة وتذييلات وحتى صفحات 404 مخصصة حيث ستجد مصادر إلهام إبداعية وجذابة.
00:02:16يمكنك الحصول على الروابط لجميع هذه الموارد في الوصف أدناه، والتي استخدمت منها Superhero للحصول على الإلهام لتصميم قسم البطل، وأعطيت لقطة من الصفحة إلى Stitch لتكرار التصميم المناسب لموقعنا..
00:02:28هناك ميزة جديدة مهمة أخرى.
00:02:30قامت Google Stitch بتحسين الطريقة التي يمكنك بها تصدير تصاميمك.
00:02:34تتيح لك تصدير مباشرة إلى AI Studio، وكيل البرمجة الخاص بهم Jules، أو نسخ الكود إلى الحافظة، لكنني سأقوم بتصديره كملف مضغوط واستيراده إلى Claude..
00:02:43عند العمل مع الوكلاء الفرعيين عبر Claude، كانوا يستنزفون الكثير من وقتك أثناء التعامل مع مهام الآخرين، مما أدى إلى تأخيرات كبيرة.
00:02:50قام Claude مؤخراً بإصلاح هذا بمنح الوكلاء الفرعيين القدرة على العمل في الخلفية.
00:02:55لقد قمت بتكوين Puppeteer MCP لاختبار المتصفح، والذي يسمح لـ Claude باختبار واجهة المستخدم من خلال وصول المتصفح.
00:03:01نظراً لأن اختبار المتصفح يستغرق الكثير من الوقت، يمكنك تشغيل هذه المهمة في الخلفية وتعيين الوكيل مهمة أخرى في الوقت ذاته.
00:03:08بهذه الطريقة، يمكنك أن يعمل عدة وكلاء على مهام مختلفة في نفس الوقت، مما يجعل استخدام وقتك أفضل.
00:03:14ومع ذلك، فإن هؤلاء الوكلاء سيستخدمون الرموز، لذا عليك مراقبة استخدام الرموز والتكاليف.
00:03:19يمكنك تشغيل عدد من الوكلاء كما تريد جنباً إلى جنب وتعيينهم مهام.
00:03:22سيعيد كل وكيل مخرجاته بمجرد الانتهاء من التنفيذ.
00:03:25سنغطي هذه الوكلاء في الخلفية بمزيد من التفاصيل في فيديو منفصل، لذا ابقَ معنا.
00:03:30يواجه Claude غالباً صعوبة في إصلاح مشاكل واجهة المستخدم الصغيرة مهما طلبت.
00:03:34هنا يأتي دور أداة رائعة حقاً تسمى Drawbridge لملء هذه الفجوة.
00:03:37لقد غطيناها بالفعل سابقاً على قناتنا.
00:03:40في السابق، كانت تعمل فقط على Cursor، لكنها الآن تحتوي على تكامل Claude code وتحديثات رائعة أخرى.
00:03:45لقد شكرونا حتى في أحد إصداراتهم، ونحن ممتنون جداً لهذا المشروع الرائع.
00:03:49يمكنك الذهاب إلى قناتنا ومشاهدة الفيديو عن كيفية استخدام Drawbridge، لكنهم حسّنوا الميزات منذ فيديونا السابق والتي تسمح لك بتحديد الأقسام بدقة أكثر من قبل، مما يسهل على المستخدمين غير التقنيين نقل المشاكل.
00:04:01لقد أصلحوا أيضاً مشكلة لقطة الشاشة التي واجهناها في المرة الأخيرة..
00:04:06بالإضافة إلى ذلك، قاموا بإعداد أمر شرطة مائلة لـ Claude code تلقائياً، والذي كان يتعين علينا القيام به يدوياً سابقاً.
00:04:13بشكل عام، هذه التحسينات تجعل سير عملك أكثر كفاءة وإثارة للإعجاب.
00:04:17بعد تعليم ملايين الأشخاص كيفية البناء باستخدام الذكاء الاصطناعي، بدأنا في تطبيق هذه سير العمل بأنفسنا.
00:04:23اكتشفنا أنه يمكننا بناء منتجات أفضل بشكل أسرع من أي وقت مضى.
00:04:27نحن نساعد في تحقيق أفكارك، سواء كانت تطبيقات أو مواقع ويب.
00:04:31ربما شاهدت مقاطعنا وتفكر،
00:04:32"لدي فكرة رائعة، لكن ليس لدي فريق تقني لبنائها."
00:04:35هذا بالضبط حيث نأتي.
00:04:36فكر فينا كمساعد تقني لك.
00:04:38نطبق سير العمل ذاته الذي علمناه ملايين الأشخاص مباشرة على مشروعك، محولين الأفكار إلى حلول حقيقية تعمل بدون الإزعاج من توظيف أو إدارة فريق تطوير.
00:04:47هل أنت مستعد لتسريع فكرتك إلى الواقع؟ تواصل معنا عبر hello@autometer.dev..
00:04:52هذا يختتم فيديونا.
00:04:53إذا كنت تريد دعم القناة ومساعدتنا في الاستمرار في صنع مقاطع مثل هذه، يمكنك القيام بذلك باستخدام زر الشكر الفائق أدناه.
00:05:00كما هو الحال دائماً، شكراً لمشاهدتك وسأراك في المرة القادمة..