للمحثات المبنية على لقطات الشاشة سقف. تلصق التصميم، يُقدِّم النموذج تقريباً معقولاً، تصحّحه، وفي الدور التالي ينحرف مجدداً. لا شيء مُرسَّخ. لا يملك النموذج مصدر حقيقة يتحقق منه بين الأدوار.

حزمة سياق figmascope تغيّر العقد. بدلاً من مرجع بكسل يجب على النموذج تفسيره في كل مرة، تحصل على مجموعة ملفات منظّمة قابلة للإسناد — رموز تصميم، IR للتخطيط، جرد المكوّنات، سلاسل واجهة المستخدم — تبقى في الجلسة وتبقى متسقة. يمكن لـ Claude Code قراءتها والتنفيذ منها والتحقق من إخراجه مقابلها عند الطلب.

يغطي هذا الدليل خط الأنابيب الكامل من تصدير الحزمة حتى التنفيذ المراجَع والمتحقَّق من رموزه.

ما الذي يجعل هذا حتمياً

ثلاثة أشياء تجعل الحزمة قابلة للإسناد لا للتفسير:

  1. الرموز مكتوبة ومُفهرَسة. يُعيِّن tokens.json أسماء دلالية (spacing.16، color.7f5cfe) إلى قيم دقيقة. يمكن للنموذج التحقق من إخراجه مقابل الملف دون إعادة معالجة التصميم.
  2. IR هو شجرة لا بكسلات. يصف screens/home.json التخطيط بعقد stack/overlay/absolute/leaf — نفس التجريد الذي يستخدمه هدف التنفيذ (Compose أو React أو غيره). لا توجد خطوة تفسير بصري.
  3. الحزمة ثابتة عبر الأدوار. بمجرد وضعها في المستودع، يمكن لكل محث في الجلسة الإسناد إلى نفس الملفات. انحراف الرموز قابل للاكتشاف: اطلب من النموذج مقارنة إخراجه مقابل tokens.json وسيفعله آلياً.

الخطوة 1: توليد الحزمة

افتح figmascope.dev في متصفحك. الصق رابط ملف Figma الخاص بك. يعمل المُصدِّر من جانب العميل باستخدام Figma REST API — رمز وصولك الشخصي لـ Figma يُخزَّن في الذاكرة ولا يُرسَل أبداً إلى خوادم figmascope.

انقر على تصدير سياق الوكيل. تُصدِّر الصفحة الإطارات عالية المستوى وتحل رموز التصميم وتبني IR وتُنزِّل context-bundle.zip.

الخطوة 2: فكّ الضغط في مشروعك

# from your project root
unzip ~/Downloads/context-bundle.zip -d ./design/

# confirm what you have
find design/ -type f | sort
# design/CONTEXT.md
# design/_meta.json
# design/components/inventory.json
# design/screens/home.json
# design/screens/home.png
# design/screens/settings.json
# design/screens/settings.png
# design/strings.json
# design/tokens.json

اسم المجلد لا يهم — design/ مجرد اتفاقية. المهم أن Claude Code يمكنه قراءة الملفات من مجلد العمل.

الخطوة 3: تشغيل Claude Code في مستودعك

cd my-app
claude

يبدأ Claude Code في جذر مستودعك مع وصول كامل للملفات. يمكنه قراءة وكتابة والإسناد إلى أي ملف في الشجرة عبر الجلسة بأكملها — هذه هي القدرة الأساسية التي تجعل نمط الحزمة ناجحاً.

الخطوة 4: توجيه الوكيل

ابدأ بمحث قراءة قبل أي تنفيذ. هذا يحمِّل المواصفة في سياق الجلسة ويسمح لك بالتحقق من صحة التصدير قبل كتابة أي كود.

Read ./design/CONTEXT.md and tell me:
1. What target framework is this bundle for?
2. What token files does it reference?
3. Are there any warnings I should know about before implementing?

سيُبلِّغ Claude بالهدف (Jetpack Compose بشكل افتراضي)، ومصدر الرموز، وأي تحذيرات من رأس CONTEXT.md — تعبئات التدرج، تعيينات الرموز المفقودة، التأثيرات غير المدعومة. تكتشف هذه الآن لا بعد توليد 200 سطر من الكود.

أتبع ذلك بفحص سريع للرموز:

List the top 10 color tokens from ./design/tokens.json.
Then list the spacing tokens.

