Pi للتصميم.

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

Pi وكيل برمجة بالذكاء الاصطناعي مفتوح المصدر (MIT) للطرفية، وهو جزء من مجموعة أدوات pi من earendil-works. يقرأ مستودعك، ويحرّر الملفات، وينفّذ أوامر الصدفة — مخطّطًا للعمل ومتحقّقًا منه انطلاقًا من مهام بلغة طبيعية بدلًا من إكمال الأسطر فحسب. وجوهره صغير عن قصد: أربع أدوات افتراضية — read وwrite وedit وbash — إلى جانب grep وfind وls المدمجة.

في العمل التصميمي، الخاصية البارزة أن Pi غير مرتبط بمزوّد معيّن. فهو يوحّد التعامل عبر Anthropic وOpenAI وGoogle ومزوّدين كثيرين آخرين خلف واجهة برمجية موحّدة، فتحضر مفاتيحك الخاصة وتختار النموذج لكل مهمّة — مثل نموذج قوي متعدّد الوسائط لقراءة لقطات الشاشة المرجعية — وتبدّل عبر /model أو Ctrl+L في منتصف الجلسة دون تغيير سير عملك.

• أي نموذج، ومفاتيحك الخاصة: يوجّه Pi إلى أكثر من 20 مزوّدًا بينها Anthropic وOpenAI. تصادِق بمفاتيح API الخاصة بك (BYOK)، أو تسجّل الدخول إلى اشتراك Claude Pro/Max أو ChatGPT Plus/Pro أو GitHub Copilot عبر /login.
• المهارات + الإضافات: يحمّل Pi المهارات (حِزَم قدرات بـ Markdown تتبع معيار Agent Skills) وإضافات TypeScript — وهي الموضع الطبيعي لتدوين أعراف تصميمك وإضافة أدوات مخصّصة.
• جلسات متفرّعة: تُخزَّن الجلسات بوصفها أشجار JSONL، فيمكنك تفريع استكشاف والتنقّل في السجلّ ضمن ملف واحد دون فقدان المراحل السابقة.

• المُورّد: earendil-works (مشروع مجتمعي مفتوح المصدر)
• بيانات الاعتماد: مفتاح API لمزوّدك الخاص (BYOK — Anthropic أو OpenAI أو Google، إلخ) أو تسجيل دخول باشتراك عبر /login؛ ويُخزَّن محليًا في ~/.pi/agent/auth.json (0600)
• الترخيص: MIT، مفتوح المصدر

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

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

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

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

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

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

# 1. Install the Pi coding agent CLI (Node)
npm install -g --ignore-scripts @earendil-works/pi-coding-agent

# 2. Authenticate with your own provider key (BYOK)
export ANTHROPIC_API_KEY=sk-ant-...   # or OPENAI_API_KEY=sk-...
#    (or run /login inside Pi for a Claude / ChatGPT / Copilot subscription)

# 3. Start it in your project
cd your-project
pi

# 4. Switch models any time with /model or Ctrl+L

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

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

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

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

امنح الوكيل المراجع وقيودًا ملموسة منذ البداية:

pi
# in the prompt:
> Implement reference-desktop.png and reference-mobile.png in
  React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens (see the Skill).
  Match spacing, layout, and hierarchy; make it responsive.
  Render it in the browser and iterate until it matches the references
  across breakpoints.

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

المهارات والإضافات والسمات

يوسّع Pi نفسه أثناء التشغيل عبر بضع طبقات، وهي تنطبق بسلاسة على سير عمل تصميمي مفتوح.

• المهارات: حِزَم قدرات بـ Markdown تتبع معيار Agent Skills — وهي الموطن المتين القابل للنقل لأعراف تصميمك ورموزه التصميمية وقوائم المراجعة. والمهارة نفسها تعمل عبر الوكلاء المتوافقين، لا مع Pi فحسب.
• الإضافات وقوالب المُوجّهات: تضيف إضافات TypeScript أدوات وأوامر وواجهات مخصّصة؛ وتُشغَّل قوالب المُوجّهات القابلة لإعادة الاستخدام عبر /name. ويتيح لك كلاهما برمجة حلقة التحقّق دون مغادرة الطرفية.
• MCP والسمات: يتّصل Pi بخوادم MCP لإدخال سياق تصميمي خارجي (وأكثرها صلةً خادم Figma عبر MCP)، وتُعاد السمات تحميلًا فوريًا كي تبقى واجهة الطرفية مقروءة أثناء عملك.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   Pi نفسه مجاني ومفتوح المصدر (MIT). لا تدفع إلا مقابل النموذج الأساسي — أحضِر مفتاح API لمزوّدك الخاص (BYOK)، أو استخدم اشتراك Claude Pro/Max أو ChatGPT Plus/Pro أو GitHub Copilot عبر /login. ولا يمرّر Open Design بيانات اعتمادك في كل الأحوال.

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

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

4. 04 أي نموذج ينبغي أن أستخدمه مع Pi لتصميم الواجهات الأمامية؟ +

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

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

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

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

   لا. Pi مشروع مستقل مفتوح المصدر من earendil-works؛ وOpen Design مشروع مستقل منفصل مفتوح المصدر يدعم Pi بوصفه مُحوّلًا أصيلًا.

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

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