مرجع
أنظمة التصميم والنماذج
أنظمة التصميم التي يبني بها Vibr، وكيفية استخدام أي حزمة من npm، والنماذج التي يقدمها كل مزوّد.
أنظمة التصميم المدمجة
| نظام التصميم | النوع | الحزم |
|---|---|---|
| Material UI (MUI) | React | @mui/material@6، @mui/icons-material@6، Emotion |
| Ant Design | React | antd@5 |
| Fluent UI React | React | @fluentui/react-components@9 |
| Mantine | React | @mantine/core@7، @mantine/hooks@7 |
| Shoelace | مكونات ويب | @shoelace-style/shoelace@2 |
| Octuple | React | @eightfold.ai/octuple@2 |
تستورد المسودات مكونات حقيقية من هذه الحزم، تُحمَّل من شبكة CDN، وتُعرض باستخدام React 19. وقبل البناء، يقرأ Vibr المكونات التي تصدّرها كل حزمة فعليًا، حتى لا يخترع النموذج مكونًا غير موجود. شبكة CDN هي esm.sh. وإذا توقفت عن الاستجابة، يحمّل Vibr المسودات من مصدر احتياطي بدلًا منها (jsDelivr، أو نسخة Vibr الخاصة من Fluent UI) طوال بقية زيارتك ويخبرك بذلك.
يؤدي تغيير نظام التصميم إلى بدء جلسة جديدة. احفظ أولًا كل ما تريد الاحتفاظ به.
استخدم أي حزمة من npm
اختر حزمة npm مخصصة… من قائمة نظام التصميم، واملأ الحقول التالية:
| الحقل | ما الذي تُدخله | مثال |
|---|---|---|
| الحزمة (مع الإصدار) | اسم الحزمة والإصدار الرئيسي. | @radix-ui/themes@3 |
| مسار CSS أو عنوان URL | اختياري. ورقة أنماط الحزمة، إن وُجدت. | @radix-ui/themes@3/styles.css |
| النوع | React، أو مكونات ويب. | React |
| وحدة التسجيل | اختياري، لمكونات الويب التي تحتاج إلى أداة تحميل لتسجيلها. | my-ds@1/dist/loader.js |
يتحقق Vibr من وجود الحزمة على npm قبل البناء. وإذا كان الاسم أو الإصدار خاطئًا، يخبرك بذلك.
ويفحص Vibr الحزمة أيضًا قبل تحميل أي شيء منها. يُثبَّت نطاق الإصدار على أحدث إصدار مضى على نشره أسبوعان على الأقل (فيصبح @radix-ui/themes@3 في الحقل مثلًا @radix-ui/themes@3.3.0)، حتى لا يُلتقط إصدار سيئ نُشر اليوم. ولا تُحمَّل أبدًا حزمة مُدرجة كبرمجية خبيثة. وتحت الحقل، ينبّهك Vibr إلى التنبيهات الأمنية المعروفة، والإصدار المتوقف، والحزمة التي يقل عمرها عن 30 يومًا أو تقل تنزيلاتها عن 1,000 في الأسبوع الماضي، والاسم الذي يختلف بحرف أو حرفين عن حزمة شائعة. تعتمد هذه الفحوص على بيانات عامة من deps.dev وnpm وOSV، ولا تُرسل سوى اسم الحزمة وإصدارها.
لاختيار مكتبات المخططات والجداول أيضًا، راجع المخططات والجداول.
المزوّدون والنماذج
| المزوّد | النماذج | يخطط باستخدام |
|---|---|---|
| Google Gemini | gemini-3.5-flash (الافتراضي)، gemini-3.7-flash، gemini-flash-latest، gemini-3.1-pro-preview | gemini-3.5-flash |
| OpenAI | gpt-5.5 (الافتراضي)، gpt-5.4، gpt-5.4-mini | gpt-5.4-mini |
| Anthropic | claude-sonnet-5-5 (الافتراضي)، claude-opus-5-5 | claude-haiku-5-5 |
| OpenRouter | anthropic/claude-sonnet-5.5 (الافتراضي)، anthropic/claude-opus-5.5, openai/gpt-5.5, google/gemini-3.5-flash, google/gemini-3.1-pro-preview | anthropic/claude-haiku-5.5 · openai/gpt-5.4-mini · google/gemini-3.5-flash |
يمنحك OpenRouter مفتاحًا واحدًا لنماذج Claude وGPT وGemini. وبدلًا من لصق مفتاح، يمكنك اختيار تسجيل الدخول عبر OpenRouter في مربع حوار المفتاح. ينشئ OpenRouter مفتاحًا خاصًا بـ Vibr يمكنك الاطلاع عليه وتحديد سقف له وإلغاؤه من حسابك على OpenRouter.
تستخدم خطوة التخطيط نموذجًا أسرع من المزوّد نفسه. وإذا كان مفتاحك لا يتيح استخدامه، يتولى النموذج الذي اخترته التخطيط بدلًا منه. ولكل نموذج أيضًا نموذج احتياطي من المزوّد نفسه يتولى المهمة عندما يكون مشغولًا أو مستنفدًا لحصته؛ راجع كيف يجري التشغيل.
تعمل الفئة المجانية من Gemini مع نماذج Flash. أما نماذج Pro فتتطلب تفعيل الفوترة في Google AI Studio.