Aider هو مبرمج زوجي بالذكاء الاصطناعي يعمل من سطر الأوامر. يقرأ الملفات التي تحدّدها، ويُنشئ تعديلات على شكل unified diffs، ويُطبّقها مباشرةً على قاعدة الكود. كل تغيير قابل للمراجعة قبل تطبيقه. يتناسب هذا السير القائم على diff-first مع التسليم الاحترافي المبني على رموز التصميم — يمكنك أن ترى بوضوح هل الكود المُولَّد يستخدم spacing.16 من ملف الرموز أم انحرف نحو قيمة مُضمَّنة 16px.

يغطّي هذا الدليل خط أنابيب Aider + figmascope الكامل: توليد الحزمة، وتحميلها في جلسة Aider، واستخدام وضع Architect للبنية الأولية، والتكرار بتعديلات مستهدفة.

المتطلبات الأساسية

ثبِّت Aider إن لم يكن مثبَّتاً:

pip install aider-chat
# or
brew install aider

يدعم Aider نماذج متعددة. تستخدم الأمثلة هنا Claude Sonnet عبر Anthropic API، لكن سير العمل مطابق مع OpenAI أو النماذج المحلية.

export ANTHROPIC_API_KEY=sk-ant-...
# or OPENAI_API_KEY for GPT-4o

الخطوة 1: توليد الحزمة

انتقل إلى figmascope.dev، الصق رابط ملف Figma الخاص بك، وانقر على تصدير سياق الوكيل. يعمل المُصدِّر في متصفحك — رمز وصولك الشخصي لـ Figma يبقى في الذاكرة ولا يغادر جهازك.

يُنزَّل الملف باسم context-bundle.zip.

الخطوة 2: فكّ الضغط في مشروعك

unzip ~/Downloads/context-bundle.zip -d ./design/

ls design/
# CONTEXT.md  _meta.json  components/  screens/  strings.json  tokens.json

الخطوة 3: تشغيل Aider مع ملفات الحزمة في النطاق

مرّر ملفات الحزمة التي تحتاجها عبر سطر الأوامر. يُحمِّلها Aider كسياق للقراءة — يمكن للنموذج الرجوع إليها لكنه لن يحرّرها ما لم تستخدم /add صراحةً لترقيتها إلى ملفات قابلة للتحرير.

aider \
  --read design/CONTEXT.md \
  --read design/tokens.json \
  --read design/strings.json \
  design/screens/home.json \
  src/screens/HomeScreen.kt

النمط: --read لملفات الحزمة (سياق فقط، غير قابل للتحرير)، والمعاملات الموضعية لملفات المصدر التي تريد أن يعدّلها Aider. هذا يُبقي الحزمة نظيفة — لن تحاول آلية diff في Aider تحرير tokens.json.

إذا أردت من Aider إنشاء ملف جديد بدلاً من تحرير ملف موجود، فما عليك إلا تسمية المسار الهدف الذي لا يوجد بعد. سيُنشئه Aider.

الخطوة 4: إضافة صور PNG المرجعية

يمكن لـ Aider تضمين الصور كسياق للنماذج متعددة الوسائط. استخدم أمر /add بعد التشغيل:

/add design/screens/home.png

الـ PNG هو عرض بمقياس 2× من Figma. مع نموذج متعدد الوسائط (Claude Sonnet، GPT-4o)، يُدرجه Aider كمرجع بصري. استخدمه للتحقق أثناء المراجعة — المرجع الأساسي هو JSON وليس الصورة.

الخطوة 5: وضع Architect — البنية الأولية

يستخدم أمر /architect في Aider نموذجاً من خطوتين: تمرير واحد للتخطيط وتمرير آخر للتنفيذ. هذه هي نقطة البداية الصحيحة لشاشة كاملة حيث تريد بنية متماسكة قبل تحرير القطع الفردية.

/architect Implement design/screens/home.json as a Jetpack Compose screen.

Context:
- Read CONTEXT.md for framework constraints and target conventions.
- All spacing, color, and radius values come from tokens.json.
  Map token keys directly: spacing.16 → 16.dp, color.7f5cfe → Color(0xFF7F5CFE).
- Use string keys from strings.json via stringResource() with the fallback field as the literal fallback.
- IR node kinds: stack(vertical)→Column, stack(horizontal)→Row, overlay→Box,
  absolute→Box+Modifier.offset, leaf(text)→Text, leaf(rect)→Box+Modifier.background.
