Codex للتصميم.

ما هو OpenAI Codex فعلًا (وما ليس هو)

أولًا، توضيح يُربك كل من يبحث عن «Codex» تقريبًا. كان OpenAI Codex الأصلي نموذج إكمال شيفرة من 2021 شغّل النسخ المبكرة من GitHub Copilot وأُوقِف في 2023. ليس هذا موضوع الصفحة. أما Codex اليوم فهو أداة البرمجة الوكيلة من OpenAI — يخطّط ويكتب ويشغّل ويتحقق من الشيفرة انطلاقًا من مهام باللغة الطبيعية.

يأتي Codex الحديث عبر أربع واجهات: واجهة سطر أوامر طرفية (أُعيدت كتابتها بـ Rust، برخصة Apache-2.0)، وإضافة لبيئات التطوير VS Code وCursor وWindsurf، وتجربة سحابية/ويب للمهام غير المتزامنة المفوّضة، وتطبيق سطح مكتب بمتصفح داخلي وميزة Computer Use.

• النموذج الافتراضي: اعتبارًا من منتصف 2026، النموذج المُوصى به هو gpt-5.5، مع كون gpt-5.4 النموذج الذي درّبته OpenAI صراحةً للواجهة الأمامية واستخدام الحاسوب.
• ملف التعليمات: يقرأ Codex ملف AGENTS.md في مشروعك (معيار متعدد الأدوات) لقواعد المشروع — المكان الطبيعي لترميز أعراف التصميم لديك.
• البيئة المعزولة: يعمل في بيئة معزولة على مستوى النواة (وضع الكتابة في مساحة العمل افتراضيًا)، فلا يستطيع وكيل يحرّر واجهتك أن يتجوّل خارج المشروع.

• المزوِّد: OpenAI
• بيانات الاعتماد: مفتاح OpenAI API (مبدأ BYOK) أو اشتراك ChatGPT (Free / Go / Plus / Pro / Business / Enterprise)
• رخصة واجهة سطر الأوامر: Apache-2.0، مفتوحة المصدر

لماذا صار Codex جيدًا في التصميم الآن

تقاطعت ثلاثة أمور في أوائل 2026 لتجعل Codex أداة تصميم حقيقية لا مجرد مولّد شيفرة عام.

• نموذج مدرَّب للواجهة الأمامية: أطلقت OpenAI النموذج GPT-5.4، أول نموذج رئيسي لها مدرَّب للواجهة الأمامية واستخدام الحاسوب، بفهم أفضل بكثير للصور عبر سير عمل التصميم وتحقّق ذاتي أقوى. بل يمكنه توليد لوحات مزاج وخيارات بصرية قبل الالتزام بالأصول النهائية.
• skill رسمي للواجهة الأمامية: يقدّم كتالوج openai/skills مهارة frontend منسّقة تفرض ذوقًا حقيقيًا: تخطيطات بلا بطاقات، أبطال ممتدة الحواف، هرمية تقدّم العلامة، حركة مقيّدة، خطّان كحد أقصى ولون توكيد واحد — وتجعل Codex يكتب أطروحة بصرية قبل البناء.
• التحقق في المتصفح: مع مهارة Playwright يفتح Codex متصفحًا حقيقيًا، ويغيّر الحجم إلى نقاط التوقف، ويقارن مخرجاته بالمرجع بدلًا من مجرد التحقق من نجاح البناء.

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

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

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

# 1. Install the Codex CLI
npm install -g @openai/codex
# or: brew install --cask codex
# or: curl -fsSL https://chatgpt.com/codex/install.sh | sh

# 2. Authenticate (ChatGPT sign-in recommended for higher limits)
codex            # then choose “Sign in with ChatGPT”

# 3. Generate project context
codex            # inside your project, run /init to create AGENTS.md

# 4. Add the official frontend skill, then restart Codex
# (in the Codex app) $skill-installer frontend-skill

# 5. Wire the Figma MCP server (optional, for design handoff)
codex mcp add figma --url https://mcp.figma.com/mcp

• رمّز قواعد التصميم لديك: ضع tokens وعناصرك الأولية وأعرافك في AGENTS.md أو في DESIGN.md ووجّه Codex إليها، كي تطابق المخرجات هوية علامة بدلًا من العودة إلى مظهر عام.
• اختر مستوى الاستدلال الصحيح: تشير OpenAI إلى أن مستويات الاستدلال المنخفضة إلى المتوسطة كثيرًا ما تنتج نتائج واجهة أمامية أقوى من الإعداد الأعلى.

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

أعلى حلقات التصميم رافعةً مع Codex هي تحويل صورة مرجعية إلى واجهة عاملة ومتجاوبة والتكرار حتى تطابق. وتتلخّص إرشادات OpenAI نفسها في خمس خطوات.

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

غذِّ الصور بسحب لقطة شاشة إلى الطرفية أو عبر علامة الصورة، ثم أرسِل مطالبة بقيود ملموسة:

codex -i reference-desktop.png -i reference-mobile.png \
  "Implement this design in React + Vite + Tailwind + TypeScript.
   Reuse my existing design-system components and tokens.
   Match spacing, layout, and hierarchy; make it responsive.
   Use the Playwright skill to verify the UI matches the
   references and iterate until it does."

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

