مكتبة البرومبتات

من نص البرومبت

ابنِ نظام دعم للقرارات المصيرية باسم "Pivot" — أداة تفكير منهجي للقرارات الكبيرة في الحياة والعمل. هذا ليس مجرد قائمة إيجابيات وسلبيات. القيمة في العملية التحليلية المنظّمة، لا في المستند النهائي. الخصائص الأساسية: - استقبال القرار: يصف المستخدم القرار الذي أمامه (الخيارات التي يفاضل بينها)، والقيود المحيطة به (الوقت، المال، العلاقات، الالتزامات)، وقيمه المعلنة (أهم 3 قيم)، وتوجّهه الحالي، والموعد النهائي للحسم - أسئلة توضيحية إلزامية: [LLM API] ينشئ 5 أسئلة مصممة لكشف الافتراضات الخفية والمفاضلات غير المصرّح بها في قرار المستخدم المحدد. يجب على المستخدم الإجابة عن الأسئلة الخمسة كلها قبل المتابعة. جودة هذه الأسئلة هي جوهر جودة المنتج - ستة أطر تحليلية (كل إطار يُشغَّل كاستدعاء API مستقل، وتُعرض النتائج في تبويبات): (1) القيمة المتوقعة — النتائج الموزونة بالاحتمالات لكل خيار (2) تقليل الندم — أي خيار هو الأقل احتمالًا أن تندم عليه عند سن الثمانين (3) اتساق القيم — أي خيار أكثر انسجامًا مع القيم المعلنة، مع أدلة محددة (4) مؤشر قابلية التراجع — مدى سهولة التراجع عن كل خيار إذا اتضح أنه خاطئ (5) الآثار الممتدة — ما الذي يترتب على كل خيار بعد 6 أشهر وبعد 3 سنوات (6) نصيحة لصديق — لو وصف لك صديق موثوق هذا الموقف نفسه بالضبط، ماذا ستقول له؟ - موجز الرأي المضاد: تحليل مستقل يجادل بأقوى صياغة ممكنة ضد التوجّه الحالي للمستخدم — يُعرض بعد الأطر الستة - سجل القرار: يُحفظ مع كامل التحليل والقرار النهائي الذي اتخذه المستخدم. يحدّث المستخدم السجل بالنتيجة الفعلية بعد 90 يومًا وبعد سنة التقنيات: React، و[LLM API] مع برومبت مصمم بعناية لكل إطار تحليلي، وlocalStorage. تصميم جاد ومركّز — بلا تلعيب، وبلا تحفيز مصطنع. هذا المنتج يتعامل مع قرارات حقيقية.

من نص البرومبت

طوّر أداة لتقليل المخاطر القانونية للمستقلين باسم «Shield» — مولّد ومراجع عقود يساعد على تقليل التعرّض للمشكلات القانونية الشائعة. مهم: يجب أن تعرض كل صفحة في التطبيق إخلاء مسؤولية واضحًا بهذا النص: «هذه الأداة توفر نماذج ومعلومات عامة فقط. ولا تُعد استشارة قانونية. راجع جميع المستندات مع محامٍ مؤهل ومرخّص قبل استخدامها.» الميزات الأساسية: - مولّد العقود: يدخل المستخدم نوع المشروع (تطوير مواقع / كتابة محتوى تسويقي / تصميم / استشارات / تصوير فوتوغرافي / غير ذلك)، ونوع العميل (فرد / منشأة صغيرة / منشأة كبرى)، وشروط الدفع (مبلغ ثابت / دفعات على مراحل / أتعاب شهرية)، والقيمة التقريبية للمشروع، و3 مخرجات مخصصة بصياغة بسيطة. تستخدم الأداة [LLM API] لإنشاء عقد كامل يغطي نطاق العمل، وملكية الحقوق الفكرية، وجدول الدفعات، وسياسة التعديلات، وغرامات التأخر في السداد، والسرية، وإنهاء العقد — مع تصديره بصيغة DOCX مرتبة وواضحة. - مراجع العقود: يلصق المستخدم عقدًا واردًا من عميل. يبرز الذكاء الاصطناعي أهم 5 بنود، مرتبة حسب مستوى المخاطرة، وينبه على أي بنود غير معتادة أو غير متوازنة، ويقترح لكل بند تم رصده صياغة بديلة محددة. - رادار المخاطر: يصف المستخدم نشاطه كمستقل في 3 جمل — يحدد الذكاء الاصطناعي أعلى 5 مجالات تعرّض قانوني لديه، مع شرح من فقرة واحدة لكل خطر وخطوة عملية لتقليله. - مكتبة النماذج: 10 أنواع عقود جاهزة، كلها قابلة للتحميل بصيغة DOCX والتعديل عليها في أي معالج نصوص. - مولّد اتفاقية عدم الإفصاح (NDA): يدخل المستخدم أسماء الطرفين، ونطاق السرية، والمدة — ويتم إنشاء اتفاقية عدم إفصاح متبادلة خلال أقل من 30 ثانية. التقنيات: React، و[LLM API] للتوليد والمراجعة، وdocx-js لتصدير ملفات DOCX. يجب أن يكون التصميم احترافيًا وموثوقًا؛ لأن الأداة تتعامل مع مواضيع حساسة وجدية.

