Aider للتصميم.

ماهية Aider فعليًا

Aider أداة برمجة مرافِقة بالذكاء الاصطناعي مفتوحة المصدر (Apache-2.0) تعمل في طرفيّتك. تقرأ قاعدة شيفرتك القائمة، وترسم خريطة المستودع كاملًا للسياق، وتحرّر الملفات في مكانها، وتُودِع كل تغيير تلقائيًا برسالة مناسبة — فتستطيع مقارنة عمل الذكاء الاصطناعي وإدارته والتراجع عنه بأدوات git التي تستخدمها أصلًا. وتعمل مع أكثر من 100 لغة برمجة، وتبدأ مشاريع جديدة أو تبني على القائمة منها.

في العمل التصميمي، تبرز خاصيتان. فـ Aider غير مرتبط بنموذج معيّن: تحضر مفتاحك الخاص وتربطه بأي نموذج لغوي تقريبًا — Claude أو GPT-4o أو DeepSeek أو Gemini أو نموذج محلي — فلا تتقيّد أبدًا بمزوّد واحد. وعلى النماذج القادرة على الرؤية مثل GPT-4o وClaude، يستطيع قراءة ملفات الصور، فيحوّل لقطة الشاشة المرجعية إلى جزء من المُوجّه.

• ملف الأعراف: يقرأ Aider ملف CONVENTIONS.md الذي تحمّله عبر /read CONVENTIONS.md (أو aider --read CONVENTIONS.md) — وهو الموضع الطبيعي لتدوين أعراف تصميمك ورموزه التصميمية وقوائم المراجعة بوصفها سياقًا للقراءة فقط.
• تعديلات أصيلة في git: يُطبَّق كل تغيير على الملفات في مستودعك ويُودَع تلقائيًا، فيكون كل تكرار تصميمي قابلًا للمراجعة والتراجع بأدوات git المألوفة.
• أحضِر نموذجك الخاص: اربط OpenAI أو Anthropic أو DeepSeek أو Gemini أو نموذجًا محليًا بمفتاح API الخاص بك؛ فـ Aider غير مقيّد بمورّد واحد أو خلفية مستضافة.

• المُورّد: Aider (Aider-AI، مفتوح المصدر) — غير مرتبط بنموذج معيّن
• بيانات الاعتماد: مفتاح API لمزوّدك الخاص — BYOK (OpenAI أو Anthropic أو DeepSeek أو Gemini أو نموذج محلي)
• الترخيص: Apache-2.0، مفتوح المصدر

لماذا تناسب التصميمَ أداةٌ غير مرتبطة بنموذج معيّن وأصيلة في git

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

• غير مرتبط بنموذج معيّن، BYOK: اختر النموذج الأفضل تصميمًا لمهمّتك وميزانيتك — Claude أو GPT-4o أو DeepSeek أو Gemini — وبدّل بحرية دون تغيير سير عملك، كلّه بمفتاحك الخاص.
• تكرار أصيل في git: تجعل الإيداعات التلقائية كل مرحلة تصميمية فرقًا قابلًا للمراجعة يمكنك التراجع عنه، فتكرّر العمل على أساس نظيف بدلًا من كومة تعديلات غير متتبَّعة.
• الأعراف في ملف CONVENTIONS.md: يوجّه ملف CONVENTIONS.md (المحمّل للقراءة فقط) الوكيلَ إلى رموزك التصميمية ومكوّناتك وقواعدك، فيعمل وفق هوية بصرية بدلًا من مظهر افتراضي.

الدرس نفسه الذي يعلّمه كل وكيل: لا يمتلك Aider ذوقًا افتراضيًا. فهو ينتج تصميمًا جيدًا حين تمدّه بالقيود — نظام تصميم ومهارة جمالية ومراجع ملموسة. ويحزم Open Design هذه المدخلات بالضبط، ولهذا يتلاءم الاثنان معًا (المزيد أدناه).

إعداد Aider للعمل التصميمي، من الصفر

إليك المسار الكامل من جهاز نظيف إلى Aider قادر على بناء الواجهات والتحقّق منها.

# 1. Install Aider (recommended installer; Python 3.8–3.13)
python -m pip install aider-install
aider-install
# or with pipx: pipx install aider-chat

# 2. Start it in your git project and bring your own key
cd your-project
aider --model sonnet --api-key anthropic=<your-key>
# or: aider --api-key openai=<your-key>   (also deepseek=, gemini=)

# 3. Load your design conventions as read-only context
aider --read CONVENTIONS.md

# 4. Add a reference image (on a vision-capable model)
#    inside the chat: /add reference-desktop.png

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

سير عمل التحويل من لقطة الشاشة إلى الواجهة

أكثر حلقات التصميم تأثيرًا مع Aider هي تحويل صورة مرجعية إلى واجهة عاملة ومتجاوبة والتكرار حتى تتطابق — باستخدام نموذج قادر على الرؤية لمقارنة المخرجات بالمرجع، مع إيداع كل مرحلة في git.

