يمكن لذكاء Cursor الاصطناعي كتابة الكثير من كود واجهة المستخدم. ما لا يمكنه فعله هو قراءة ملف Figma الخاص بك. تلصق لقطة شاشة فيخمّن — مسافات خاطئة، قيم ألوان خاطئة، أسماء مكونات مخترعة. المشكلة ليست في النموذج. بل في السياق المنظم المفقود.

figmascope يسدّ هذه الفجوة. يُصدر ملف Figma كحزمة مضغوطة — tokens تصميم، وأشجار تخطيط لكل شاشة، وعروض مرجعية، ومخزون مكونات، ونصوص واجهة المستخدم — كل ما يحتاجه نموذج اللغة لتوليد كود دقيق بدلاً من كود يبدو مقبولاً. يعمل التطبيق الرئيسي بالكامل في متصفحك دون خادم خلفي أو رفع ملفات.

تستعرض هذه الصفحة سير العمل الكامل من رابط Figma إلى توليد كود في Cursor. إذا كنت تستخدم Claude Code بدلاً من Cursor، راجع Figma إلى Claude Code لسير العمل الخاص بـ Claude. للاطلاع على نظرة أشمل على ما يجعل التسليم جاهزاً للوكيل، راجع تسليم تصميم AI.

محتويات حزمة السياق

عند تشغيل figmascope على ملف Figma، تحصل على ملف .zip يحتوي على:

لا شيء يُرفع. رمز الوصول الشخصي PAT يعيش في ذاكرة المتصفح فقط ويُرسل فقط إلى api.figma.com. يُجمَّع الملف المضغوط من جانب العميل ويُسلَّم لتنزيل المتصفح.

الخطوة 1 — الحصول على رمز وصول شخصي PAT لـ Figma

انتقل إلى Figma → إعدادات الحساب → رموز الوصول الشخصية وأنشئ رمزاً بصلاحية محتوى الملف: للقراءة فقط. هذا الحد الأدنى المطلوب.

الرمز لا يغادر جلسة المتصفح أبداً؛ يرسله figmascope في ترويسة X-Figma-Token في الطلبات إلى api.figma.com وليس في أي مكان آخر. راجع أمان PAT وfigmascope لنموذج التهديد الكامل.