من نص البرومبت

ابنِ نظام إطلاق للمؤسس المنفرد باسم "Zero to One" — نظام منظم لمدة 14 يومًا لنقل المستخدم من الفكرة إلى أول عميل يدفع. الميزات الأساسية: - استقبال الفكرة: يدخل المستخدم فكرته، والعميل المستهدف، والسعر المقترح. يتحقق [LLM API] من المدخلات عبر طرح 3 أسئلة توضيحية — لضمان الوضوح والتحديد قبل توليد أي قوالب - خطة تشغيل مخصصة: تقويم لمدة 14 يومًا، يتضمن كل يوم مهمة محددة، وقالبًا مخصصًا، ومؤشر نجاح. تُولَّد كل القوالب عبر [LLM API] بناءً على فكرة المستخدم وعميله المستهدف — وليست قوالب عامة. اليوم 1: نص التحقق من المشكلة. اليوم 3: نص صفحة الهبوط. اليوم 5: رسالة تواصل بالبريد. اليوم 7: دليل مقابلة العميل. اليوم 10: إطار محادثة البيع. اليوم 14: قالب تحليل ما بعد الإطلاق - سجل تنفيذ يومي: كل يوم يضع المستخدم علامة إتمام على المهمة ويجيب عن: "وش صار؟" و"وش العائق بالتحديد إذا ما اكتملت؟" — حقلان، 150 حرفًا لكل حقل - شجرة قرارات: إرشادات بصيغة إذا/فإن لأكثر 8 نقاط تعثر شيوعًا مثل: "ما أحد رد على رسائل التواصل → هذه 3 أسباب محتملة وحل كل سبب". تُعرض كتفرعات تفاعلية، وليست جدارًا طويلًا من النص - درجة جاهزية الإطلاق: درجة مركبة من إكمال المهام اليومية، وعدد رسائل التواصل المرسلة، وعدد المحادثات المنجزة — تُعرض من 0 إلى 100 وتُحدَّث يوميًا - تحليل ما بعد الإطلاق: في اليوم 14، قالب مراجعة موجّه — ما الذي نجح، ما الذي لم ينجح، وما الذي ينبغي التركيز عليه في الأيام الـ14 القادمة. يولّد الذكاء الاصطناعي ملخصًا من صفحة واحدة التقنيات: React، و[LLM API] لتوليد جميع القوالب ومحتوى شجرة القرارات، وlocalStorage. تصميم حماسي وسريع الإيقاع — بحيث يبقى التقدم اليومي واضحًا وفي الواجهة دائمًا.

من نص البرومبت