1. ابدأ من أوضح المراجع البصرية لديك — وأدرِج حالات متعدّدة (سطح المكتب والجوال، والتمرير فوق العنصر، والحالة الفارغة، وحالة التحميل)، لا لقطة رئيسية واحدة فحسب.
2. كن محدّدًا في المُوجّه؛ فالمُوجّهات الغامضة تنتج واجهات عامة حتى مع نموذج قوي.
3. احتفظ بنظام تصميمك وأعرافك في CONVENTIONS.md، وأخبِر Aider بمواضع الرموز التصميمية والعناصر الأساسية المرجعية.
4. شغّل خادم تطوير وافحص النتيجة المعروضة في متصفّح حقيقي، مع تغيير الحجم إلى نقاط التوقّف.
5. كرّر العمل بأن تجعل Aider يقارن تنفيذه بلقطات الشاشة — لا أن يكتفي بالتأكّد من نجاح البناء.

أضِف صورة عبر /add (أو /paste من الحافظة) على نموذج قادر على الرؤية، ثم قدّم قيودًا ملموسة:

aider --model gpt-4o --read CONVENTIONS.md
# in the chat:
> /add reference-desktop.png
> /add reference-mobile.png
> Implement this design in React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens from CONVENTIONS.md.
  Match spacing, layout, and hierarchy; make it responsive.
  I'll render it in the browser and tell you what to fix until it matches
  the references across breakpoints.

أبقِ المُوجّهات صغيرة ومركّزة. ولأن Aider يُودِع كل تغيير، تحتفظ بالتكرارات الجيدة وتستخدم git (أو /undo) للتراجع عن السيّئة — فتبني كل مرحلة على أساس نظيف.

ملف CONVENTIONS.md والصور والأوامر

ثلاث قدرات تجعل Aider عمليًا للعمل التصميمي المستمر، وتنطبق الثلاث جميعها بسلاسة على سير عمل تصميمي مفتوح.

• سياق CONVENTIONS.md: حمّل أعراف البرمجة والتصميم عبر /read CONVENTIONS.md أو aider --read CONVENTIONS.md، أو اضبط read: CONVENTIONS.md في .aider.conf.yml لتحميله في كل تشغيل. وهو الموطن المتين لرموزك التصميمية وعناصرك الأساسية وقواعدك.
• الصور وصفحات الويب: على النماذج القادرة على الرؤية، استخدم /add لإضافة ملف صورة أو /paste من الحافظة لتمنح Aider مرجعًا حقيقيًا؛ ويسحب /web <url> نص الصفحة إلى المحادثة لسياق إضافي.
• الأوامر داخل المحادثة: تتيح له أوامر مثل /add لإدخال الملفات إلى السياق و/read للمراجع المخصّصة للقراءة فقط و/undo للتراجع عن آخر إيداع، جمعَ المراجع وتنفيذ حلقة التحقّق دون مغادرة الطرفية.

هذه قدرات قابلة للنقل وأصيلة في المستودع — وهي بالضبط ما بُني Open Design لتنسيقه، بدلًا من إعادة إنشائه لكل مشروع.

Aider مقابل Codex وClaude Code وCursor وGemini CLI في التصميم

لا يوجد فائز واحد في العمل التصميمي — فلكل وكيل نقطة قوة مختلفة، والفِرق المتمرّسة تجمع بينها. وفيما يلي ملخّص منصف:

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

العثرات وكيفية تجنّب مظهر «ركاكة الذكاء الاصطناعي»

أكثر الشكاوى شيوعًا بشأن التصميم المُولَّد بالذكاء الاصطناعي أنه يبدو عامًا — تدرّجات لونية ناعمة، ولوحات طافية، وزوايا دائرية مفرطة الحجم، وظلال مبالَغ فيها، وطابع «خط Inter واللون الأرجواني» الذي «يصرخ بأن ذكاءً اصطناعيًا صنع هذا». ومن المشكلات المُبلَّغ عنها أيضًا تكسّر تخطيطات الجوال وتسرّب التعليمات إلى نصوص الواجهة. ولا يقتصر أيٌّ من هذا على Aider؛ بل هو ما يحدث حين يعمل أي وكيل دون سياق تصميمي منسّق.

• أضِف مهارة جمالية: تُلزِم المهارة التصميمية المنسّقة الوكيلَ بالالتزام باتجاه حقيقي بدلًا من المظهر الافتراضي.
• تحقّق في متصفّح حقيقي: اعرض وتحقّق ذاتيًا عبر نقاط التوقّف كي لا تتكسّر التخطيطات بصمت على الجوال — وعلى نموذج قادر على الرؤية، أعِد إدخال لقطات الشاشة.
• وفّر الرموز التصميمية والمراجع: تمثّل الرموز التصميمية الحقيقية ولقطات الشاشة المرجعية أكبر عامل مؤثّر منفرد في جودة المخرجات.
• دوّن القواعد في CONVENTIONS.md: ضع قواعد من نوع «لا بطاقات رئيسية، وخطّان كحدّ أقصى، وتراتبية تُقدّم الهوية البصرية» حيث يقرؤها الوكيل في كل تشغيل.

