מידע עזר
מערכות עיצוב ומודלים
מערכות העיצוב ש-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.