Kilo Code للتصميم.

ماهية Kilo Code فعليًا

Kilo Code وكيل برمجة بالذكاء الاصطناعي مفتوح المصدر بناه Kilo Code, Inc. يعمل بوصفه امتدادًا لـ VS Code، وفي بيئات JetBrains، وبوصفه واجهة سطر أوامر — يقرأ مستودعك، ويحرّر الملفات، وينفّذ الأوامر، ويخطّط للعمل ويتحقّق منه انطلاقًا من مهام بلغة طبيعية بدلًا من إكمال الأسطر فحسب. وسمته المميِّزة أنه غير مرتبط بنموذج معيّن: تختار النموذج الذي يشغّله، وتحضر مفاتيح مزوّدك الخاصة.

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

• أوضاع الوكيل: يأتي Kilo بأوضاع متخصّصة — Architect للتخطيط، وCode للبناء، وDebug للإصلاح، وAsk للأسئلة — إلى جانب أوضاع مخصّصة، فيمكنك التخطيط لتصميم ثم تنفيذه في مراحل منفصلة مركّزة.
• القواعد المخصّصة + MCP: يقرأ قواعد مخصّصة على مستوى المشروع لسياق دائم، ويدعم خوادم MCP (مع سوق لـ MCP)، فيمكنك إضافة سياق خارجي مثل ملف Figma حيّ أو أدوات تصميم.
• أحضِر مفاتيحك الخاصة: Kilo بنظام BYOK عبر مزوّدين كثيرين — Anthropic وOpenAI وGoogle وOpenRouter وغيرها — أو يمكنك استخدام بوّابة Kilo الخاصة التي تتيح أكثر من 500 نموذج بتكلفة المزوّد.

• المُورّد: Kilo Code, Inc. (مفتوح المصدر)
• بيانات الاعتماد: مفتاح API لمزوّدك الخاص (BYOK — Anthropic وOpenAI وGoogle وOpenRouter وغيرها) أو بوّابة Kilo الخاصة
• الترخيص: مفتوح المصدر

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

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

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

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

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

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

# 1. Install the Kilo Code extension from the VS Code
#    (or JetBrains) marketplace, or install the CLI.

# 2. Open your project and sign in / add a provider key
cd your-project
kilo              # connect your provider (BYOK) or Kilo's gateway

# 3. Add project context
#    create custom rules for this project's design conventions

# 4. Wire the Figma MCP server (optional, for design handoff)
#    add it from the MCP marketplace / MCP settings

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

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

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

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

استخدم وضع Architect للتخطيط للبناء، ثم بدّل إلى وضع Code وأرفِق مراجعك بقيود ملموسة:

# Plan in Architect mode, then build in Code mode:
> Implement this design from @reference-desktop.png and
  @reference-mobile.png in React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens
  from the custom rules.
  Match spacing, layout, and hierarchy; make it responsive.
  Render it in the browser and iterate until it matches the
  references across breakpoints.

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

الأوضاع والقواعد المخصّصة وMCP

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

• الأوضاع (Architect ← Code): خطّط لبنية شاشة في وضع Architect، ثم نفّذها في وضع Code وأصلِح المشكلات في وضع Debug — فاصلًا القصد التصميمي عن التنفيذ. وتتيح لك الأوضاع المخصّصة تدوين مرحلة مراجعة تصميمية خاصة بك.
• القواعد المخصّصة: قواعد المشروع المخصّصة هي الموطن المتين لأعراف تصميمك — الرموز التصميمية والعناصر الأساسية وقوائم المراجعة — تُقرأ في كل تشغيل كي يعمل الوكيل وفق هويتك البصرية.
• خوادم MCP: يدعم Kilo خوادم MCP عبر سوقه — وهي الطريقة القابلة للنقل لإدخال السياق التصميمي والأدوات الخارجية، وأكثرها صلةً خادم Figma عبر MCP، التي تعمل عبر الوكلاء، لا مع Kilo فحسب.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   Kilo Code مفتوح المصدر ومجاني التثبيت. تحضر مفتاح API لمزوّدك الخاص (BYOK) وتدفع لذلك المزوّد مباشرةً، أو تستخدم بوّابة Kilo الخاصة بتكلفة المزوّد. ولا يمرّر Open Design بيانات اعتمادك في كل الأحوال.

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

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

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

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

5. 05 كيف أربط Kilo Code بـ Figma؟ +

   أضِف خادم Figma عبر MCP من سوق MCP في Kilo أو من إعدادات MCP. عندئذٍ يستطيع Kilo سحب سياق تصميمي حقيقي — المكوّنات والمتغيّرات وبيانات التخطيط — فتطابق الشيفرة المُولَّدة المصدرَ بدلًا من تقريبه.

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

   لا. Kilo Code منتج تابع لـ Kilo Code, Inc.؛ وOpen Design مشروع مستقل مفتوح المصدر يدعمه بوصفه مُحوّلًا أصيلًا. وكلاهما مفتوح المصدر مصادفةً، لكنهما مشروعان منفصلان.

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

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