لاحظ أن كل إجراء تخفيفي يدور حول منح الوكيل سياقًا تصميميًا منسّقًا. والحفاظ على هذا السياق يدويًا، ولكل مشروع، هو العناء الذي يزيله Open Design.

التصميم باستخدام Aider داخل Open Design

Open Design هو طبقة التصميم مفتوحة المصدر التي يطلبها سير العمل أعلاه باستمرار. فهو يتعامل مع Aider بوصفه مُحوّلًا أصيلًا ويغلّفه بمكتبة منسّقة من المهارات وأنظمة التصميم، وخط معالجة عرض منظّم، وواجهة سطح مكتب محلية — بحيث يكون السياق التصميمي الذي يجعل Aider جيدًا حاضرًا منذ التشغيل الأول، لا مُجمَّعًا يدويًا في كل مرة. وكلاهما مفتوح المصدر ويعمل محليًا أولًا، ما يجعل اقترانهما ملائمًا بطبيعته.

1. ثبّت Open Design واختر Aider وكيلًا لك.
2. صادِق بمفتاح API لمزوّدك الخاص (BYOK) — OpenAI أو Anthropic أو DeepSeek أو Gemini؛ وتبقى بيانات الاعتماد على جهازك ولا تُمرَّر عبرنا أبدًا.
3. اختر نظام تصميم ومهارة، ثم أنشئ العروض التقديمية والنماذج الأولية وصفحات الهبوط بذوق متّسق.
4. كل ناتج وملف DESIGN.md يبقى في مستودع git الخاص بك، لا في سحابة مستضافة.

وكيل Aider نفسه، والمفتاح نفسه — مع سير عمل تصميمي حقيقي وقابل للنقل ومفتوح المصدر من حوله. وهو يعمل محليًا أولًا ومفتوح المصدر، فلا يغادر جهازك أيُّ شيء من عملك أو بيانات اعتمادك.

الأسئلة الشائعة

1. 01 هل يستطيع Aider فعلًا أداء العمل التصميمي؟ +

   نعم — فمع مهارة جمالية ونظام تصميم وصور مرجعية حقيقية في السياق، ينتج Aider واجهات متجاوبة بجودة الإنتاج، وعلى النماذج القادرة على الرؤية يقرأ لقطات الشاشة للتحقّق من المخرجات مقابل المراجع. ودون ذلك السياق يميل إلى اللجوء افتراضيًا إلى مظهر عام، وهي الفجوة التي يسدّها Open Design.

2. 02 أي النماذج يمكنني استخدامها مع Aider للتصميم؟ +

   Aider غير مرتبط بنموذج معيّن. تحضر مفتاح API الخاص بك وتربط أي نموذج لغوي تقريبًا — Claude أو GPT-4o أو DeepSeek أو Gemini أو نموذجًا محليًا. وللعمل التصميمي المعتمد على الصور، استخدم نموذجًا قادرًا على الرؤية مثل GPT-4o أو Claude. ولا يمرّر Open Design بيانات اعتمادك أبدًا.

3. 03 ما الذي يجعل Aider جيدًا للتصميم تحديدًا؟ +

   أمران: أنه غير مرتبط بنموذج معيّن، فتختار النموذج الأفضل تصميمًا لمهمّتك، وأنه أصيل في git، إذ يُودِع كل تغيير بحيث يكون كل تكرار تصميمي قابلًا للمراجعة والتراجع. وكلاهما يساعد — لكن الذوق يبقى نابعًا من نظام التصميم والمهارة والمراجع التي توفّرها.

4. 04 هل يحرّر Aider ملفّاتي ويُودِع في git؟ +

   نعم. يحرّر Aider الملفات مباشرةً في مستودعك ويُودِع كل تغيير تلقائيًا برسالة مناسبة، فتستطيع مقارنة عمل الذكاء الاصطناعي وإدارته والتراجع عنه بأدوات git التي تستخدمها أصلًا.

5. 05 كيف أمنح Aider أعراف تصميمي؟ +

   أنشئ ملف CONVENTIONS.md يضمّ رموزك التصميمية وعناصرك الأساسية وقواعدك، ثم حمّله للقراءة فقط عبر /read CONVENTIONS.md أو aider --read CONVENTIONS.md (أو اضبط read: CONVENTIONS.md في .aider.conf.yml لتحميله في كل تشغيل). عندئذٍ يعمل Aider وفق هويتك البصرية بدلًا من مظهر افتراضي.

6. 06 هل Open Design تابع لـ Aider؟ +

   لا. Aider مشروع مستقل مفتوح المصدر (Aider-AI)؛ وOpen Design مشروع مستقل منفصل مفتوح المصدر يدعم Aider بوصفه مُحوّلًا أصيلًا. والاثنان غير مرتبطين.

7. 07 هل ملفّاتي وبيانات اعتمادي آمنة؟ +

   نعم — فـ Open Design يعمل محليًا أولًا ومفتوح المصدر. تبقى ملفّاتك ونواتجك وملف DESIGN.md في مستودع git الخاص بك، وتُستخدَم مفاتيح API لمزوّدك مباشرةً من قِبل وكيلك، ولا تُمرَّر عبر خوادم Open Design أبدًا.