هذا يتحقق من تحليل ملف الرموز بشكل صحيح ويمنحك نموذجاً ذهنياً لللوحة قبل التنفيذ.

الخطوة 5: تنفيذ شاشة

الآن محث التنفيذ. كن صريحاً حول أي الملفات موثوقة لأي قرارات:

Implement ./design/screens/home.json as a Jetpack Compose screen.

Rules:
- CONTEXT.md constraints apply. Read it if you haven't already.
- All spacing, color, and radius values must come from ./design/tokens.json.
  Map token keys to the appropriate Compose primitives (e.g. spacing.16 → 16.dp).
- UI strings must use keys from ./design/strings.json via stringResource().
  Fall back to the "fallback" field value if no resource ID is available yet.
- The IR node kinds map as follows:
    stack (axis:vertical)   → Column
    stack (axis:horizontal) → Row
    overlay                 → Box
    absolute                → Box with Modifier.offset
    leaf (text)             → Text with TextStyle
    leaf (rectangle)        → Box with Modifier.background
- Do not invent any value not present in the token or IR files.
  If something is missing, leave a TODO comment with the token key you expected.

سيقرأ Claude Code الـ IR ويسير عبر شجرة العقد ويُعيِّن كل عقدة إلى العنصر الأوّلي المناسب في Compose ويسحب قيم الرموز بالمفتاح. الإخراج قابل للتتبع: كل قيمة .dp يجب أن تقابل رمز تباعد، وكل Color(0xFF...) يجب أن يطابق رمز لون.

الخطوة 6: اكتشاف انحراف الرموز وإصلاحه

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

Compare every color value in the generated HomeScreen.kt against ./design/tokens.json.
List any hex values in the output that don't correspond to a color token key.
For each one, identify the correct token and replace the hardcoded value.

افعل الشيء ذاته للتباعد:

Compare every .dp value in HomeScreen.kt against the spacing tokens in ./design/tokens.json.
Flag any value that doesn't match a spacing token. Replace with the correct token reference.

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

نصيحة: أدرج تحذيرات _meta.json في محثك الأول

يحتوي design/_meta.json على مصفوفة warnings. هذه أشياء لم يستطع المُصدِّر حلّها بالكامل: تعبئات التدرج، الصور المضمّنة، التأثيرات بدون رمز مكافئ. اقرأها قبل التنفيذ:

cat design/_meta.json

إذا احتوى الإخراج على شيء مثل:

{
  "warnings": [
    "node 'hero-background': gradientFill not fully supported — background fill omitted",
    "node 'avatar': imageFill — reference only, no pixel data"
  ]
}

أضف هذه صراحةً إلى محث التنفيذ: "تخطَّ تعبئة الخلفية الرئيسية واترك // TODO: gradient. لعقدة avatar، استخدم AsyncImage احتياطياً مع خلفية رمادية."

هذا يمنع Claude من التقريب بصمت — سيفعل ما أخبرته بدلاً من التخمين.

لماذا هذا يتفوق على محثات لقطات الشاشة

آمن عبر أدوار متعددة. لا يتغير ملف الرموز والـ IR بين الأدوار. يمكنك السؤال "هل استخدمت التباعد الصحيح لحشو البطاقة؟" في الدور 12 والحصول على إجابة دقيقة، لأن مصدر الحقيقة لا يزال على القرص.

سهل المقارنة. حين تُعيد التصدير بعد تغيير التصميم، تُنتج الحزمة الجديدة diff مقابل القديمة. يمكنك مطالبة Claude بمراجعة الـ diff وتحديث المكوّنات المتأثرة فقط — لا إعادة تنفيذ كاملة مطلوبة.

لا إعادة رفع. الحزمة تعيش في مستودعك. لا تُعيد لصق لقطات الشاشة لكل شاشة جديدة. كل شاشة جديدة هي مجرد design/screens/<name>.json — ملف آخر للإسناد إليه في المحث التالي.

صادق حول الفجوات. يُدرج CONTEXT.md و_meta.json صراحةً ما لا تغطيه الحزمة. ليس لمحثات لقطات الشاشة ما يعادل هذا — النموذج يخمن عبر الفجوات.

تطبيق figmascope الرئيسي يتولّى التصدير في متصفحك — الصق رابط Figma، صدِّر الحزمة، وستكون مستعداً لتشغيل Claude Code مقابل مواصفة حتمية.