learn.aiPRO
قتيبة محمد
learn.ai // قتيبة محمد

تعلّم كيف تستخدم الذكاء الاصطناعي بذكاء

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

claude-code — learn.ai session
BASHONLINE
$ claude-code "إصلاح مشكلة استعلامات N+1 في طلبات المستخدمين"
▶ قراءة سياق المشروع: prisma/schema.prisma
✔ تم التعرف على جدول Users و Orders
▶ تطبيق قاعدة الكود: استعلام تجميعي واحد (Batch Query)
✔ تم تعديل الملف: src/services/order.service.ts (+6 lines)
⚡ النتيجة: انخفض وقت التنفيذ من 240ms إلى 12ms فقط!
الفصل 01 // هندسة الأوامر

تعلّم هندسة الأوامر

اختر الركائز من القائمة على اليمين، وشاهد كيف يتعدل الطلب باللون الأخضر وينعكس رد الذكاء الاصطناعي في الشات فوراً.

عناصر صياغة الطلب

معالج خطوة بخطوة (تعديل حي)
الخطوة 1 من 4
1
الدورRole
2
السياقContext
3
المطلوبTask
4
صيغة الردFormat

1. الدور (Role): من هو المتحدث؟

تحديد الدور يمنح الذكاء الاصطناعي سياقاً واضحاً لتقديم كود يناسب تخصصك (فرونت إند أو باك إند) بدلاً من نصائح عامة:

هل أعجبك هذا الطلب المتكامل؟
بصفتك مطور واجهات أمامية مبتدئ (Junior Frontend Developer)، في مشروع ويب مبني بـ React و Tailwind CSS، أضف معالجة آمنة لحالات التحميل (Loading state) والخطأ مع try/catch ورسالة واضحة للمستخدم. أعطني شرحاً مبسطاً ومباشراً للمشكلة والحل في نقاط واضحة.
الفصل 02 // TOOLS

أدوات البرمجة بالذكاء الاصطناعي

هناك فرق بين أدوات تقترح عليك داخل المحرر، وأدوات وكيل (Agent) تقرأ المشروع كامل وتشغل أوامر الطرفية بنفسها.

Cursor

محرر ذكي متكامل

محرر كود مبني حول الذكاء الاصطناعي، يحلل مستودعك بالكامل ويطبق التعديلات عبر ملفات متعددة بضغطة زر.

التشغيل:Cmd + K // Composer

Claude Code

وكيل طرفية مستقل (CLI)

وكيل ذكي فائق القوة من سطر الأوامر؛ يقرأ شجرة الملفات، يشغل الاختبارات ويصلح الأخطاء ذاتياً في بيئتك.

التشغيل:claude-code

OpenAI Codex

وكيل سطر الأوامر

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

التشغيل:codex --solve

Gemini CLI

سياق ضخم لمشاريع جوجل

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

التشغيل:gemini run

Windsurf / Zed

محرر فائق السرعة

بيئات تطوير عصرية تركز على تدفق الـ AI مع سرعة استجابة فائقة وتفاعل سلس أثناء كتابة الدوال.

التشغيل:Inline Cascade

Replit Agent

بيئة سحابية فورية

محرر سحابي يبني مشاريع كاملة وقواعد بيانات ويطلقها مباشرة على الإنترنت بدون أي تثبيت محلي على جهازك.

التشغيل:Cloud Deploy
الفصل 03 // CONTEXT

المعلومات اللي بتعطيها للذكاء الاصطناعي عن مشروعك

الذكاء الاصطناعي يحتاج مستندات حقيقية عن مشروعك (PRD, Architecture, Database, APIs) حتى يكتب كوداً يطابق نظامك بدون تخمين أو هلوسة.

شجرة ملفات المشروع (Context Files)6 مستندات
docs/PRD.md
MARKDOWN
# PRD: Google One-Tap Authentication
Status: Approved | Version: 1.2

## 1. المشكلة
المستخدمون يواجهون نسبة ارتداد 40% عند ملء نموذج التسجيل اليدوي.

## 2. الهدف
توفير تسجيل دخول بضغطة واحدة باستخدام حساب Google وتخزين البيانات فوراً.

## 3. معايير القبول (Acceptance Criteria)
- [x] إظهار زر "تسجيل الدخول باستخدام Google".
- [x] التحقق من صحة JWT Token من خوادم Google.
- [x] إذا كان المستخدم جديداً: إنشاء حساب بخطة مجانية (Free Tier).
- [x] توليد Session Token وإعادة التوجيه للوحة التحكم.
أثر هذا الملف على أداء الذكاء الاصطناعي:

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

الفصل 04 // RULES

القواعد الثابتة (AI Rules)

القاعدة بتكتبها مرة واحدة في جذر المشروع (.cursorrules أو CLAUDE.md)، ويلتزم بها دائماً بدل ما تعيد التذكير في كل طلب.

.cursorrules
RULES CONFIG
# Global Cursor AI Directives
- Strict TypeScript: Never use 'any'. Always define strict types.
- Architecture: Keep controllers thin. Put all business logic in services.
- Destructive Actions: Never delete files or drop DB tables without explicit confirmation.
- Output: Return only changed lines (Diff) to preserve context.
الفصل 05 // SKILLS

المهارات الجاهزة (AI Skills)

فكّر فيها متل دورات تخصصية بتضيفها للذكاء الاصطناعي ليصير خبير أكثر بمجال معين. اضغط على أي مهارة لنسخ كود الـ SKILL.md الخاص بها فوراً.

