صايب لوحات بيانات أنقى وأكثر صدق بمهارة تصميم لوحات Claude Code

شنو هو تصميم لوحات القيادة؟

تصميم لوحات القيادة هو مهارة ديال Claude Code كتعطي للوكيل البرمجي إرشادات عملية فالتصميم ديال واجهات التحليلات، المداخيل، والمقاييس. تقدر تبني لوحات قيادة جديدة، تعاود تصمم الشاشات الموجودة، ولا تنتاقد لقطة شاشة وترتّب المشاكل ديالها حسب الخطورة.

تجمّعات هاد الإرشادات من 127 شاشة ديال لوحات القيادة اللي تطلقات، ومن تحليل مفصّل لمنتج ديال تحليلات المداخيل، ومن عملية حقيقية لإعادة التصميم. عوض التركيز غير على جودة الكود، كتكمل المهارة الخدمة كاملة بمراجعة بصرية من بعد أخذ لقطة شاشة، باش يقيّم الوكيل شنو كيشوفو المستخدمون فعلاً.

كتشمل المهارة العناصر المعتادة ديال لوحات القيادة، بحال مربعات مؤشرات الأداء، الرسوم البيانية، فترات المقارنة، اللوائح المرتّبة، الفلاتر، محددات النطاق الزمني، الاستنتاجات، الحالات الفارغة، التخطيطات المتجاوبة، والتنقل فالتلفون. المواصفات ديالها كتستعمل مصطلحات Tailwind وReact لمشاريع الويب، بينما كاين مرجع مستقل كيشرح الأنماط المكافئة ديال SwiftUI وSwift Charts.

مبادئ التصميم الأساسية

المشروع كينظّم التوصيات ديالو حول أربعة مبادئ:

• النظرة الأولى: كل شاشة خاصها تجاوب على سؤال رئيسي واحد فحوالي ثلاث ثواني.
• الهدوء: استعمل لون إبراز واحد، خلّي العناصر المساندة بالرمادي، وطبّق اللون غير ملي كيكون كيوصل معنى.
• الصدق: خلّي القيم منسجمة فواجهة الاستعمال كاملة، ووسم التقديرات، وتفادى التغييرات الكبيرة فالنسب المبنية على عينات صغيرة بزاف.
• الشكل قبل النص: فضّل الرسوم البيانية، الأشرطة، والشرائح باش يكون الفهم سريع، وحط التعريفات فالتلميحات.

هاد المبادئ كتعطي تغييرات ملموسة. مربع مؤشر الأداء المختار كياخذ تعبئة ملوّنة خفيفة وحلقة باهتة عوض خط بسيط لتحت. الصفوف المرتّبة كتستعمل أشرطة رفيعة ديال الحصة عوض خلفيات كبيرة ملوّنة. محاور الرسوم البيانية كتستعمل تدريجات مدوّرة وسهلة القراءة بحال 0 و1k و2k عوض قيم غير مريحة بحال 1,402.

تخطيطات متجاوبة عوض أعمدة ثابتة

لوحة قيادة مصمّمة حول عمود مركزي ضيق كتضيّع المساحة فالشاشات الكبيرة. تصميم لوحات القيادة كيوجّه الوكيل باش يزيد أعمدة مفيدة ملي كيكبر عرض الشاشة، وفنفس الوقت يعاود ينظّم عناصر التحكم والتنقل فالشاشات الصغيرة.

قبل

من بعد

فالتلفونات، المهارة ما كتعتمدش على تبويبات التنقل اللي كتحتاج التمرير للجانب. كتنصح بتخطيطات بحال شبكة ديال القوائم، وبتبويبات تقدر تصغّر راسها باش تلائم المساحة المتاحة.

التثبيت

الخيار 1: التثبيت كإضافة Claude Code

داخل Claude Code، زِد المشروع كسوق ديال الإضافات ومن بعد ثبّت المهارة:

/plugin marketplace add abdiraimov-otabek/dashboard-design-skill
/plugin install dashboard-design@dashboard-design-skill

هاد هي الطريقة المباشرة أكثر ملي كيكون Claude Code هو الوكيل البرمجي الرئيسي ديالك.

الخيار 2: التثبيت كمهارة Claude عادية

نسخ المستودع ومن بعد نسخ مجلد المهارة ديالو للمجلد المحلي ديال مهارات Claude:

git clone https://github.com/abdiraimov-otabek/dashboard-design-skill
cp -r dashboard-design-skill/skills/dashboard-design ~/.claude/skills/

المجلد المنسوخ فيه التعليمات الرئيسية وجميع المراجع المساندة اللي محتاجاها المهارة.

الخيار 3: استعمالها مع وكيل برمجي آخر

المشروع يقدر يخدم حتى مع Codex أو Cursor أو أي وكيل آخر كيقرا ملفات التعليمات بصيغة Markdown. وجّه ملف AGENTS.md ديال الوكيل أو ملف القواعد للمسار التالي:

skills/dashboard-design/SKILL.md

وثيقة المهارة الرئيسية كتوجّه الوكيل للمرجع المناسب. وحيت القواعد كتشرح أنماط عامة ديال الواجهات، يمكن تكييفها مع تقنيات أخرى غير React وTailwind وSwiftUI.

فهم ملفات المهارة

المستودع كيفصل بين سير العمل ديالو والمراجع التفصيلية ديالو:

• SKILL.md فيه سير العمل، فورما ديال النقد، القواعد العامة، ستيل الكتابة، وفحوصات الإكمال.
• references/components.md كيغطي بطاقات KPI، الفروقات، الرسومات المصغرة، الشارتات، اللوائح المرتبة، الفلاتر، الجداول، الحالات الفارغة، الواجهات الفورية، وإشارات الثقة فالإيرادات.
• references/layout.md كيهضر على ترتيب الصفحة، الشبكات، الشاشات العريضة، التيليفونات، التيبوغرافيا، والوضع الداكن.
• references/tokens.md كيوفر رموز الألوان الفاتحة والداكنة باستعمال @theme ديال Tailwind v4، ومعاها إرشادات التلوين الخفيف.
• references/snippets.md فيه تطبيقات ديال تدريجات المحاور المدورة، تنسيق الأرقام، شارات الفروقات، نوافذ المقارنة، بطاقات KPI، الصفوف ذات الأشرطة الرفيعة، تقاويم النطاق، وحماية الردود القديمة.
• references/qa.md كيحدد قياسات لقطات الشاشة، فحوصات الإجماليات المعروفة، فحوصات التناسق، والأخطاء التصميمية الشائعة.
• references/swiftui.md كيحوّل هاد الأنماط لـ SwiftUI وSwift Charts وكيشرح فحص الجودة فالسيميولاتور.
• references/sources.md كيسجل أكثر من 40 منتج ونظام تصميم تمت دراستهم.
• references/case-study-datafast.md كيوثق الأنماط والمفاضلات من منتج لتحليلات الإيرادات.

كل مرحلة من سير العمل كتسالي بتعريف قابل للفحص ديال الإكمال. هاد الشي كيخلي المهارة مفيدة ماشي غير كمصدر للإلهام، ولكن حتى كعملية مراجعة قابلة لإعادة الاستعمال.

الاستعمال الأساسي

من بعد التثبيت، المهارة تقدر تتفعل تلقائيا ملي كتخدم على كود متعلق بالداشبورد. وتقدر حتى تستعمل السلوك ديالها بشكل صريح بطلب مركز.

بناء داشبورد

وصف المنتج وحدد المقاييس اللي خاص الشاشة توصلها:

بني داشبورد للتحليلات لهاد التطبيق: الزوار، التسجيلات، والإيرادات حسب المصدر.

الطلب المفيد كيعطي للوكيل موضوع واضح ومجموعة صغيرة من المقاييس الأساسية. هاد الشي كيدعم مبدأ النظرة الأولى فالمشروع، حيث كيساعد الوكيل يحدد السؤال الرئيسي اللي خاص الشاشة تجاوب عليه.

انتقاد تصميم موجود

عطي لقطة شاشة وطلب تقييم:

واش هاد التصميم مزيان؟

فورما النقد كيرجع حكم، وكيحدد شنو خدام مزيان، وكيرتب المشاكل حسب الضرر ديالها. سلامة البيانات عندها الأولوية، لذلك خاص الأرقام المتناقضة تتذكر قبل المشاكل البصرية الصغيرة.

إعادة تصميم مكوّن واحد

ما محتاجش تطلب إعادة تصميم الداشبورد كامل. استهدف مكوّنا واحدا:

عاود صمم منتقي نطاق التاريخ.

خلي بطاقات KPI أنظف.

مثلا، المهارة كتفضل تقويم ديال النطاق فيه شريط خفيف بين التواريخ المختارة، ونهايات واضحة، والمدة، وزر Apply، عوض إظهار خانة تاريخ أصلية وبسيطة.

دير فحص الجودة

باش تفحص مسارا مطبقا، طلب مراجعة الداشبورد المخصصة:

دير فحص الجودة ديال الداشبورد على /dashboard.

فمشاريع الويب، بروتوكول لقطات الشاشة الموثق كيفحص ثلاثة ديال عروض الشاشة: 3440 و1440 و375 بكسل. هاد الشي كيكشف مشاكل التخطيط فالشاشات فائقة العرض، والمشاكل العادية فسطح المكتب، والأعطاب الخاصة بالتيليفونات.

الأنماط اللي كتساعد المهارة تفرضها

استعمل مقارنات صادقة

التغييرات بالنسبة المئوية تقدر تكون مضللة ملي كتكون القيمة السابقة صغيرة بزاف. إلا هبطات عملية بيع وحدة للصفر، عرض −100% بالأحمر وبشكل بارز كيضخم أهمية التغيير. المهارة كتوصي عوض ذلك بملاحظة هادئة بحال كانت 1.