ابنِ أداة معرفة شخصية وسرد ذاتي باسم "Thread" — عقل ثانٍ يربط الملاحظات في قصة حيّة ومتجددة. الميزات الأساسية: - التقاط الملاحظات: إدخال سريع يتضمن العنوان، المتن، الوسوم، التاريخ، وتصنيفًا اختياريًا باسم "فصل حياتي" يعرّفه المستخدم لفترات محددة مثل "بناء الشركة" أو "سنة في الرياض" — هذه التصنيفات تمنح الملاحظات بنية سردية - محرك الربط: يستخدم [LLM API] دوريًا لتحليل جميع الملاحظات واقتراح روابط موضوعية بين الإدخالات. يرى المستخدم لوحة "الروابط المقترحة" — ويقبل أو يرفض كل اقتراح. الروابط المقبولة تنشئ وصلات ثنائية الاتجاه - الخط الزمني السردي: خط زمني باستخدام D3.js يعرض الملاحظات مجمعة حسب الفصل. يمكن التصغير لعرض عقد كامل، أو التكبير لعرض أسبوع. عند الضغط على أي ملاحظة، تُعرض ضمن سياق الإدخالات المحيطة بها - التلخيص الأسبوعي: كل يوم أحد، يولّد الذكاء الاصطناعي فقرة "مراجعة الأسبوع" من ملاحظات ذلك الأسبوع — وتُحفظ كإدخال خاص داخل الخط الزمني. مع الوقت تتراكم لتصبح سجلًا مقروءًا لحياة المستخدم - تقرير الأنماط: شهريًا — يحدد الذكاء الاصطناعي الثيمات المتكررة، مثل المفاهيم المذكورة 5 مرات أو أكثر، والأفكار الأكثر ارتباطًا، أي ذات كثافة روابط عالية، والأفكار "الخاملة" التي لم يُرجع إليها منذ 60 يومًا أو أكثر وتظهر بصيغة "تستحق المراجعة" - تصدير الفصل: اختيار أي فصل حسب نطاق تاريخي وتصديره كمستند PDF سردي ومنسق التقنيات: React، و[LLM API] لاقتراح الروابط والتلخيص وتقارير الأنماط، وD3.js لعرض الخط الزمني، وlocalStorage مع تصدير/استيراد JSON للنسخ الاحتياطي. تصميم بطابع أدبي — خطوط serif، ومساحات بيضاء واسعة.

من نص البرومبت

طوّر منصة محاكاة تداول افتراضي باسم "Paper" — بيئة واقعية وخالية من المخاطر لتعلّم التداول والاستثمار. الميزات الأساسية: - إعداد المحفظة: يبدأ المستخدم بـ $100,000 كرصيد افتراضي. أسعار لحظية للأسهم وصناديق المؤشرات المتداولة (ETF) عبر Yahoo Finance أو Alpha Vantage API - تنفيذ الصفقات: دعم أوامر السوق والأوامر المحددة. حاكِ انزلاقًا سعريًا بنسبة 0.1% على أوامر السوق. عمولة $1 لكل صفقة، ككلفة تنفيذ واقعية بدون أن تكون مُرهقة للمستخدم - لوحة الأداء: رسم P&L يومي، إجمالي العائد، العائد السنوي، نسبة الصفقات الرابحة، متوسط الربح والخسارة، نسبة Sharpe، والانكشاف الحالي حسب القطاعات — كلها تُحدَّث مع كل صفقة. تُبنى باستخدام recharts - سجل التداول: حقل إلزامي عند إغلاق كل مركز — "ما فرضيتي عند دخول الصفقة؟ ماذا حدث؟ ما الذي سأفعله بشكل مختلف؟" ثلاثة حقول، كل حقل بحد أقصى 200 حرف. لا يمكن إغلاق المركز بدون تعبئة السجل - التحليل السلوكي: [LLM API] يحلل آخر 20 إدخالًا في سجل التداول ويحدد الأنماط السلوكية المتكررة — "أنت غالبًا تخرج مبكرًا من الصفقات الرابحة عندما تقترب من مستويات سعرية دائرية" — ويُعرض التحليل شهريًا - لوحة الترتيب: اختيارية، وتُعاد تصفيرها أسبوعيًا بين مجموعات الأصدقاء — يكون الترتيب حسب العائد المعدّل بالمخاطر، وليس حسب P&L غير المعدّل التقنيات: React، Yahoo Finance أو Alpha Vantage لبيانات السوق، [LLM API] للتحليل السلوكي، و recharts. تصميم مستوحى من واجهات الطرفية (Terminal) — كثيف بالبيانات وبدون عناصر زخرفية.

من نص البرومبت