الخطوة 2 — تصدير حزمة السياق

  1. افتح figmascope.dev في متصفحك.
  2. الصق رابط ملف Figma (مثل https://www.figma.com/file/ABC123/MyDesign).
  3. الصق رمز الوصول الشخصي.
  4. انقر على Export Context Bundle.
  5. يُنزَّل figmascope-<fileKey>.zip إلى جهازك.

افك ضغطه في مشروعك. موقع مناسب هو مجلد design/ في جذر المستودع:

unzip figmascope-ABC123.zip -d design/
# → design/CONTEXT.md
# → design/tokens.json
# → design/screens/Home.json
# → design/screens/Home.png
# → design/components/inventory.json
# → design/strings.json
# → design/_meta.json

الخطوة 3 — فتح المشروع في Cursor

افتح مجلد مشروعك في Cursor كالمعتاد. مجلد design/ هو الآن جزء من مساحة العمل وسيشمله مفهرس Cursor.

قبل مطالبة النموذج، اقرأ design/CONTEXT.md بنفسك مرة. يخبرك بأي الإطارات تم تصديرها، وما هو نظام تسمية الـ tokens، ويسرد أي تحذيرات صدرت أثناء التصدير (مثل layout-mode-none-inferred للإطارات التي أبلغ فيها Figma عن عدم وجود تخطيط تلقائي). هذه التحذيرات هي نفسها التي سيواجهها وكيلك.

الخطوة 4 — كتابة طلب فعّال لـ Cursor

أبسط نقطة بداية هي طلب مرجعي يمكنك لصقه في Cursor Chat:

Read design/CONTEXT.md first, then implement the Home screen.

Use:
- design/tokens.json for all color, spacing, and typography values
- design/screens/Home.json for the layout tree
- design/screens/Home.png as the visual reference
- design/strings.json for all copy (use the resource keys as i18n identifiers)
- design/components/inventory.json to match component names

Target: React + Tailwind CSS. Map token values to Tailwind config entries rather
than hardcoding hex values. Use the component names from inventory.json as
component file names (PascalCase).

سيتبع Cursor Composer قيود CONTEXT.md، ويبحث في شجرة التخطيط في Home.json، ويسحب المسافات من tokens.json، ويُنتج كوداً يطابق نظام التصميم الخاص بك بدلاً من تقريبه.

النموذج لا يعرف تصميمك. يعرف ما تعطيه إياه. JSON المنظم يتفوق على لقطة الشاشة في كل مرة.

الخطوة 5 — ربط tokens بإعدادات الإطار الخاص بك

تستخدم tokens.json المُصدَّرة شكلاً متداخلاً شبيهاً بـ W3C:

{
  "color": {
    "surface": { "$value": "#f6f2ea", "$type": "color" },
    "accent":  { "$value": "#d96a3a", "$type": "color" }
  },
  "spacing": {
    "4":  { "$value": "16px", "$type": "dimension" },
    "8":  { "$value": "32px", "$type": "dimension" }
  },
  "radius": {
    "sm": { "$value": "4px",  "$type": "dimension" },
    "md": { "$value": "8px",  "$type": "dimension" }
  },
  "typography": {
    "body": {
      "fontFamily": { "$value": "Inter",  "$type": "fontFamily" },
      "fontSize":   { "$value": "14px",   "$type": "dimension" },
      "fontWeight": { "$value": 400,       "$type": "number" }
    }
  }
}

لـ Tailwind، اطلب من Cursor توليد كتلة theme.extend في tailwind.config.js مباشرة من tokens.json. راجع تصدير tokens التصميم لعملاء AI للتعمق في تنسيق tokens والاستنتاج القائم على التكرار. هيكل الـ tokens مسطّح بما يكفي للمرور عليه في نص Node واحد إذا أردت أتمتته:

// scripts/tokens-to-tailwind.js
const tokens = require('../design/tokens.json');

const colors = Object.fromEntries(
  Object.entries(tokens.color).map(([k, v]) => [k, v.$value])
);
const spacing = Object.fromEntries(
  Object.entries(tokens.spacing).map(([k, v]) => [k, v.$value])
);

module.exports = { colors, spacing };

الخطوة 6 — التعامل مع المشاريع متعددة الشاشات

كل إطار في ملف Figma يصبح screens/<FrameName>.json ومطابق .png. لمشروع يضم عشرات الشاشات، اعمل عليها بشكل تدريجي. يتعامل Cursor Composer مع شاشة واحدة في كل جلسة بشكل جيد؛ أعطه JSON الشاشة وملف PNG كمراجع @file صريحة:

@design/screens/Settings.json
@design/screens/Settings.png

Implement the Settings screen. Follow the same component structure
as the Home screen already implemented. Use tokens from design/tokens.json.

مخزون المكونات (design/components/inventory.json) يساعدك على تجنب الاختلاف في الأسماء عبر الشاشات — كل مكون مذكور في JSON شاشة ما له id وname رسميان في المخزون. إذا كنت تولّد مكتبة مكونات مشتركة، استخدم تلك الأسماء كمصدر الحقيقة.

كيف يبدو التمثيل الوسيط في الممارسة

يستخدم JSON لكل شاشة هيكل عقدة تكرارياً. مثال مبسط لمكون card:

{
  "kind": "stack",
  "name": "ProductCard",
  "direction": "vertical",
  "gap": { "$ref": "spacing.4" },
  "padding": { "top": 16, "right": 16, "bottom": 16, "left": 16 },
  "background": { "$ref": "color.surface" },
  "radius": { "$ref": "radius.md" },
  "children": [
    {
      "kind": "leaf",
      "name": "ProductImage",
      "type": "image",
      "width": 320,
      "height": 200
    },
    {
      "kind": "leaf",
      "name": "ProductTitle",
      "type": "text",
      "text": { "$ref": "strings.product.card.title" },
      "style": { "$ref": "typography.heading.sm" }
    }
  ]
}

تستخدم مراجع الـ tokens سلاسل $ref تطابق مفاتيح في tokens.json. يمكن للنموذج حلّها دون خطوة بحث منفصلة. راجع شرح التمثيل الوسيط لكل شاشة للمخطط الكامل للعقد.

إبقاء السياق محدثاً

ملفات التصميم تتغير. عادة جيدة: أعد تشغيل figmascope كلما كان للتصميم مراجعة مهمة، أودع مجلد design/ المحدَّث، وأشر إلى الإصدار في وصف طلب السحب. يتضمن _meta.json طابعاً زمنياً وحقل lastModified لملف Figma، لذا يمكنك مقارنة متى تجدّدت الحزمة آخر مرة مقابل آخر لمس للملف.

// _meta.json
{
  "figmascopeVersion": "1.0.0",
  "fileKey": "ABC123",
  "exportedAt": "2026-05-11T09:14:00Z",
  "figmaLastModified": "2026-05-10T18:30:00Z",
  "frameCount": 12,
  "warnings": []
}

إذا كان warnings غير فارغ، عالجها قبل تسليم السياق للوكيل. التحذيرات الشائعة: strings-collision (عقدتان بنفس المقطع حلّتا إلى نفس المفتاح) وlayout-mode-none-inferred (حاوية بلا تخطيط تلقائي صريح، حيث استنتج figmascope التخطيط من مواضع الأبناء).

سير عمل Cursor الشائعة

التحديثات القائمة على الفروقات

عندما يكون للتصميم مراجعة طفيفة — مثلاً تغيّرت قيمة مسافة من spacing.4 إلى spacing.6 على مكون card — يمكنك مطالبة Cursor بتطبيق الفرق فقط بدلاً من إعادة توليد الشاشة بأكملها:

The design/tokens.json was updated. spacing.4 is now 24px instead of 16px.
Find all components using spacing.4 and update them. Do not touch anything else.

هذا يعمل لأن مكوناتك المولّدة تشير إلى أسماء tokens كفئات Tailwind (gap-spacing-4) بدلاً من قيم البيكسل الخام. تغيير الـ token هو بحث واستبدال، وليس إعادة تصميم.

إضافة شاشة جديدة لقاعدة كود موجودة

عند إضافة الشاشة N لقاعدة كود تضم بالفعل الشاشات 1 حتى N-1 مطبّقة، الإضافة الرئيسية للطلب هي تأسيس الوكيل على مكتبة المكونات الموجودة:

@design/screens/Checkout.json
@design/screens/Checkout.png

Implement the Checkout screen. Reuse existing components from src/components/
wherever the component name matches design/components/inventory.json.
Only create new component files for components not already implemented.
Use design/tokens.json for all token values.

مخزون المكونات هو الجسر بين اسم المكون في التصميم واسم الملف في قاعدة الكود. بدونه، سيخترع الوكيل مسارات استيراد وسيُنشئ مكونات مكررة.

توليد خط أساس نظام التصميم

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

Read design/tokens.json and design/CONTEXT.md.

Generate:
1. tailwind.config.ts theme.extend block from all tokens
2. src/styles/tokens.css with CSS custom properties for the same tokens
3. src/components/foundations/ColorPalette.tsx showing all color tokens
4. src/styles/typography.css with the typography token classes

Name all classes and variables using the token key paths
(e.g. --color-accent, text-ink, bg-surface).

بمجرد وجود هذا الخط الأساسي، يمكن لكل تطبيق شاشة الرجوع إليه. لن يعيد الوكيل اشتقاق الألوان من التصميم في كل جلسة — سيستخدم الفئات المولّدة بالفعل.

قيود يجب معرفتها مسبقاً

تلتقط حزمة سياق figmascope البنية الثابتة. بعض الأشياء التي لا تستطيع تمثيلها:

يلاحظ ملف CONTEXT.md أي الإطارات تم استثناؤها ولماذا، حتى لا يحاول الوكيل تطبيق شيء كان خارج النطاق عمداً.