Hermes للتصميم.

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

Hermes وكيل ذكاء اصطناعي مستقل مفتوح المصدر (MIT) من Nous Research. يعمل باستمرار على جهازك أو خادمك الخاص، ويقرأ مستودعك، ويحرّر الملفات، وينفّذ أوامر الصدفة، ويبحث في الويب، و— وهو الأهمّ — يخطّط وينفّذ عملًا متعدّد الخطوات بنفسه، مفوّضًا أجزاء منه إلى وكلاء فرعيين معزولين. وهو وكيل مستقل، لا مساعد مقيّد ببيئة تطوير.

في العمل التصميمي، تبرز خاصيتان. فهو وكيل حقيقي بالفعل، فتسلّمه هدفًا فيخطّط ويبني ويتحقّق بدلًا من انتظار توجيه سطرًا بسطر. وهو غير مرتبط بمزوّد معيّن: تحضر مفتاحك الخاص، مع xAI Grok افتراضيًا لكن بإمكانك توجيهه إلى OpenAI أو Anthropic أو أي نقطة وصول أخرى مدعومة — فتتحكّم بالنموذج الذي يستدلّ عن تصميمك.

• المهارات: يبني Hermes المهارات ويعيد استخدامها — وهي ذاكرة إجرائية ينشئها من الخبرة — وهي الموضع الطبيعي لالتقاط أعراف تصميمك ورموزه التصميمية وقوائم المراجعة كي تبقى عبر التشغيلات.
• الوكلاء الفرعيون + الأدوات: يُطلِق وكلاء فرعيين معزولين لمسارات عمل متوازية، ويأتي بأدوات للملفات والصدفة والويب والمتصفّح، فيستطيع جمع المراجع وتشغيل حلقة بناء وتحقّق دون مغادرة الطرفية.
• أحضِر مفتاحك الخاص: يعتمد Hermes افتراضيًا على xAI Grok ويدعم OpenAI وAnthropic وOpenRouter ومزوّدين كثيرين آخرين عبر BYOK — اضبط مفتاحًا أو شغّل تدفّق OAuth واختر نموذجك.

• المُورّد: Nous Research
• بيانات الاعتماد: مفتاح مزوّد عبر BYOK — xAI (Grok، افتراضيًا) أو OpenAI أو Anthropic — يُضاف عبر hermes auth add
• الترخيص: MIT، مفتوح المصدر

لماذا يناسب التصميمَ وكيلٌ مستقل ومتعدّد المزوّدين

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

• تخطيط وتنفيذ مستقلّان: بما أن Hermes يخطّط وينفّذ ويفوّض بنفسه، يستطيع تلقّي هدف تصميمي — طابِق هذا المرجع، واجعله متجاوبًا — والتكرار نحوه بدلًا من الحاجة إلى تفصيل كل خطوة.
• أحضِر النموذج الذي تثق به: يعني عدم الارتباط بمزوّد معيّن مع BYOK أنك تختار نموذج الاستدلال للمهمّة: xAI Grok افتراضيًا، أو نماذج OpenAI وAnthropic حين تريد نقاط قوّتها — دون تقيّد بجماليات مورّد واحد.
• الأعراف في المهارات: توجّه المهارات (إلى جانب خادم MCP مثل Figma) الوكيلَ إلى رموزك التصميمية ومكوّناتك ومواصفاتك الحقيقية، فيعمل وفق هوية بصرية بدلًا من مظهر افتراضي.

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

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

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

# 1. Install Hermes (one-line installer from Nous Research)
curl -fsSL https://hermes-agent.nousresearch.com/install.sh | bash

# 2. Run the setup wizard
hermes setup

# 3. Add a provider and authenticate (BYOK)
#    default is xAI Grok; OpenAI / Anthropic also supported
hermes auth add        # add a provider key or run its OAuth flow
hermes model           # pick the provider and model (grok-4.3 by default)

# 4. Wire a Figma MCP server (optional, for design handoff)
#    configure it among Hermes' MCP / tool settings

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

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

أكثر حلقات التصميم تأثيرًا مع Hermes هي تحويل صورة مرجعية إلى واجهة عاملة ومتجاوبة والتكرار حتى تتطابق — بترك الوكيل المستقل يخطّط للبناء ويقارن مخرجاته بالمرجع.

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

وجّه Hermes إلى مراجعك وقدّم قيودًا ملموسة:

hermes
# in the prompt:
> Use reference-desktop.png and reference-mobile.png in this folder.
  Implement this design in React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens from my skill.
  Match spacing, layout, and hierarchy; make it responsive.
  Render it in the browser and iterate until it matches the references
  across breakpoints.

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

المهارات والوكلاء الفرعيون والمزوّدون

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

• المهارات: يبني Hermes المهارات ويعيد استخدامها — وهي ذاكرة إجرائية مُنشأة من الخبرة. وهي الموطن المتين لأعراف تصميمك، تُطبَّق في التشغيلات اللاحقة بدلًا من إعادة شرحها في كل مرة.
• الوكلاء الفرعيون وMCP: يفوّض العمل إلى وكلاء فرعيين معزولين ويدعم خوادم MCP — وهي الطريقة القابلة للنقل لإدخال السياق التصميمي والأدوات الخارجية، وأكثرها صلةً خادم Figma عبر MCP، التي تعمل عبر الوكلاء، لا مع Hermes فحسب.
• اختيار المزوّد: بما أن Hermes غير مرتبط بمزوّد معيّن (xAI Grok افتراضيًا، وOpenAI وAnthropic عبر BYOK)، يمكنك مطابقة النموذج للمهمّة دون إعادة بناء سير عملك.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2. 02 أي النماذج والمفاتيح يستخدمها Hermes؟ +

   Hermes غير مرتبط بمزوّد معيّن ويعتمد على إحضار مفتاحك الخاص. يعتمد افتراضيًا على xAI Grok (مثل grok-4.3) ويدعم أيضًا OpenAI وAnthropic وOpenRouter ومزوّدين كثيرين آخرين — تضيف مفتاح مزوّد (أو تشغّل تدفّق OAuth الخاص به) عبر hermes auth add وتختار نموذجًا عبر hermes model. ولا يمرّر Open Design بيانات اعتمادك أبدًا.

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

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

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

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

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

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

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

   لا. Hermes منتج تابع لـ Nous Research؛ وOpen Design مشروع مستقل مفتوح المصدر يدعمه بوصفه مُحوّلًا أصيلًا. وHermes وNous Research علامتان تجاريتان لمالكهما المعنيّ.

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

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