Trae CLI للتصميم.

ماهية Trae CLI فعليًا

Trae CLI هو وكيل سطر الأوامر من مشروع trae-agent مفتوح المصدر التابع لـ ByteDance. يقرأ مستودعك، ويعرض الملفات وينشئها ويحرّرها، وينفّذ أوامر الصدفة في بيئة دائمة — مخطّطًا للعمل ومتحقّقًا منه انطلاقًا من مهام بلغة طبيعية بدلًا من إكمال الأسطر فحسب. وهو مرخّص بـ MIT ومبني حول معمارية شفّافة ومعيارية بحيث يَسهُل فحصه وتوسيعه. ويختلف عن Trae IDE المنفصل، وهو محرّر ByteDance المعتمد على VS Code، رغم أن كليهما من المورّد نفسه.

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

• وضعا التشغيل والتفاعل: ينفّذ Trae CLI مهمة واحدة عبر `trae-cli run "..."` أو يحتفظ بجلسة مستمرّة عبر `trae-cli interactive` — وهو الموضع الطبيعي للتكرار على واجهة بالاستناد إلى أعراف تصميمك.
• الأدوات المدمجة: يأتي مزوّدًا بأدوات لتحرير الملفات وتنفيذ bash/الصدفة والاستدلال المنظّم جاهزةً، فيستطيع البناء وتشغيل خادم تطوير وفحص أخطاء وقت التشغيل دون مغادرة الطرفية.
• أحضِر مزوّدك الخاص: تقدّم مفتاح API للمزوّد الذي تثق به — OpenAI أو Anthropic أو Google أو OpenRouter أو Doubao أو Azure، أو نموذج Ollama محلي — عبر متغيّرات البيئة أو ملف إعدادات.

• المُورّد: ByteDance (مشروع trae-agent مفتوح المصدر)
• بيانات الاعتماد: مفتاح API لمزوّد نموذج لغوي (BYOK) — مثل OpenAI أو Anthropic أو Google أو OpenRouter أو Doubao أو Azure، أو نموذج Ollama محلي
• الترخيص: MIT، مفتوح المصدر

لماذا يناسب التصميمَ وكيلٌ مفتوح وغير مرتبط بنموذج معيّن

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

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

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

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

إليك المسار الكامل من جهاز نظيف إلى Trae CLI قادر على بناء الواجهات والتحقّق منها. يُثبَّت Trae CLI من المصدر باستخدام uv، ثم يُهيَّأ بمزوّد النموذج اللغوي الذي تريد استخدامه.

# 1. Get Trae CLI (trae-agent) from source — needs uv
git clone https://github.com/bytedance/trae-agent.git
cd trae-agent
uv sync --all-extras
source .venv/bin/activate

# 2. Authenticate by pointing it at your LLM provider key
#    set it in the environment (or a trae_config.yaml file)
export OPENAI_API_KEY=...        # or ANTHROPIC_API_KEY, GOOGLE_API_KEY, etc.

# 3. Run a task in your project
trae-cli run "Create a hello world page"
#    or hold a session:
trae-cli interactive

# 4. Check the resolved configuration (keys are masked)
trae-cli show-config

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

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

أكثر حلقات التصميم تأثيرًا مع Trae CLI هي تحويل صورة مرجعية إلى واجهة عاملة ومتجاوبة والتكرار حتى تتطابق. وبما أن Trae CLI غير مرتبط بنموذج معيّن، وجّهه إلى مزوّد يتعامل نموذجه مع مراجعك تعاملًا جيدًا، واعتمد على متصفّح حقيقي للتحقّق من النتيجة.

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

شغّل جلسة تفاعلية وقدّم قيودًا ملموسة بدلًا من طلب من سطر واحد:

trae-cli interactive
# in the session:
> Implement the attached reference design in React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens.
  Match spacing, layout, and hierarchy; make it responsive.
  Run the dev server, render it in the browser, and iterate until it
  matches the references across breakpoints.

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

الإعدادات والأدوات والمزوّدون

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

• ملف الإعدادات: يقرأ Trae CLI ملف trae_config.yaml الذي يثبّت مزوّدك ونموذجك وإعداداتك — وهو الموطن المتين القابل للتحكّم بالإصدارات لكيفية تشغيل الوكيل في مشروع.
• اختيار المزوّد: بما أنه يدعم مزوّدين كثيرين (OpenAI وAnthropic وGoogle وOpenRouter وDoubao وAzure وOllama)، توجّه العمل التصميمي إلى النموذج الذي تثق به وتستبدله دون إعادة هيكلة سير عملك.
• الأدوات المدمجة: تتيح له أدواته لتحرير الملفات والصدفة والاستدلال المنظّم جمعَ السياق والبناءَ وتشغيل خادم تطوير وتنفيذ حلقة التحقّق دون مغادرة الطرفية.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2. 02 هل أحتاج إلى الدفع للتصميم باستخدام Trae CLI؟ +

   Trae CLI نفسه مجاني ومفتوح المصدر (MIT). أنت تحضر مفتاح مزوّد النموذج اللغوي الخاص بك، فتكلفتك الوحيدة هي ما يتقاضاه ذلك المزوّد — أو لا شيء إن شغّلت نموذجًا محليًا عبر Ollama. ولا يمرّر Open Design بيانات اعتمادك في كل الأحوال.

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

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

4. 04 Trae CLI أم Claude Code لتصميم الواجهات الأمامية؟ +

   كلاهما قادر. يُعرَف Claude Code بقراراته التصميمية المحدّدة والمدرِكة لقاعدة الشيفرة؛ أما ميزة Trae CLI فهي كونه مفتوح المصدر ومرنًا في اختيار المزوّد، فلا تتقيّد أبدًا بنموذج واحد. وتستخدم فِرق كثيرة كليهما — ويتيح لك Open Design تبديل الوكلاء دون تغيير سير عملك التصميمي.

5. 05 ما الذي يحتاجه Open Design لتشغيل Trae CLI؟ +

   يقود Open Design الملف التنفيذي trae-cli الخاص بـ Trae CLI عبر بروتوكول عميل الوكيل (ACP) ويستخدم مفتاح مزوّد النموذج اللغوي الذي هيّأته. تختار Trae CLI وكيلًا لك، وتوجّهه إلى مزوّد، ويوفّر Open Design السياق التصميمي المنسّق من حوله.

6. 06 هل Open Design تابع لـ ByteDance أو Trae؟ +

   لا. Trae CLI (trae-agent) منتج تابع لـ ByteDance؛ وOpen Design مشروع مستقل مفتوح المصدر يدعمه بوصفه مُحوّلًا أصيلًا. وTrae علامة تجارية لـ ByteDance.

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

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