رموز التصميم
استبدل الألوان والمسافات المتناثرة برموز تصميم مسماة.
:root { --focus-ring: #2458b8; }
button:focus-visible, a:focus-visible {
outline: 3px solid var(--focus-ring);
outline-offset: 4px;
}- النماذج
- اضبط نقطة اتصال متوافقة مع OpenAI أو Anthropic باستخدام العنوان الأساسي ومفتاح API عند الحاجة. اختبر الاتصال. يجب أن يعمل خادم النموذج المحلي؛ وقد ترسل الأدوات البعيدة البيانات بشكل منفصل.
- المشروع
- افحص المظهر الداكن وتركيز لوحة المفاتيح كي لا يخفي الدمج مشكلة تباين.
- راجع قبل التطبيق
- قارن السلوك الفعلي بالنتيجة المتوقعة. إذا فشل فحص، تحقّق من السبب قبل إجراء تغييرات إضافية.
:root { --focus-ring: #2458b8; }
button:focus-visible, a:focus-visible {
outline: 3px solid var(--focus-ring);
outline-offset: 4px;
}حول قرار التصميم إلى شيفرة واجهة تعمل
تصبح ملاحظات التصميم قابلة للتنفيذ عندما تحدد تفاعلا إلى جانب المظهر. Mith DesignLab مساحة برمجة على Windows لتحويل تلك الملاحظات إلى تغييرات يمكنك فحصها في مشروع واجهتك. صف العنصر وتخطيطه المحيط وما يجب أن يحدث عند وصول المستخدم إليه. عندها يستطيع النقاش تناول الأنماط والسلوك اللذين ينتجان التجربة.
رمز حلقة التركيز المعروض هنا مثال محتمل لمشروع. يمكنك طلب فحص الأزرار والروابط التي تستخدمه واقتراح تعديل محدد وشرح المحددات المتأثرة. راجع CSS الفعلي قبل فحص الواجهة المعروضة بالتنقل بلوحة المفاتيح. قيمة لون في مثال لا تثبت إتاحة كل خلفية أو مكون أو تفاعل، ولا تعني شهادة تصميم تلقائية.
اتصل بنموذجك المختار عبر نقطة نهاية مدعومة متوافقة مع OpenAI أو تابعة لـ Anthropic، وأضف بيانات اعتماد عند طلبها. تشير خيارات الذكاء الاصطناعي بدون رقابة إلى نماذج متاحة عبر تلك النقطة؛ وتعتمد القيود والأدوات وسعة السياق على النموذج والخادم. بعد مراجعة التعديلات، شغل فحوص المشروع المعنية وافحص الحالات المتأثرة في متصفحك. اربط القبول المرئي بالواجهة التي سيستخدمها الناس فعليا.
العمل انطلاقا من ملاحظات التصميم
ما الملاحظات الأنفع من طلب تحسين المظهر؟
حدد المكون والحالة والمشكلة الملحوظة. مثلا، اشرح أن تركيز لوحة المفاتيح يختفي أمام لوحة معينة. أرفق الأنماط المعنية وسلوكا مستهدفا ليكون للتعديل المقترح شرط قبول محدد.
هل يتحقق مثال حلقة التركيز من الإتاحة؟
لا. إنه يوضح CSS يمكنك فحصه أو تكييفه. افحص النتيجة المعروضة مقابل الألوان المحيطة وسلوك لوحة المفاتيح ومتطلبات المشروع. لا يستطيع رمز واحد إثبات إتاحة واجهة كاملة أو نظام مكونات.
كيف أراجع تغيير رمز نمط مشترك؟
حدد المكونات التي تستهلكه وافحص حالاتها المتأثرة. اختبر أكثر من المكون المذكور في الطلب الأصلي. قد تغير الأنماط المشتركة شاشات غير مرتبطة حتى عندما يكون الملف المعدل صغيرا.
هل يمكن إبقاء ملفات التصميم الخاصة على اتصال نموذج محلي؟
يتطلب النموذج المحلي خادما منفصلا يعمل، ولا يحدد سوى وجهة نقطة النهاية تلك. قد ترسل أدوات أخرى بيانات إلى أماكن أخرى. افحص الاتصالات وشارك سياق التصميم اللازم فقط لشرح تغيير الشيفرة المطلوب.
Mith DesignLab · آخر تحديث 2026-10-25