للمطوّرين·مكتبة المكوّنات·v1.1.0

مكوّنات جنّي الجاهزةانسخ، الصق، اشحن

112 مكوّناً مبنيّاً من الأصناف نفسها التي تشغّل gini.iq — أزرار ونماذج وجداول وبطاقات تجارة ولوحات بيانات. اختر مكوّناً لتراه يعمل، وخذ كوده بصيغة HTML أو React، ويعمل كما هو في أيّ صفحة بثلاثة أسطر.

تصفّح المكوّنات(112)توثيق Gini API اربط خادم MCP

HTML وReact لكلّ مكوّن
RTL جاهز · WCAG AA
مُختبَرة عند كلّ نشر

ثلاثة أسطر وتعمل كلّ المكوّنات

index.html · <head>

<link rel="stylesheet" href="https://gini.iq/brand.css">
<link rel="stylesheet" href="https://gini.iq/skeu.css">
<link rel="stylesheet" href="https://gini.iq/gini-ui.css">

تستخدم Tailwind v4؟ استورد brand.tailwind.css بدل gini-ui.css.

بلا خطوة بناء
بلا JavaScript
RTL جاهز

مكتبة المكوّنات

112 مكوّناً · 13 مجموعةv1.1.0

اختصارات: / للبحث · ← → للتنقّلمكوّن تفاعلي

001الإجراءات

الزر الأساسي — ثلاثة أحجام

الزر المؤكسد بارتفاع 32 / 40 / 44px. الحجم يتحدد بأدوات التخطيط فقط، الخامة واحدة.

1 من 112

skeu-btn
skeu-btn-primary
#btn-sizes

— · RTL · 100%

أكثر من المكوّنات

وكلّ ما تحتاجه لتبني مع جنّي

واجهات المنصّة التجارية، خادم MCP لمساعدي الذكاء، ملفات العلامة الجاهزة، والخامات والتوكنات التي بُنيت منها المكوّنات.

01
Gini API124نقطة APIMerchant وApplication، موقّعة بـ HMAC-SHA256
الواجهتان والتوثيق
02
MCP والذكاء الاصطناعي17أداة MCPعلامة جنّي داخل Claude وCursor وChatGPT
اربط عميلك
03
ملفات المشروع07ملفات جاهزةCSS · Tailwind · Tokens · AGENTS.md
اختر ملفّاً
04
الخامات والتوكنات04خاماتثمانية مستويات ارتفاع وخمسة أقطار وتوكنات أساسية
الخامات الأربع

Gini API

124 نقطة نهاية · HMAC-SHA256

ابنِ على منصّة جنّي التجارية

واجهتان موثّقتان بالكامل: Merchant API ليدير التاجر متجره من نظامه، وApplication API ليعرض الشريك تجّار جنّي ومنتجاتهم ويرسل زبائنه إلى الدفع. كلّ طلب موقّع بـ HMAC-SHA256، والتوثيق يشرح كلّ نقطة بمعاملاتها وأمثلتها.

كلّ التوثيق دخول لوحة التاجر سجلّ التغييرات

للتجّار

Merchant API

112

نقطة نهاية

أتمِت متجرك من نظامك: المنتجات والمتغيّرات والخصومات، الطلبات والسلال المتروكة، التسويات والمعاملات، الفروع وأوقات العمل، التصدير والـ webhooks، وسوق الجملة.

المتجر
المالية
الإعدادات
الإحصاءات
الجملة

المفاتيح: Client ID والسرّ من لوحة التاجر ← الإعدادات ← التكاملات

للتطبيقات الشريكة

Application API

نقطة نهاية

اعرض تجّار جنّي ومنتجاتهم وريلزهم داخل تطبيقك، أرسل الزبون إلى الدفع برابط checkout واحد، وتابع الطلبات التي أنشأها تطبيقك مع إشعارات webhook.

التجّار
المنتجات
الريلز
الدفع
الطلبات
Webhooks

المفاتيح: app_id وapp_secret تصدرهما جنّي لتطبيقك، مع قائمة التجّار المسموح بهم

كلّ طلب موقّع بـ HMAC-SHA256 على المسار والوقت، في الرؤوس X-API-KEY وX-TIMESTAMP وX-SIGNATURE — بلا جلسات ولا كوكيز.

MCP والذكاء الاصطناعي