‏Codex + Figma: تكامل ثنائي الاتجاه بين التصميم والشيفرة

في فبراير 2026 أعلنت OpenAI وFigma شراكة رسمية، حوّلت نسخة Figma MCP التجريبية السابقة إلى تكامل متقدّم ثنائي الاتجاه. وهو يعمل في الاتجاهين.

• التصميم ← الشيفرة: انسخ «link to selection» لإطار في Figma، والصقه في Codex مع get_design_context، واطلب منه تنفيذ التصميم باستخدام مكتبة مكوّناتك الموجودة.
• الشيفرة ← التصميم: تحوّل أداة generate_figma_design («Code to Canvas») واجهةً حيّة قيد التشغيل عائدةً إلى إطارات Figma قابلة للتحرير — الشاشة كاملةً، أو عنصرًا محددًا، أو ملفًا كاملًا.

يعمل Figma MCP بصفته خادمًا بعيدًا ومُعفى من حدود المعدل. أضِفه مرة واحدة فيصبح متاحًا لـ Codex وClaude Code وCursor وVS Code والمزيد — وهو تمامًا نوع القدرة المحمولة متعددة الوكلاء التي بُني Open Design لتنسيقها.

‏Codex مقابل Cursor مقابل Claude Code للتصميم

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

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

المزالق، وكيف تتجنّب مظهر «فوضى الذكاء الاصطناعي»

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

• ثبّت frontend skill: skill جمالي منسّق يجبر Codex على الالتزام باتجاه حقيقي بدلًا من المظهر الافتراضي.
• فعّل تحقق Playwright: اجعل Codex يعرض ويتحقق ذاتيًا عبر نقاط التوقف كي لا تنكسر التخطيطات بصمت على الجوال.
• زوّده بالـ tokens والمراجع: tokens التصميم الحقيقية ولقطات الشاشة المرجعية هي أكبر رافعة منفردة على جودة المخرجات.
• رمّز القواعد في AGENTS.md: ضع قواعد بأسلوب «لا بطاقات بطل، خطّان كحد أقصى، هرمية تقدّم العلامة» حيث يقرؤها الوكيل في كل تشغيل.

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

التصميم بـ Codex داخل Open Design

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

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

وكيل Codex نفسه، المفتاح نفسه — إضافةً إلى سير عمل تصميمي حقيقي ومحمول ومفتوح المصدر يحيط به. إنه محلي أولًا وبرخصة Apache-2.0، فلا شيء عن عملك أو بيانات اعتمادك يغادر جهازك.

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

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

   نعم — مع frontend skill ونظام تصميم وصور مرجعية حقيقية في السياق، ينتج Codex (وخاصةً على GPT-5.4) واجهة بجودة إنتاجية ومتجاوبة ويمكنه التحقق منها في متصفح. وبدون ذلك السياق يميل إلى مظهر عام، وهي الفجوة التي يسدّها Open Design.

2. 02 هل هذه إضافة OpenAI Codex Product Design؟ +

   لا. Open Design مشروع مستقل مفتوح المصدر يدمج Codex بصفته وكيلًا. وهو يكمّل أدوات OpenAI الخاصة بمكتبة skills وأنظمة تصميم مفتوحة ومحلية أولًا.

3. 03 هل أحتاج إلى اشتراك ChatGPT للتصميم بـ Codex؟ +

   يمكنك استخدام مفتاح OpenAI API (مبدأ BYOK) أو اشتراك ChatGPT الخاص بك. وعادةً ما يمنح تسجيل الدخول عبر ChatGPT حدودًا أكثر سخاءً؛ ولا يمرّر Open Design بيانات اعتمادك في كلتا الحالتين.

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

   كلاهما قوي. يُعرَف Claude Code بقرارات تصميم محددة وواعية بقاعدة الشيفرة؛ ويتمتع Codex بصقل بصري قوي بعد GPT-5.4 ويتفوّق في عمليات البناء المفوّضة المعزولة. وتستخدم فرق كثيرة كليهما — ويتيح لك Open Design تبديل الوكلاء دون تغيير سير عمل التصميم.

5. 05 كيف أصل Codex بـ Figma؟ +

   أضِف خادم Figma MCP الرسمي (codex mcp add figma --url https://mcp.figma.com/mcp). عندها يمكنك تنفيذ إطارات Figma في شيفرة عبر get_design_context، ودفع واجهة قيد التشغيل عائدةً إلى إطارات Figma قابلة للتحرير عبر generate_figma_design.

6. 06 كيف أتجنّب جماليّة «فوضى الذكاء الاصطناعي» العامة؟ +

   ثبّت frontend skill، وزوّده بـ tokens تصميم حقيقية ولقطات شاشة مرجعية، ورمّز قواعد العلامة في AGENTS.md، وفعّل تحقق Playwright. ويقدّم Open Design هذه بصفتها مكتبة منسّقة كي تتخطّى الإعداد لكل مشروع.

7. 07 هل Open Design تابع لـ OpenAI؟ +

   لا. Codex منتج من OpenAI؛ وOpen Design مشروع مستقل مفتوح المصدر يدعمه بصفته محوّلًا أصيلًا. وOpenAI وCodex علامتان تجاريتان لـ OpenAI.

8. 08 هل ملفاتي وبيانات اعتمادي آمنة؟ +

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