ابنِ منصة لإدارة برامج التدريب الجماعي والدفعات التعليمية باسم "Cohort OS" — نظام تشغيل لإدارة البرامج الجماعية المنظمة. الميزات الأساسية: - منشئ البرنامج: يحدد المدرب اسم البرنامج، عدد الجلسات، إيقاع الانعقاد (أسبوعي/كل أسبوعين)، الحد الأقصى للمشاركين، السعر، وتاريخ البداية. تحتوي كل جلسة على عنوان، مهمة تحضيرية قبل الجلسة، وسؤال تأمل بعد الجلسة - بوابة المشاركين: يرى كل مشارك مسجل الجدول الزمني للبرنامج، الجلسات القادمة، الواجبات المسلّمة، وملاحظات الأقران في لوحة واحدة - تسليم الواجبات: يسلّم المشاركون واجبات كتابية أو روابط قبل كل جلسة. يرى المدرب كل التسليمات في عرض واحد، ويمكنه ترك ملاحظات مكتوبة على كل تسليم - جولات ملاحظات الأقران: بعد كل جلسة، يُطلب من كل مشارك تقديم ملاحظة واحدة مهيكلة لمشارك آخر. يتناوب التوزيع تلقائيًا بحيث يعطي الجميع الملاحظات ويستقبلونها بعدالة - متتبع التقدم: لوحة تحكم للمدرب تعرض نسبة إكمال الواجبات لكل مشارك، الحضور، ومؤشر تفاعل بسيط - إنشاء الشهادات: عند إكمال البرنامج، تُنشأ شهادة PDF تلقائيًا تتضمن اسم المشارك، اسم البرنامج، اسم المدرب، وتاريخ الإكمال التقنيات المستخدمة: React, Supabase, Stripe Connect لصرف مستحقات المدربين، وResend لتذكيرات الجلسات وتنبيهات الملاحظات. تصميم نظيف واحترافي — وتجربة استخدام متمحورة حول المدرب أولًا.

من نص البرومبت

ابنِ تطبيق ويب باسم "Alter" — أداة لإنشاء أفاتار رقمي مخصّص. الميزات الأساسية: - محدد النمط: 8 أنماط أفاتار تُعرض كبطاقات مرئية (صورة شخصية احترافية، أنمي، فن البكسل، لوحة زيتية، سايبربنك، رسم خطي مبسّط، شخصية مرسومة، ألوان مائية) - لوحة الإدخال: وصف نصي للشكل والانطباع المطلوبين (المزاج، الألوان، الشخصية) — بدون الحاجة إلى رفع صورة في MVP - التوليد: يستدعي fal.ai FLUX API باستخدام موجّه منظّم مبني على النمط المحدد والوصف — يولّد 4 نسخ متنوعة لكل طلب - التخصيص: محدد لون للخلفية كطبقة تراكب، مع خيار إضافة اسم مستخدم أو عبارة تعريفية عبر Canvas API - التنزيل: ملف PNG بمقاسات مربعة 400px و800px و1500px - السجل: حفظ آخر 12 حزمة تم توليدها في localStorage — اضغط على أي حزمة لعرضها وإعادة تنزيلها واجهة المستخدم: مشرقة، معبّرة، وممتعة. بطاقات مرئية كبيرة لاختيار النمط. تُعرض النتائج في شبكة 2x2. متجاوبة مع الجوال. التقنيات: React، وfal.ai API لتوليد الصور، وHTML Canvas لإضافة النصوص كطبقات، وlocalStorage لحفظ السجل.

من نص البرومبت

أنشئ تطبيق ويب باسم "First Impression" — أداة لتدقيق ملف التعارف الشخصي وتحسينه. الميزات الأساسية: - تدقيق الصور: يصف المستخدم صوره (حتى 6 صور) — يقيّم الذكاء الاصطناعي كل صورة حسب الحيوية، قابلية التواصل، المصداقية الاجتماعية، والتميّز. يعرض توصية بترتيب الصور من الأقوى إلى الأضعف، مع سبب مختصر من سطر واحد لكل صورة - إعادة كتابة النبذة الشخصية: يلصق المستخدم نبذته الحالية، ثم يضغط "Optimize"، ويتلقى 3 صيغ محسّنة بنبرات مختلفة (مرحة / عفوية / مباشرة). تتضمن كل صيغة عدد الكلمات وتصنيفًا متوقعًا لـ "احتمالية التمرير لليمين" (Low / Medium / High) - مولّد الرسائل الافتتاحية: يصف المستخدم ملف الطرف الآخر في بضع جمل — يولّد الذكاء الاصطناعي 5 رسائل افتتاحية مخصّصة ومرتّبة حسب معدل الرد المتوقع، مع شرح من سطر واحد لكل رسالة يوضح سبب فعاليتها - لوحة تقييم الملف: درجة مركبة من 0 إلى 100 تشمل جودة النبذة، قوة الصور، وفعالية الرسائل الافتتاحية — تتحدّث مباشرة أثناء الاستخدام - التصدير: ملف PDF منسّق يجمع كل المخرجات بعنوان "My Profile Package" التقنيات: React، و[LLM API] لكل استدعاءات الذكاء الاصطناعي، وjsPDF للتصدير. واجهة مصممة للجوال أولًا بتخطيط قائم على البطاقات — ألوان دافئة وإحساس عصري قريب من تطبيقات التعارف.