خادم MCP عامّ — علامة جنّي داخل أيّ مساعد ذكاء

بلا مفاتيح ولا تسجيل: أضِف gini.iq/mcp إلى عميلك وسيقرأ المساعد الألوان والشعارات والمكوّنات والنبرة من المصدر مباشرة — 17 أداة و6 موارد و3 prompts جاهزة.

بلا مصادقة17 أداة6 موارد3 prompts

عنوان الخادم

https://gini.iq/mcp

Streamable HTTP، بلا حالة، CORS مفتوح — الصقه في أيّ عميل يدعم MCP، أو اختر عميلك للحصول على الأمر الجاهز.

جرّبه في MCP Inspectorterminal

npx @modelcontextprotocol/inspector --transport http --server-url https://gini.iq/mcp

MCP Inspector أداة محلية: شغّل هذا الأمر في طرفيتك ليفتح واجهة المفتّش في متصفحك موصولة بالخادم.

عن MCP Inspector

اختر عميلك9

terminalbash

claude mcp add --transport http gini-brand https://gini.iq/mcp

فتحgini.iq/mcp

ما الذي يقدّمه الخادم26

الأدوات

get_brand_overviewالاسم، التموضع، الحقائق، وكلّ الروابط الرسمية
get_paletteالألوان بصيغ HEX/RGB/HSL/CMYK/Pantone مع الأدوار
check_contrastنسبة تباين WCAG لأيّ لونين وتصنيفها
get_typographyالخط والأوزان والسُلّم الطباعي
get_logosملفات الشعار الصحيحة لأيّ خلفية مع القواعد والقياسات
get_product_marksعلامات المنتجات وقواعد الجمع مع شعار جنّي
get_design_systemالخامات، الإضاءة، سلّم الارتفاع، الأقطار، الحركة، التوكنات
list_componentsفهرس المكوّنات الجاهزة مع بحث
get_componentكود HTML الكامل لمكوّن واحد
get_layout_systemالمسافات والشبكة ونقاط التوقّف
get_iconographyمكتبة الأيقونات وقواعدها
get_imagery_guidelinesمبادئ الصور والرسوم
get_mascotsوضعيّات الشخصية الرسمية بروابط مباشرة
get_voiceالنبرة وأمثلة الكتابة
get_press_kitالفقرة الصحفية والحقائق والملكية والأسئلة الشائعة
get_brand_promptتعليمات النظام الكاملة للنماذج
get_stylesheetbrand.css أو Tailwind أو skeu.css أو W3C tokens

الموارد

gini://brand/manifestبيان العلامة الكامل (JSON)
gini://brand/guideكتاب العلامة (Markdown)
gini://brand/promptتعليمات النظام
gini://brand/cssمتغيّرات CSS
gini://component/{id}مكوّن واحد بكوده
gini://logo/{id}ملف شعار واحد (SVG)

الـ Prompts

gini_brand_systemتحميل هوية جنّي كاملة في سياق المحادثة
design_gini_screenصمّم شاشة أو صفحة بمكوّنات جنّي
write_gini_copyاكتب نصّاً بنبرة جنّي

هذا خادم العلامة، للقراءة فقط وبلا مفاتيح. للبيانات التجارية هناك خادم MCP التجاري.

ملفات المشروع

7 ملفات · CORS مفتوح

استورد العلامة بسطر واحد

متغيّرات CSS متوافقة مع shadcn، كتلة Tailwind v4، توكنات بصيغة W3C، وتعليمات نظام جاهزة لـ Claude وCursor ووكلاء الكود. كلّ ملفّ رابط ثابت يُقرأ مباشرة ويُحدَّث من دون أن تلمس مشروعك.

اختر الملفّ7

brand.csscss

/* globals.css */
@import url("https://gini.iq/brand.css");

/* That's it — every --gini-* token + shadcn alias is now available. */
.btn-primary {
  background: var(--gini-orange);
  color: var(--gini-cream);
}

فتحgini.iq/brand.css

الخامات والتوكنات

أربع خامات، ثمانية مستويات ارتفاع، خمسة أقطار

كلّ صنف skeu-* خامة ماديّة لها وصفة ثابتة من الضوء والظلّ والحافّة. اعرف ما تضعه على الشاشة قبل أن تنسخه، واستخدم التوكنات نفسها في CSS الخاصّ بك حين تحتاج شيئاً غير موجود في المكتبة.