نظام تصميم تجربة المستخدم ودعم العربية (Product UX & Arabic RTL)مفعلة

25 قاعدة تنفيذية مباشرة تحكم تصميم وبناء واجهات المستخدم والـ RTL واللغة العربية الفصيحة وتطهير الواجهات من حشو الذكاء الاصطناعي.

فحص الجودة (QA Testing)

يكتشف سيناريوهات الحواف (Edge Cases) ويكتب اختبارات Unit و E2E للتحقق من صمود التطبيق.

الحماية والأمان (Security Auditor)

يدقق الثغرات الأمنية الشائعة (OWASP Top 10)، ويفحص تشفير الجلسات وصلاحيات الوصول.

تحسين السرعة (Performance)

يلاقي الاستعلامات البطيئة ومشاكل N+1 في قاعدة البيانات ويقترح حلول التخزين المؤقت (Caching).

محركات البحث (SEO)

يصمم بنية العناوين، الـ Open Graph، والـ Structured Data (JSON-LD) لتصدر نتائج جوجل.

تصميم الواجهة (UI/UX)

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

مراجعة الكود (Code Review)

يراجع الكود قبل الدمج كمهندس خبير بفريقك للتأكد من نظافته ومطابقته لأفضل المعايير.

ملف المهارة المحدد: skills/product-ux/SKILL.mdينسخ مباشرة في مجلد skills/ بمشروعك
skills/product-ux/SKILL.md
SKILL SPEC
---
name: product-ux
description: Product UX Designer & Arabic Design System Architect
---
# CORE PRINCIPLE
Design less. Communicate clearly. Interact intentionally. Gamify purposefully.
Respect the user's cognitive load. Maintain system consistency.
Support Arabic RTL and English LTR correctly. Remove unnecessary content and UI.
Never add elements just to make the interface look richer.
The final product must feel simple, intentional, coherent, educational, and human-designed — not AI-generated.

## Executive Rules:
1. Product UX: Prioritize usability and task completion over decoration. Every element must have a purpose.
2. UX Research: Reduce cognitive effort and friction. Use progressive disclosure.
3. UX Writing: Use concise, human UX writing. Action-oriented labels. No generic AI filler.
4. Arabic Language: Correct Modern Standard Arabic, natural terms, consistent technical phrasing.
5. Arabic RTL: True RTL for layout, navigation, cards, directional icons, and transitions.
6. English LTR: Natural LTR flow without accidental RTL inheritance.
7. Bidirectional Content: Seamless mixed-direction handling (code, numbers, technical terms).
8. Localization: Adaptable containers supporting varying text lengths.
9. Design System Consistency: Reuse typography, tokens, colors, and motion patterns.
10. Simplicity: Prefer the simplest interface that solves the problem. Remove visual noise.
11. Gamification: Only when it improves learning, motivation, or retention.
12. Interactive Learning: Active learning over passive reading; do not complicate simple info.
13. Duolingo-Inspired Learning: Small steps, immediate feedback, clear next action.
14. Motion Design: Purposeful, predictable, and short animations only.
15. Feedback: Clear, immediate communication of action results and guidance.
16. Accessibility: WCAG contrast, touch targets >= 44px, keyboard navigation, semantic tags.
17. Responsive Design: Fluid adaptation across mobile, tablet, and desktop.
18. Component Intelligence: Match component pattern to content rather than forcing cards.
19. Component Reusability: Controlled variants and distinct states (hover, active, disabled, loading).
20. Visual Hierarchy: Unmistakable hierarchy of size, weight, and spacing.
21. AI Design Cleanup: Strip generic cards, decorative icons, fake stats, and artificial badges.
22. AI Content Cleanup: Eliminate AI clichés like "In today's digital world..." or "Let's explore...".
23. No Hallucinated Content: Never invent metrics, testimonials, or certifications.
24. Content–Design Relationship: Structure follows content intent and user decision.
25. Quality Gate: Rigorous 14-point audit before finalizing any component.
الفصل 06 // MCP

ربط الذكاء الاصطناعي بأدوات حقيقية (MCP)

بروتوكول سياق النموذج (Model Context Protocol) يتيح للوكيل فحص قواعد البيانات، وتصفح المتصفح، وقراءة تصاميم Figma بأمان.

figma-mcp-config.json
JSON
{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-figma"],
      "env": {
        "FIGMA_PERSONAL_ACCESS_TOKEN": "YOUR_FIGMA_TOKEN"
      }
    }
  }
}
متى تستخدم هذا الخادم؟

تحويل التصاميم من Figma إلى مكونات React/HTML دون الحاجة لنقل المقاسات والألوان يدوياً.

✔ قراءة ملفات التصميم✔ استخراج مكونات Figma✔ توليد كود CSS/Tailwind متطابق
الفصل 07 // WORKFLOW

مسارات العمل الشاملة (End-to-End Workflows)

كيف تجمع الركائز السابقة في خط إنتاج برمجي حقيقي من فكرة الميزة حتى خروجها للإنتاج.

المرحلة 01

كتابة وثيقة المتطلبات (PRD)

الدور: Product Manager AI

تحديد معايير القبول الصارمة وحالات الحواف قبل كتابة أي سطر كود.

المدخلات (Inputs):فكرة مجردة عن الميزة المطلوبة
المخرجات المعتمدة (Outputs):docs/PRD.md متضمن معايير القبول
الأدوات النشطة في هذه المرحلة:
Claude CodeCursor
القيمة الهندسية لهذه المرحلة:

يمنع تشتت الوكيل وبناء واجهات غير مطلوبة تجارياً.