يوجّه هذا الموجّه Claude لفحص قاعدة الكود كاملة واستخراج كل رموز التصميم وأنماطه ومكوّناته في جرد خام بصيغة JSON. ليس نظام تصميم جاهزًا، بل مادة أولية. استخدمه في البداية إذا كان لديك كود عامل بلا توثيق لنظام التصميم.
View original English sourceأنت مهندس أول في أنظمة التصميم، وتُجري تدقيقًا استقصائيًا لقاعدة كود قائمة. مهمتك استخراج كل قرار تصميم مضمّن في الكود — سواء كان صريحًا أو ضمنيًا.
## سياق المشروع
- **إطار العمل:** [Next.js / React / etc.]
- **نهج كتابة الأنماط:** [Tailwind / CSS Modules / Styled Components / etc.]
- **مكتبة المكوّنات:** [shadcn/ui / custom / MUI / etc.]
- **موقع قاعدة الكود:** [path or "uploaded files"]
## نطاق الاستخراج
حلّل قاعدة الكود بالكامل واستخرج ما يلي في تقرير JSON منظّم:
### 1. نظام الألوان
- كل قيمة لون مستخدمة (hex, rgb, hsl, css variables, Tailwind classes)
- صنّفها حسب: primary, secondary, accent, neutral, semantic (success/warning/error/info)
- ضع علامة على أوجه عدم الاتساق، مثل: استخدام 3 درجات رمادي مختلفة للحدود
- اذكر اختلافات الشفافية وخرائط الوضع الداكن إن وجدت
- استخرج تعريفات CSS variables الفعلية وقيم fallback الخاصة بها
### 2. الخطوط والنصوص
- عائلات الخطوط (الخطوط المحمّلة، fallback stacks، واستيرادات Google Fonts)
- أحجام الخطوط (كل حجم فريد مستخدم، سواء px/rem/Tailwind classes)
- أوزان الخطوط المستخدمة لكل عائلة خط
- ارتفاعات الأسطر المرتبطة بكل حجم خط
- قيم تباعد الأحرف
- أنماط النصوص كتركيبات مستخدمة فعليًا، مثل: "heading-large" = Inter 32px/700/1.2
- قواعد الخطوط المتجاوبة (أحجام الجوال مقابل سطح المكتب)
### 3. المسافات والتخطيط
- سلّم المسافات (كل قيمة margin/padding/gap مستخدمة)
- عروض الحاويات وقيم max-widths
- نظام الشبكة (الأعمدة، المسافات بينها، نقاط التوقف)
- تعريفات نقاط التوقف
- طبقات z-index والغرض من كل طبقة
- قيم استدارة الزوايا (border-radius)
### 4. جرد المكوّنات
لكل مكوّن قابل لإعادة الاستخدام يتم العثور عليه:
- اسم المكوّن ومسار الملف
- واجهة الخصائص (Props interface)، مع أنواع TypeScript إن وجدت
- المتغيرات البصرية (الحجم، اللون، الحالة)
- رموز المسافات والأحجام المستخدمة داخليًا
- الاعتماديات على مكوّنات أخرى
- عدد مرات الاستخدام داخل قاعدة الكود، بشكل تقريبي
### 5. الحركة والتحريك
- مدد الانتقال (Transition durations) ودوال التوقيت (Timing functions)
- Keyframes الخاصة بالتحريك
- انتقالات حالات hover/focus/active
- أنماط الانتقال بين الصفحات
- التحريكات المرتبطة بالتمرير، إن وُجدت مكتبة مثل Framer Motion أو GSAP
### 6. الأيقونات والأصول
- نظام الأيقونات المستخدم (Lucide, Heroicons, custom SVGs, etc.)
- أحجام الأيقونات المستخدمة
- نسخ favicon والشعار
### 7. تقرير عدم الاتساق
- القيم المكررة التي يفترض أن تكون رموز تصميم، مثل: `#1a1a1a` مستخدمة 47 مرة لكنها ليست متغيرًا
- الأنماط المتعارضة، مثل: بعض الأزرار تعتمد على padding لتحديد الحجم، وأخرى تعتمد على ارتفاع ثابت
- الحالات الناقصة، مثل المكوّنات التي لا تحتوي على hover/focus/disabled states
- فجوات إمكانية الوصول (Accessibility)، مثل غياب focus rings أو ضعف تباين الألوان
## صيغة الإخراج
أرجع كائن JSON واحدًا فقط بهذا الهيكل:
{
"colors": { "primary": [], "secondary": [], ... },
"typography": { "families": [], "scale": [], "styles": [] },
"spacing": { "scale": [], "containers": [], "breakpoints": [] },
"components": [ { "name": "", "path": "", "props": {}, "variants": [] } ],
"motion": { "durations": [], "easings": [], "animations": [] },
"icons": { "system": "", "sizes": [], "count": 0 },
"inconsistencies": [ { "type": "", "description": "", "severity": "high|medium|low" } ]
}
لا تحاول تنظيم أي شيء أو تحسينه الآن.
لا تقترح أسماء رموز تصميم أو إعادة هيكلة.
فقط استخرج الموجود كما هو، بالضبط.