واجهة الذكاء الاصطناعي الخاصة بك تبدو عادية... إليك الحل (DESIGN.md)
BBetter Stack
Computing/SoftwareSmall Business/StartupsPhotography/ArtInternet Technology
Transcript
00:00:00أصبحت أدوات البرمجة بالذكاء الاصطناعي جيدة بشكل مخيف. Cursor، Claude Code، V0. يمكنك الانتقال من فكرة إلى
00:00:06تطبيق يعمل في دقائق، ولكن عندما تفتح واجهة المستخدم تجد مظهرها غريباً. الكود يعمل، لكن الواجهة
00:00:12لا تزال تبدو رخيصة جداً. الآن قارن ذلك بـ Stripe أو Linear أو Vercel، أو أي منصة كبيرة حقاً.
00:00:17إذن ما الذي يفعلونه بشكل مختلف؟ إنه مجرد ملف واحد بسيط. يسمى DesignMD،
00:00:22وقد جعلته جوجل مفتوح المصدر للتو. سأريك كيف تدمج هذا في كودك خلال دقائق معدودة.
00:00:30الآن، DesignMD هو ملف ماركداون بسيط يخبر وكلاء الذكاء الاصطناعي كيف يجب أن يكون شعور ومنظر
00:00:38منتجك. الألوان، الخطوط، المسافات، الأزرار، قواعد التخطيط، ملاحظات إمكانية الوصول، كل شيء. لذا بدلاً
00:00:45من تخمين علامتك التجارية، يقرأ الذكاء الاصطناعي الملف ويتبعه. لا يوجد تصدير من Figma، ولا فوضى ملفات JSON.
00:00:52لا توجد مطالبات من 10 فقرات أحتاج لكتابتها في كل مرة للحصول على نتيجة مثالية. جوجل جعلته مفتوح المصدر
00:00:57في 21 أبريل، وفي غضون أسبوعين فقط، انتشر بالفعل على GitHub ليصل إلى أكثر من
00:01:0270,000 نجمة. إذا كنت تستمتع بأدوات البرمجة والنصائح التي تسرع سير عملك، فتأكد من الاشتراك.
00:01:08لدينا فيديوهات تصدر طوال الوقت. حسناً، هذا رائع حقاً. دعني أريك لماذا هذا
00:01:12يهم بالفعل. حسناً، سأستخدم نفس المطالبة هنا: “قم ببناء لوحة تحكم حديثة”.
00:01:18أولاً، لا يوجد ملف DesignMD. يقوم بالتوليد، ونعم، هذه لوحة تحكم كلاسيكية من ذكاء اصطناعي.
00:01:24تعمل تقنياً، أليس كذلك؟ لكنها تمتلك طابع Tailwind الافتراضي. تبدو كذلك تماماً. أزرار
00:01:30عشوائية. لدينا بطاقاتنا التقليدية هنا. لا توجد هوية حقيقية لأي شيء تبنيه بالفعل.
00:01:35الآن، إذا قمت بتشغيل نفس المطالبة مرة أخرى، ولكن هذه المرة أضفت ملف DesignMD بأسلوب Stripe،
00:01:42أو أي ملف DesignMD تريده لعلامة تجارية أخرى، وانظر إلى الفرق. الألوان متناسقة.
00:01:48المسافات تبدو أنظف. الأزرار تبدو وكأنها تنتمي لبعضها البعض حقاً. الشاشة بأكملها
00:01:54لها وجهة نظر. نفس الذكاء الاصطناعي، نفس المطالبة، ولكن الآن بسياق مختلف. بدون DesignMD، الذكاء الاصطناعي
00:02:02يخمن. كيف يجب أن يبدو الموقع؟ مع DesignMD، لدى الذكاء الاصطناعي قواعد بناءً على منصات
00:02:08مثبتة أخرى تبدو جيدة حقاً بالفعل. إذن ما الذي يوجد داخل هذا الملف فعلياً؟ فكر فيه
00:02:14كنظام تصميم يمكن للذكاء الاصطناعي قراءته. في الأعلى، عادة ما يكون لديك رموز منظمة. أشياء مثل
00:02:21أكواد الألوان الدقيقة، عائلات الخطوط، حواف الزوايا، المسافات. هذه قواعد صارمة، لكن الجزء المهم هو
00:02:27ما يأتي بعد ذلك. الماركداون. هذا هو المكان الذي تشرح فيه القصد. ليس مجرد “استخدم هذا اللون الأزرق”،
00:02:34بل “هذا الأزرق هو التمييز الأساسي ويجب أن يشعر المستخدم بالوضوح والثقة”. هذا يهم لأن
00:02:40الذكاء الاصطناعي لا يحتاج فقط للأرقام. إنه يحتاج إلى تقدير الأمور. عادة ما يغطي DesignMD الجيد لوحة الألوان،
00:02:47والخطوط، والمكونات، والتخطيطات، وإمكانية الوصول. لذا يحصل الذكاء الاصطناعي على شيئين معاً: القيم
00:02:54الدقيقة والسبب الكامن وراءها. وهذا هو السبب في أن المخرجات تتوقف عن الانحراف عما
00:03:00نحاول الوصول إليه فعلياً. الآن السؤال البديهي هو، هل نحتاج حقاً لتنسيق نظام تصميم آخر؟
00:03:05لدينا بالفعل Figma، ولدينا رموز JSON، ولدينا بالفعل قواعد Cursor وClaudeMD.
00:03:11ولكن كل واحد من هذه يحل مشكلة مختلفة. Figma هي واجهة مستخدم. إنها رائعة للبشر، ولكنها
00:03:18تعيش عادة خارج المستودع الكودي. رموز JSON رائعة للآلات، لكنها لا تشرح
00:03:25ذوقنا للموقع أو القصد الذي نسعى وراءه. قواعد Cursor وClaudeMD تخبر الوكيل
00:03:31كيف يتصرف، لكنها ليست نظام تصميم حقاً. DesignMD يتوسط كل هذا. إنه قابل للقراءة
00:03:38بواسطة البشر. وهو في نفس الوقت قابل للقراءة آلياً. يتم التحكم في إصداراته وهو مصمم
00:03:44للوكلاء البرمجيين. هذا هو التغيير الكبير هنا. نظام تصميمك لم يعد محبوساً في أداة تصميم.
00:03:49إنه يعيش بجانب الكود الخاص بك مباشرة داخل ملف الماركداون هذا. وهذا هو سبب انتشاره الكبير خلال
00:03:54أسبوعين فقط وانتباه المطورين له. مستودع المجتمع يتجاوز الآن 70,000 نجمة،
00:03:59صحيح؟ هذا سريع جداً. الناس يشاركون ملفات DesignMD لمنصات مثل Linear وStripe وNotion
00:04:04وVercel، والسبب وراء ذلك بسيط. لا أحد يريد الاستمرار في كتابة “اجعله نظيفاً،
00:04:09اجعله حديثاً، استخدم مسافات أفضل، اجعله أكثر شبهاً بهذا الموقع”. هيا، هذا يصبح مملاً بسرعة.
00:04:16مع DesignMD، تتوقف عن تكرار نفسك. تعطي الذكاء الاصطناعي قواعد التصميم مرة واحدة، ثم تبدأ
00:04:23كل شاشة من نفس الأساس. هذا هو الفوز الحقيقي هنا. سرعة التصميم عبر جميع الشاشات.
00:04:29هناك عمل أقل لإعادة التنفيذ. وهناك وقت أقل يقضى في إصلاح نفس الزر القبيح للمرة العاشرة.
00:04:34حسناً، رأيي الصريح هنا. إنه ليس مثالياً. إنه بداية رائعة، أليس كذلك؟ لكنه
00:04:39ملف واحد. يعيش في مستودعك. يعمل عبر الأدوات. يتضمن إرشادات إمكانية الوصول
00:04:44وإعداده يقارب الصفر، وهو أمر رائع. من السهل جداً إضافته. أيضاً، الملف جيد بقدر جودة
00:04:51ما تضعه فيه. ملف DesignMD ضعيف سيعطيك بالتأكيد مخرجات ضعيفة، ولكن للمطورين المستقلين،
00:04:57والنماذج الأولية، وسير العمل المعتمد على الذكاء الاصطناعي، هذا تحديث عملي حقاً. فهل يجب عليك استخدامه؟ نعم،
00:05:02غالباً نعم. خاصة إذا كنت تبني بالفعل باستخدام Cursor أو Claude Code أو V0. ابدأ بقالب
00:05:08من مستودع “awesome”. الرابط في الوصف. ضعه في مشروعك، ثم خصه لموقعك
00:05:13وعلامتك التجارية الخاصة. هدفك ليس جعل الذكاء الاصطناعي مبدعاً. هدفك هو التوقف عن جعله
00:05:20يخمن، لأنه بمجرد وضوح القواعد، ستصبح واجهة المستخدم أكثر اتساقاً ويبدأ تطبيقك
00:05:25بالشعور بأنه منتج حقيقي وليس مجرد عرض تجريبي للذكاء الاصطناعي. إذا كنت تستمتع بأدوات البرمجة والنصائح
00:05:31مثل هذه، فتأكد من الاشتراك في قناة Better Stack. نراكم في فيديو آخر.