…
بوليمر مطفأ
- body
- .skeu-well
قاعدة الصفحة، الصواني والآبار الغائرة، حقول الإدخال
سيراميك مرفوع
- .skeu-panel
- .skeu-panel-2
- .skeu-rail
- .skeu-dialog
البطاقات، اللوحات، سكة التنقل، النوافذ الحوارية، الأزرار الثانوية
GINI
برتقالي مؤكسد
- .skeu-btn-primary
- .skeu-tile
- .skeu-tab-active
- .skeu-chip-solid
الزر الأساسي، بلاطات الأيقونات، التبويب النشط، الشارات الصلبة، المفتاح المفعّل
$ gini
غرافيت
- .skeu-dark
- .skeu-btn-dark
الفوتر، نوافذ الكود، كتل الدعوة الداكنة، عناصر التحكم عليها

08مستويات ارتفاع05أقطار15توكناً أساسياًالمرجع الكامل في دليل العلامة

المصادر الآلية

v1.1.0 · 2026-09

كلّ شيء متاح كرابط ثابت

بيان JSON بمخطّط رسميّ، كتاب ماركداون، ملفات الشعار وحزمة الشخصية وllms.txt — لأيّ متصفّح أو وكيل أو أنبوب بناء. لا HTML لتحليله ولا جلسة لتسجيلها.

أسئلة المطوّرين

ما يسأله المطوّرون قبل أوّل commit

إجابات قصيرة عن المصادقة والأُطر والاتجاه والإصدارات والترخيص. لم تجد سؤالك؟ راسل info@gini.iq.

أيّ API أستخدم: Merchant API أم Application API؟

إن كنت تاجراً تريد إدارة متجرك من نظامك الخاص — المنتجات والطلبات والتسويات والمخزون — فاستخدم Merchant API، ومفاتيحه من لوحة التاجر ← الإعدادات ← التكاملات. وإن كنت تبني تطبيقاً يعرض تجّار جنّي ومنتجاتهم ويرسل الزبائن إلى الدفع، فاستخدم Application API، وتصدر جنّي لتطبيقك app_id وapp_secret. الاثنان يوقّعان كلّ طلب بـ HMAC-SHA256، لكنّ نقاطهما وقواعد توقيعهما مختلفة.

ما الفرق بين خادمَي MCP في هذه الصفحة؟

gini.iq/mcp خادم العلامة: عامّ، للقراءة فقط، بلا مفاتيح، ويقدّم الألوان والشعارات والمكوّنات والنبرة. أمّا merchant.gini.iq/mcp/applications فخادم Application API: خاصّ، يحتاج app_id وapp_secret، ويعمل على بيانات تطبيقك الحقيقية — التجّار والمنتجات وروابط الدفع والطلبات.

هل أحتاج مفتاح API أو تسجيلاً لاستخدام خادم MCP؟

لا. الخادم عامّ، للقراءة فقط، وبلا حالة: يعمل عبر Streamable HTTP على gini.iq/mcp، يقبل CORS من أيّ مصدر، ولا يطلب رؤوس مصادقة. أضِفه إلى عميلك وابدأ السؤال.

هل تعمل المكوّنات مع React أو Vue أو Svelte؟

نعم. كلّ مقتطف هو HTML عاديّ يعتمد على أصناف skeu-* فقط، فيُلصق كما هو في أيّ إطار — في React تُبدَّل class بـ className لا أكثر. المكوّنات الثابتة لا تحتاج أيّ JavaScript، والتفاعلية منها (النوافذ، القوائم، التنبيهات) تحتاج منطق إظهار وإخفاء بسيطاً تكتبه بأدوات إطارك.

هل Tailwind شرط لاستخدام المكتبة؟

ليس شرطاً. الخامات كلّها في skeu.css وتعمل مستقلّة. المقتطفات تستخدم أدوات Tailwind للتخطيط فقط (flex، gap، الحشو، أحجام النصّ)، ويمكن استبدالها بأصنافك أو بـ CSS عاديّ دون أن تتغيّر الخامة أو الظلال أو الحالات.

كيف تتعامل المكوّنات مع العربية والاتجاه من اليمين إلى اليسار؟