من نص البرومبت

ابنِ تطبيق ويب باسم "Mirror" — أداة توجيه شخصي مدعومة بالذكاء الاصطناعي، تمنح المستخدمين تغذية راجعة شخصية وواعية عاطفيًا. الميزات الأساسية: - التهيئة الأولى: يختار المستخدم مجاله (المسار المهني، اللياقة، العمل الإبداعي، العلاقات) ويحدد "أسلوب الدعم" المناسب له (صراحة داعمة / تشجيع دافئ / تحليل منطقي) - التسجيل اليومي: نموذج قصير يكتب فيه المستخدم ما أنجزه اليوم، وكيف كان شعوره، وشيئًا واحدًا يفتخر به - رد الذكاء الاصطناعي: يستدعي [LLM API] (claude-sonnet-4-20250514) مع موجّه نظام (system prompt) يوجّه Claude للرد كمدرّب لماح وواعٍ — يقدّر الجهد، يذكر نقاط قوة محددة، وينهي الرد برؤية واحدة للمضي قدمًا. لا يستخدم أبدًا عبارات عامة مثل "شغل ممتاز" أو "أحسنت" - أرشيف الإنجازات: تُحفظ كل التسجيلات اليومية السابقة وردود الذكاء الاصطناعي، مع إمكانية الفرز حسب التاريخ والبحث - متتبّع الاستمرارية: يظهر عدد أيام التسجيل اليومية المتتالية كعداد بسيط — بدون شارات أو عناصر لعب الواجهة: نظيفة ودافئة، بخطوط Serif، وخلفية كريمية (#F5F0E8). المفترض تعطي إحساس دفتر يوميات خاص، وليس تطبيقًا تقليديًا. لا توجد إشعارات إلا تذكير يومي لطيف في وقت يحدده المستخدم. التقنيات: واجهة React، واستخدام localStorage لحفظ البيانات، و[LLM API] لإنشاء ردود الذكاء الاصطناعي. تطبيق صفحة واحدة، ولا يحتاج إلى خادم خلفي.

من نص البرومبت

أنت مصمم منتجات خبير تعمل وفق معايير تصميم بمستوى Apple لعام 2026. مهمتك هي تحويل الفكرة المعطاة إلى نظام واجهات نظيف، احترافي، وجاهز للإنتاج. تجنّب الجماليات العامة التي تبدو مولّدة بالذكاء الاصطناعي. أعطِ الأولوية للوضوح، والهدوء البصري، والهرمية، والدقة. --- ### مبادئ التصميم (تُطبّق بصرامة) - الوضوح أهم من الزخرفة - مساحات بيضاء سخية تمنح الواجهة راحة وتنفسًا بصريًا - استخدام محدود للألوان: وظيفي لا استعراضي - هرمية طباعية قوية وواضحة، بسلم مقاسات منضبط بلا عشوائية - تفاعلات هادئة ومقصودة، بلا حيل أو مؤثرات مبالغ فيها - محاذاة واتساق على مستوى البكسل - كل عنصر في الواجهة يجب أن يكون لوجوده سبب واضح --- ### 1. سياق المنتج - ما هو المنتج؟ - من هو المستخدم؟ - ما الإجراء الأساسي المطلوب؟ --- ### 2. معمارية التخطيط - بنية الصفحة من الأعلى إلى الأسفل - نظام الشبكة: الأعمدة وإيقاع المسافات - هرمية الأقسام --- ### 3. نظام الخطوط والطباعة - نمط الخط، مثل خط محايد من فئة Sans-serif - سلم المقاسات من H1 إلى النص الأساسي إلى النص التوضيحي الصغير - استخدام الأوزان الطباعية --- ### 4. نظام الألوان - لوحة ألوان أساسية تبدأ بالمحايدات - استخدام اللون البارز بشكل محدود ومقصود - أدوار الألوان الوظيفية مثل النجاح، الخطأ، والتنبيه --- ### 5. نظام المكونات عرّف المكونات الأساسية: - الأزرار: أساسي، ثانوي - حقول الإدخال - البطاقات / الحاويات - التنقّل احرص على الاتساق وقابلية إعادة الاستخدام. --- ### 6. تصميم التفاعل - حالات Hover / Active بشكل خفيف وواضح - انتقالات سريعة، سلسة، وبسيطة - أنماط الاستجابة الراجعة: تحميل، نجاح، خطأ --- ### 7. المسافات والإيقاع البصري - سلم مسافات ثابت ومتسق - قواعد محاذاة واضحة - توازن بصري محسوب --- ### 8. هيكل المخرجات قدّم التالي: - نظرة عامة على الواجهة (UI Overview) من فقرة إلى فقرتين - تفصيل التخطيط (Layout Breakdown) - نظام الخطوط والطباعة (Typography System) - نظام الألوان (Color System) - تعريفات المكونات (Component Definitions) - ملاحظات التفاعل (Interaction Notes) - فلسفة التصميم (Design Philosophy): لماذا ينجح هذا التصميم

من نص البرومبت

أنت مهندس أنظمة تصميم تُجري تدقيقًا استقصائيًا لواجهة المستخدم. هدفك هو كشف عدم الاتساق، والتشتّت، وديون التصميم المخفية. كن محددًا. تجنّب الملاحظات العامة. --- ### 1. نظام الخطوط - اتساق تدرّج أحجام الخطوط - وضوح هرمية العناوين ### 2. المسافات والتخطيط - اتساق الهوامش والحشو الداخلي - إيقاع التخطيط مقابل العشوائية ### 3. نظام الألوان - اتساق الاستخدامات الدلالية للألوان - الألوان المكررة أو المتعارضة ### 4. اتساق المكونات - الأزرار: الأنواع والحالات - حقول الإدخال: الأنماط الموحّدة - البطاقات، النوافذ الحوارية، والتنقل ### 5. اتساق التفاعل - حالات التحويم بالمؤشر / التفعيل - توحيد السلوك بين العناصر ### 6. مؤشرات ديون التصميم - أنماط مخصصة لحالة واحدة - تجاوزات مباشرة داخل العناصر - انحراف بصري بين الصفحات --- ### صيغة المخرجات: **درجة الاتساق (1–10)** **أهم نقاط عدم الاتساق** **مخالفات نظام التصميم** **مؤشرات ديون التصميم** **خطة التوحيد والمعيارية** **خارطة طريق للإصلاح حسب الأولوية**

من نص البرومبت

أنت مصمم منتجات خبير ومهندس معماري للواجهات الأمامية. أنشئ مواصفة تسليم تصميم كاملة وجاهزة للتنفيذ، ومهيّأة لوكلاء البرمجة بالذكاء الاصطناعي ومطوّري الواجهات الأمامية. اكتب بأسلوب منظّم، دقيق، ومبني على فهم النظام ككل. --- ### 1. نظرة عامة على النظام - هدف واجهة المستخدم - مسار المستخدم الأساسي ### 2. بنية المكوّنات - شجرة المكوّنات كاملة - العلاقات بين المكوّنات الأم والفرعية - المكوّنات القابلة لإعادة الاستخدام ### 3. نظام التخطيط - الشبكة (عدد الأعمدة، ومقياس المسافات) - سلوك الاستجابة للشاشات (من الجوال إلى سطح المكتب) ### 4. رموز التصميم - نظام الألوان (الأدوار الدلالية) - مقياس الخطوط - نظام المسافات - استدارة الزوايا / الظلال والارتفاعات البصرية ### 5. تصميم التفاعل - حالات التحويم بالمؤشر / الحالات النشطة - الانتقالات (المدة، ومنحنى الحركة) - التفاعلات الدقيقة ### 6. منطق الحالات - التحميل - الحالة الفارغة - الخطأ - الحالات الحدّية أو غير المتوقعة ### 7. إمكانية الوصول - التباين - التنقل بلوحة المفاتيح - ARIA (إذا كان مناسبًا) ### 8. مطابقة الواجهة الأمامية - هيكلة مقترحة باستخدام React/Tailwind - تسمية المكوّنات - الخصائص (Props) والتنويعات (Variants) --- ### تنسيق المخرجات: **نظرة عامة** **شجرة المكوّنات** **رموز التصميم** **قواعد التفاعل** **التعامل مع الحالات** **ملاحظات إمكانية الوصول** **مطابقة الواجهة الأمامية** **ملاحظات التنفيذ**