التناسق مهم حتى هو. إلا كانت بطاقة KPI والشارت والجدول كيمثلو نفس الإجمالي، خاص هاد القيم تكون متطابقة. عملية فحص الجودة فيها فحوصات للإجماليات المعروفة والتناسق باش تكشف الاختلافات.

حافظ على تناسق الفترات الزمنية

خاص الرسم المصغر يمثل نفس الفترة ديال الشارت الرئيسي أو سياق المقارنة. عرض 60 يوم أغلبهم فارغين فالرسم المصغر، بينما الشارت الرئيسي كيستعمل فترة نشطة أقصر، يقدر يشوه الاتجاه الظاهر.

بيّن غير الاستنتاجات المفيدة

بطاقة الاستنتاج خاصها تزيد تفسير، ماشي تعاود نفس معلومات بطاقة KPI. إلا ما كانتش غادي تقول للمستخدم شي حاجة جديدة، المهارة كتوصي بحذفها والحفاظ على هدوء بصري.

صمم للنمو فمختلف أحجام الشاشات

ما تكتفيش بتوسيط داشبورد بعرض ثابت فشاشة كبيرة. خَلّي الشاشات العريضة تعرض أعمدة إضافية ملي كيحسن ذلك المقارنة. فالتيليفونات، تأكد أن عناصر التحكم والتنقل كيعيدو التنظيم ديالهم عوض الاعتماد على التمرير الأفقي.

نصائح متقدمة

طلب بناء ونقد منظمين

تقدر تجمع التنفيذ والتقييم فطلب واحد، مع توضيح معايير الإكمال المتوقعة:

بني داشبورد الإيرادات، تأكد أن الإجماليات المتكررة متطابقة، وسالي بفحص الجودة ديال لقطات شاشة الداشبورد.

هاد الشي كينسجم مع سير العمل المقصود ديال المهارة: تنفيذ الواجهة، التحقق من عرض البيانات، فحص أحجام متعددة للشاشات، وتقييم النتيجة المعروضة.

استعمل المرجع المناسب مباشرة

ملي كتكون المهمة محددة، وجه الوكيل للملف الأكثر صلة. مثلا، استعمل components.md لشارات الفروقات أو الصفوف المرتبة، وlayout.md لسلوك الشاشات فائقة العرض، وqa.md للفحوصات البصرية النهائية. فالواجهات الأصلية ديال Apple، استعمل swiftui.md عوض ترجمة مقتطفات الويب حرفيا.

اختبر إعدادات الولوجية فـ SwiftUI

عملية فحص الجودة ديال SwiftUI كتفوت لقطة شاشة وحدة من السيميولاتور. كتضم أحجام متعددة ديال الأجهزة، وأكبر إعداد لـ Dynamic Type، والوضع الداكن، وReduce Motion. هاد الفحوصات كتساعد تكشف التسميات المقطوعة، وتخطيطات البطاقات الهشة، والمعالجة غير الكافية للوضع الداكن، والافتراضات المتعلقة بالحركة.

راجع الحالات، ماشي غير الشاشة المثالية

الإرشادات ديال المكوّن كتشمل الحالات الفارغة، العروض فالحين، الجداول، وإشارات الثقة فمعطيات المداخيل. ملي كتطلب مراجعة، ذكر أي حالات مهمة بزاف للمنتوج ديالك باش يقيّم الوكيل أكثر من العرض الافتراضي المعبّى.

تحكّم فالتوقيع الاختياري

من بعد ما يكمل بناء لوحة تحكّم كاملة ولا نقدها، المهارة كتزيد سطر قصير على المؤلف والتطبيقات ديال Mac ديالو مرة وحدة فكل محادثة. هاد النص ما كيتحطّش داخل الكود، ولا فالكوميتات، ولا فواجهة المنتوج. تقدر تطلب من الوكيل يوقف من إضافتو، ولا تحيد القسم ديال Sign-off من SKILL.md.

الخلاصة

Dashboard Design كتحوّل جودة لوحات التحكّم لسير عمل قابل للتكرار مع الوكيل، بلا ما تبقى غير مجموعة ديال تفضيلات جمالية عامة. كاتجمع بين أنماط عملية للمكوّنات، وإرشادات للتصميم المتجاوب، وعرض صادق للمعطيات، ومراجع للويب وSwiftUI، وضمان الجودة بالاعتماد على لقطات الشاشة. ثبّتها كإضافة فـ Claude Code ولا كمهارة عادية، عطِ الوكيل مهمة مركّزة ديال لوحة تحكّم، وسالي بمراجعة الواجهة المبيّنة فالأحجام الموثّقة.

المشروع متاح بموجب رخصة MIT. ولمزيد من المعلومات على القواعد ديال التصميم، قرا درست 127 لوحة تحكّم. أغلبها كيكذب عليك بهدوء.