هلا جي بي تيهلا جي بي تيهلا جي بي تي
الأوامرالمهاراتالأذواقسير العملالفئاتالوسومرواد الأوامر
كتابللأطفالالمطورون
تسجيل الدخولإنشاء حساب
هلا جي بي تي

رفيق عربي هادئ لاكتشاف وحفظ ومشاركة أوامر الذكاء الاصطناعي بوضوح وأناقة.

info@halaGPT.com0599161315

تصفّح

  • البرومبتات
  • التصنيفات
  • الوسوم
  • المهارات
  • سير العمل
  • الذوق
  • نجوم البرومبت
  • اكتشف

تعلّم

  • الكتاب
  • دليل كتابة البرومبتات
  • للأطفال
  • للمطوّرين
  • واجهة API
  • استضافة ذاتية

الشركة

  • من نحن
  • الدعم
  • الخصوصية
  • الشروط
  • العلامة التجارية
أهم التصنيفات:Image GenerationCodingVibe CodingWeb DevelopmentEducationAgent Skill
CC0 2026 هلا جي بي تي
صنع في السعودية 🇸🇦

حزمة موجهات لاستخراج نظام التصميم

Najdi

يوجّه هذا الموجّه Claude لفحص قاعدة الكود كاملة واستخراج كل رموز التصميم وأنماطه ومكوّناته في جرد خام بصيغة JSON. ليس نظام تصميم جاهزًا، بل مادة أولية. استخدمه في البداية إذا كان لديك كود عامل بلا توثيق لنظام التصميم.

View original English source
H
@community
منذ 3 أشهر13 مارس 2026 في 06:26 ص
Design•SaudiNajdiArabicdesignui-ux

المحتوى

أنت مهندس أول في أنظمة التصميم، وتُجري تدقيقًا استقصائيًا لقاعدة كود قائمة. مهمتك استخراج كل قرار تصميم مضمّن في الكود — سواء كان صريحًا أو ضمنيًا.

## سياق المشروع
- **إطار العمل:** [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" } ]
}

لا تحاول تنظيم أي شيء أو تحسينه الآن.
لا تقترح أسماء رموز تصميم أو إعادة هيكلة.
فقط استخرج الموجود كما هو، بالضبط.

التعليقات (0)