Cursor للمصممين.

ما هو Cursor فعلًا

‏Cursor هو محرّر شيفرة يضع الذكاء الاصطناعي أولًا، بناه Anysphere. وهو نسخة معدّلة من VS Code، فيحتفظ بالمحرّر والإضافات واختصارات المفاتيح المألوفة، لكنه يعيد بناء سير العمل حول وكيل ذكاء اصطناعي يقرأ مشروعك كاملًا، ويحرّر ملفات متعددة، ويشغّل الأوامر، ويكرّر معك ضمن الحلقة.

في عمل التصميم، الواجهات المهمة هي وضع الوكيل (تصف نتيجة فيخطّط Cursor ويحرّر عبر الملفات)، والتحريرات المضمّنة وإكمالات Tab للتعديلات السريعة، ومعاينة/متصفح داخل المحرّر يتيحان رؤية الواجهة قيد التشغيل دون مغادرة النافذة، ودعم MCP الذي يسمح له بجلب سياق خارجي كملف Figma حيّ.

• قواعد المشروع: يقرأ Cursor ملفات تعليمات المشروع — قواعد `.mdc` المُدارة بإصدارات تحت `.cursor/rules`، وملف `AGENTS.md` بسيط — كي ترمّز أعراف التصميم لديك حيث يقرؤها الوكيل في كل تشغيل.
• النماذج: ‏Cursor مرن في النماذج: يأتي بنماذج متقدّمة عبر اشتراكك ويدعم أيضًا إحضار مفاتيح نماذجك الخاصة، فتختار المحرّك خلف سير عمل المحرّر نفسه.
• MCP: يتحدّث بروتوكول Model Context Protocol، فتصبح الخوادم الخارجية — وأبرزها خادم Figma MCP — سياقًا أصيلًا للوكيل.

• المزوِّد: Anysphere
• بيانات الاعتماد: حساب / اشتراك Cursor (Hobby / Pro / Business) أو مفاتيح نماذجك الخاصة (مبدأ BYOK)
• الصيغة: محرّر شيفرة يضع الذكاء الاصطناعي أولًا (نسخة معدّلة من VS Code) مع وكيل ومعاينة داخل المحرّر

لماذا يجيد Cursor التصميم

ميزة Cursor في التصميم ليست ميزة واحدة — بل إحكام حلقة البناء-والمشاهدة. ثلاثة أمور تجعله يبدو أداة تصميم لا مجرد مولّد شيفرة عام.

• حلقة محكمة بالتكرار-والمراقبة: تطالب فيحرّر Cursor عبر الملفات، وتعرض المعاينة داخل المحرّر النتيجة فورًا — فتضبط المسافات والهرمية والحركة في ثوانٍ بدلًا من التنقّل عبر طرفية ومتصفح منفصلين.
• تحرير بصري مباشر: إلى جانب المحادثة، يتيح لك Cursor تحديد عناصر في المعاينة وتعديل الأنماط، فتبدو التصحيحات البصرية الصغيرة كتحريرات تصميم لا كتنقيب في الشيفرة.
• قواعد المشروع وسياق MCP: مع `.cursor/rules` (أو `AGENTS.md`) وخادم Figma MCP، يعمل الوكيل مقابل tokens ومكوّناتك ومواصفات التصميم الحقيقية بدلًا من التخمين.

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

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

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

1. ثبّت Cursor من cursor.com وسجّل الدخول بحساب Cursor، أو هيّئ مفاتيح نماذجك الخاصة (مبدأ BYOK) في الإعدادات.
2. افتح مشروعك واختر نموذجًا في لوحة المحادثة / الوكيل.
3. أضف قواعد المشروع: أنشئ `.cursor/rules/*.mdc` لأعراف منظّمة محدّدة النطاق بالأنماط، أو ملف `AGENTS.md` بسيط لتعليمات بسيطة وقابلة للقراءة.
4. اربط خادم Figma MCP (اختياري) كي يقرأ الوكيل سياق التصميم الحيّ.
5. شغّل خادم التطوير واستخدم المعاينة داخل المحرّر لرؤية الواجهة والتحقق منها أثناء التكرار.

ملف قواعد مشروع بسيط يجعل الوكيل يصمّم لهوية علامة بدلًا من العودة إلى مظهر عام. ضعه حيث يقرؤه Cursor في كل تشغيل:

# .cursor/rules/design.mdc
---
description: Project design conventions
alwaysApply: true
---

- Reuse existing design-system tokens and components; never hardcode hex or spacing.
- At most two typefaces and one accent color.
- Brand-first hierarchy; restrained motion. No hero cards, no oversized rounded corners.
- Build responsive by default; verify desktop and mobile in the preview before finishing.

• رمّز قواعد التصميم لديك: ضع tokens وعناصرك الأولية وأعرافك في `.cursor/rules` أو `AGENTS.md` ووجّه Cursor إليها، كي تطابق المخرجات هوية علامة بدلًا من العودة إلى مظهر عام.
• أبقِ المطالبات صغيرة: حلقة Cursor المحكمة تكافئ الطلبات المركّزة — كرّر مكوّنًا أو حالة واحدة في كل مرة وراقب المعاينة بين التمريرات.

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

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

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

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

Implement this design in React + Vite + Tailwind + TypeScript.
Reuse my existing design-system components and tokens.
Match spacing, layout, and hierarchy; make it responsive.
Keep the preview open — verify desktop and mobile match the
references and iterate until they do.

ثبّت التكرارات الجيدة وأرجِع السيئة (مع إخبار Cursor حين تُرجِع) كي تبني كل تمريرة على قاعدة نظيفة — الانضباط نفسه الذي يمنع أي حلقة وكيل من الانحراف.

‏Cursor + Figma: التصميم ↔ الشيفرة عبر MCP

يتصل Cursor بـ Figma عبر خادم Figma MCP الرسمي، الذي يمنح الوكيل وصولًا منظّمًا إلى ملف Figma حيّ بدلًا من لقطة شاشة مسطّحة. وهذا يزيل التخمين من التسليم.

• التصميم ← الشيفرة: انسخ رابط إطار في Figma، والصقه في Cursor، واطلب منه تنفيذ التصميم. يعرض خادم MCP سياق التصميم الحقيقي — مكوّنات، متغيرات، بيانات تخطيط، tokens — كي تطابق الشيفرة المولَّدة المصدر بدلًا من مقاربته.
• ابقَ متوائمًا: مع استخدام tokens التصميم والأنماط والمكوّنات باتّساق في Figma (وCode Connect حيث يتوفّر)، تبقى مخرجات Cursor مرتبطة بنظام تصميمك الحقيقي بدلًا من إعادة ابتكار العناصر الأولية.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2. 02 هل هذا منتج Cursor رسمي؟ +

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

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

   يمكنك استخدام حساب / اشتراك Cursor أو إحضار مفاتيح نماذجك الخاصة (مبدأ BYOK). ولا يمرّر Open Design بيانات اعتمادك في كلتا الحالتين — فهي تُستخدَم مباشرةً بواسطة وكيلك.

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

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

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

   أضِف خادم Figma MCP الرسمي في Cursor، ثم الصق رابط إطار Figma في المحادثة واطلب من Cursor تنفيذه. يعرض الخادم مكوّنات ومتغيرات وبيانات تخطيط حقيقية كي تطابق الشيفرة المولَّدة تصميم المصدر.

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

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

7. 07 هل Open Design تابع لـ Cursor أو Anysphere؟ +

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

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

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