סקירה כללית

Vibr הוא כלי ליצירת אבות טיפוס למעצבים. אתם מתארים מסך במילים פשוטות, וסוכן מתכנן אותו, בונה אותו עם מערכת העיצוב שבחרתם, בודק שהוא מוצג, סוקר אותו לאיתור בעיות נגישות ופריסה, ומתקן את מה שהוא מוצא. התוצאה היא קוד React אמיתי שאפשר ללחוץ בו, לעדכן אותו, להוסיף לו הערות, לקשר אותו לזרימות ולייצא אותו.

איך זה עובד

1. הביאו מפתח. Vibr פונה ל-Google Gemini, ל-OpenAI, ל-Anthropic או ל-OpenRouter עם מפתח ה-API שלכם. המפתח נשאר בדפדפן שלכם.
2. בחרו מערכת עיצוב. Material UI, Ant Design, Fluent UI, Mantine, Shoelace, Octuple, או כל חבילה ב-npm.
3. תארו מסך. Vibr מציג כל שלב תוך כדי עבודה, והקנבס מצייר את המסך בזמן שהוא נכתב.
4. המשיכו הלאה. בקשו שינויים, הצביעו על רכיב אחד כדי לשנות רק אותו, השוו בין גרסאות, הצמידו משוב ושמרו בספרייה שלכם.

מה מייחד אותו

• רכיבים אמיתיים, לא חיקויים. הטיוטות מייבאות מחבילת מערכת העיצוב עצמה, כך שמה שאתם רואים הוא מה שמהנדס היה משיק.
• הוא בודק את העבודה של עצמו. כל טיוטה מוצגת, ואז נסקרת ברוחב מחשב, טאבלט ונייד עם בדיקות נגישות אוטומטיות, לפני שאתם רואים אותה.
• הספרייה שלכם תמיד איתכם. תמונות, סרטונים, ערכות צבעים, סולמות טיפוגרפיים ואייקונים שהוספתם אפשר להכניס לכל בקשה עם אזכור @.
• בלי חשבון ובלי שרת. הכול רץ בדפדפן שלכם. ראו מפתחות, פרטיות ואחסון.

לאן ממשיכים

• חדשים כאן? התחילו בתחילת העבודה.
• רוצים תוצאות טובות יותר? קראו את כתיבת הנחיות.
• סקרנים לדעת מה המשמעות של השלבים? ראו איך מתבצעת הרצה.
• משהו השתבש? בדקו בפתרון בעיות.