- Do not hardcode any value that has a token equivalent.

Output to: src/screens/HomeScreen.kt

يُولِّد Aider خطةً أولاً، يعرضها عليك، ثم يُنتج الـ diff. راجع الخطة — إذا بدا ربط العقد خاطئاً، صحِّحه قبل أن تنطلق دورة التنفيذ.

الخطوة 6: تحرير ملفات محددة بمراجع الرموز

بعد وضع البنية الأساسية، استخدم تعديلات /edit المستهدفة لإصلاح مشكلات محددة. هنا يتألق سير عمل diff في Aider — كل تعديل هو تغيير صغير قابل للمراجعة لا إعادة توليد كاملة.

The card component in HomeScreen.kt uses hardcoded 12dp for corner radius.
Check tokens.json for the correct radius token and replace it.

يُنتج Aider diff صغيراً: سطر أو سطران يتغيران، لا شيء آخر. يمكنك رؤية ما الذي تحرّك بالضبط.

لمراجعة التباعد عبر الملف بالكامل:

Audit every .dp value in src/screens/HomeScreen.kt against the spacing tokens in design/tokens.json.
Produce a diff that replaces any hardcoded value with its token equivalent where one exists.
Leave a // TODO comment for any value that doesn't match a spacing token.

الخطوة 7: مراجعة الـ diffs مقابل المواصفات

عرض diff في Aider هو سطح المراجعة. قبل قبول أي تغيير، تحقق:

إذا بدا الـ diff خاطئاً، ارفضه بـ n في المحث وأخبر Aider بما يجب إصلاحه. تعني دورة الملاحظات القصيرة — محث، diff، قبول/رفض، تحسين — أنك تلتقط الانحراف فوراً لا بعد وصول كتلة كبيرة من الكود.

لماذا يتناسب سير عمل diff في Aider مع الحزمة

انحراف الرموز مرئي في الـ diffs. إذا قال سطر مُولَّد color = Color(0xFF7F5CFE) بدلاً من color = tokens.colorPrimary، ترى ذلك قبل الدمج. لا "افحصه لاحقاً" — تحدث المراجعة مضمَّنةً.

التحسين التدريجي رخيص. لا تُعيد توليد الشاشة بالكامل عند كل تغيير. كل محث متابع يُنتج diff مستهدفاً. توفر الحزمة السياق الثابت؛ يوفّر Aider التحرير الجراحي.

الحزمة مُتحكَّم بها مع الكود. عند تحديث التصميم، أعِد تصدير الحزمة من figmascope، قارنها مع النسخة السابقة، واطلب من Aider تطبيق العقد المتغيرة فقط. يتوسّع سير العمل عبر تكرارات تصميم متعددة دون إعادة تنفيذ كاملة.

أنماط شائعة وأخطاء يجب تجنّبها

لا تُضِف جميع الشاشات دفعة واحدة. مرّر JSON شاشة واحدة في كل مرة. السياق الأكثر لا يعني دائماً الأفضل — يؤدي Aider (والنموذج الأساسي) بشكل أفضل مع سياق مُركَّز مقارنةً بتفريغ كل شاشة في الملف.

استخدم --read للحزمة، لا المعاملات الموضعية. إذا مرّرت tokens.json كمعامل موضعي، قد يحاول Aider تحريره. استخدم --read لتحديده كسياق للقراءة فقط.

تحقق من _meta.json قبل المحث الأول. تسرد مصفوفة warnings الحشوات والتأثيرات التي لم يستطع المُصدِّر حلّها بالكامل. أخبر Aider عنها مسبقاً لئلا يُقدِّر بصمت:

cat design/_meta.json | python3 -c "import sys,json; w=json.load(sys.stdin).get('warnings',[]); print('\n'.join(w))"

أدرج أي تحذيرات في محث architect الخاص بك: "تخطَّ تعبئة hero-background — التدرج غير مدعوم. اترك تعليق TODO."

فضّل Aider للتعديلات الجراحية القابلة للمراجعة — واستخدم Cursor أو Claude Code حين تحتاج سياق جلسة كاملة عبر ملفات عديدة. تبدأ جميع سير العمل الثلاثة بنفس الطريقة: يتولّى تطبيق figmascope الرئيسي التصدير في متصفحك.