الهدف
بعد هالدرس تقدر تكتب prompts محددة للـ UI (ألوان، components، responsive، accessibility) وتقسّم features معقدة لـ 5 prompts تسلسلية بدل prompt وحدة تفشل.
ليش هذا الحين؟
عندك الأدوات. المشكلة الحين: كيف تتكلم معها؟ الـ prompt الغامض = ناتج عشوائي. الـ prompt المحدد = ناتج احترافي. هالدرس يعطيك القواعد.
الفكرة
قانون الـ Prompting:
Vague prompt → vague output
Specific prompt → specific output
الـ AI ما يخمّن نيّتك — يطلع اللي تطلبه حرفيا.
لـ UI: 5 قواعد:
- Specific style: hex codes، border radius، font weight — مو "nice looking"
- Named components:
<PricingCard>مو "a card" - Exact colors:
#3B82F6مو "blue" - Responsive hints: "على mobile (< 640px) كذا، على desktop كذا"
- Accessibility: "semantic HTML، ARIA labels، focus rings"
لـ Logic: 5 steps:
- Schema: عدّل الـ database أولا
- UI: أضف الـ interface
- Logic: الـ business logic والـ sorting/filtering
- Tests: اكتب test cases
- Review: تأكد من الأمان والـ edge cases