كلّ المقتطفات مبنيّة بالخصائص المنطقية (ps- وpe- وstart وend وtext-start) لا اليمين واليسار الفيزيائيين، فتنقلب تلقائيّاً بمجرّد ضبط dir="rtl" على جذر الصفحة. الأرقام والأكواد والروابط تُغلَّف بـ dir="ltr" داخل السياق العربي، والأسهم التي تدلّ على اتجاه تُبدَّل بحسب اللغة.

كيف أعرف أنّ نسختي محدَّثة؟

رقم الإصدار موجود في ثلاثة أماكن تُحدَّث معاً: الوسم brand:version في رأس هذه الصفحة، وحقل version في brand.json، والتعليق الأوّل في skeu.css. الإصدار الحالي للعلامة 1.9 ولنظام التصميم 1.1.0، والتغييرات تُدوَّن في سجلّ التغييرات في دليل العلامة. الروابط ثابتة لا تتغيّر، فربطها مباشرة يعني أنّك تحصل على آخر نسخة دائماً.

ما الذي يُسمح لي باستخدامه، وما الذي يبقى محميّاً؟

ورقتا الأنماط والمكوّنات والتوكنات منشورة للشركاء والتكاملات التي تُبنى على جنّي أو إلى جانبها، وللاستخدام التحريريّ. أمّا الشعار والاسم والشخصية والألوان فعلامات مسجّلة: لا تُعدَّل ولا تُستخدم بما يوحي بتأييد أو شراكة غير قائمة. لأيّ استخدام تجاريّ مشترك راسل info@gini.iq.

وجدت خطأً أو أحتاج مكوّناً غير موجود — ماذا أفعل؟

راسل info@gini.iq بوصف قصير ورابط للمكوّن أو لقطة شاشة. المكتبة تنمو مع ما يطلبه الشركاء فعلاً، والإصلاحات تُنشر على الروابط نفسها من دون أن تغيّر شيئاً في مشروعك.

وصول خاصّ

اربط Application API بمساعد الذكاء

الطريق نفسه إلى Application API، لكن من داخل Claude أو أيّ عميل MCP: تربط مرّة واحدة ببيانات تطبيقك، والخادم يوقّع كلّ استدعاء عنك. ما يغطّيه الـ API ومن أين تأتي المفاتيح موضّح في قسم Gini API أعلاه.

دليل الربط الكامل

01claude.ai وClaude DesktopConnectors ← Add custom connector، الصق العنوان واترك حقول OAuth فارغة، ثم سجّل الدخول بـ app_id وapp_secret.
02Claude Code وعملاء MCP الآخرونأرسل X-App-Id وX-App-Secret في الرؤوس مع كلّ طلب؛ الخادم يتولّى التوقيع.
03Claude API من خادمكاستخدم موصل MCP في Claude API من الواجهة الخلفية لتطبيقك.
رموز الوصول صالحة ساعة وتُجدَّد حتى 30 يوماً. إيقاف التطبيق يقطع الربط فوراً؛ تدوير app_secret لا يقطعه، فاطلب من جنّي إلغاء الروابط القائمة.

MCPURL

https://merchant.gini.iq/mcp/applications

Claude Codeterminal

claude mcp add --transport http gini-applications https://merchant.gini.iq/mcp/applications \
  --header "X-App-Id: <your app_id>" \
  --header "X-App-Secret: <your app_secret>"

إعداد JSON لعملاء MCP

mcp.json

{
  "mcpServers": {
    "gini-applications": {
      "type": "http",
      "url": "https://merchant.gini.iq/mcp/applications",
      "headers": {
        "X-App-Id": "<your app_id>",
        "X-App-Secret": "<your app_secret>"
      }
    }
  }
}

تحتاج مساعدة؟

فريق جنّي على بُعد رسالة

أرسل سؤالك التقنيّ أو طلب وصول شريك إلى info@gini.iq وسنعود إليك خلال يوم عمل. ولكلّ ما يخصّ الهويّة — الشعار والألوان والخطوط والنبرة — هناك دليل العلامة.

مراسلة الفريق افتح دليل العلامة

مكتبة المكوّنات

الأدوات

الموارد

الـ Prompts

بوليمر مطفأ

سيراميك مرفوع

برتقالي مؤكسد

غرافيت

فريق جنّي على بُعد رسالة