מה זה Storybook? קטלוג ה-UI/UX של האתר שלכם

מקום אחד לראות, לנהל ולשמור על עקביות בממשק

Storybook מרכז לכם ולסוכן ה-AI שאתם עובדים איתו, כמו Claude Code או Codex, את כל רכיבי הממשק, או הקומפוננטות, של האתר או האפליקציה שאתם בונים. זה כולל את המבנה והעיצוב של כפתורים, טפסים, כרטיסים, תפריטים וכל רכיב אחר שהמשתמש רואה או מפעיל.

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

מה זה Storybook?

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

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

למה זה משנה במיוחד כשבונים עם AI

Storybook הוא הארון עם כל חלקי ה-UI שלכם

הקטלוג הזה נותן לכל רכיב בממשק כתובת קבועה, דוגמאות ותיעוד. הוא הופך למקור האמת של הממשק כולו ושל ה-design system: הרכיבים, הצבעים, הריווחים וההתנהגויות שכבר החלטתם עליהם. כשסוכן ה-AI צריך לבנות או לתקן רכיב, הוא בודק קודם אם כבר יש רכיב קיים. אם אין, הוא בונה חדש לפי ההחלטות שקיבלתם על המראה וההתנהגות שלו. כך לא צריך להמציא עיצוב חדש בכל פעם.

הפרומפט שמתחיל את הכול

אני בונה אפליקציה ב-[React/Next.js/Vue]. הוסף Storybook לפרויקט.

התקן והגדר Storybook
סרוק את כל הקומפוננטות הקיימות והצג לי רשימה שלהן
התחל בשלוש קומפוננטות שחוזרות במוצר, וצור לכל אחת story של ברירת מחדל ומצב קצה רלוונטי
הוסף מצבים כמו disabled, loading, error או empty רק כשיש להם משמעות ברכיב. אם צריך לבדוק hover או לחיצה, הגדר גם את האינטראקציה הזאת
הרץ את Storybook ותראה לי שהכול עובד

מעכשיו, בכל פעם שאתה בונה UI חדש, תסתכל על קטלוג ה-Storybook הקיים לפני שאתה מציע עיצוב חדש.

פקודת ההתקנה:

npm create storybook@latest

הפקודה מזהה את מסגרת העבודה בפרויקט, מוסיפה תלויות, סקריפטים וקובצי הגדרה, ומייצרת stories לדוגמה. אחר כך מפעילים את Storybook עם:

npm run storybook

הכתובת המדויקת שמדפיס הכלי היא זו שקובעת. ברוב ההתקנות הוא זמין מקומית בפורט 6006.

למה להוציא רכיבי UI מהאפליקציה?

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

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

איך story עובד בפועל

story הוא תרחיש שמור של רכיב אחד. הוא אומר ל-Storybook: הצג את הכפתור הזה במצב הרגיל, עכשיו הצג אותו כשהוא מושבת, ועכשיו בדוק אותו עם כיתוב ארוך. לא בונים שלושה כפתורים שונים. בודקים את אותו כפתור עם נתונים שונים, כדי לראות מראש איך הוא ייראה ויתנהג במצבים שהמשתמשים באמת פוגשים.

const meta = {
  component: Button,
  args: { children: 'שמור' },
};

export const Default: Story = {};

export const Disabled: Story = {
  args: { disabled: true },
};

export const LongLabel: Story = {
  args: {
    children: 'שמור שינויים
    והמשך לשלב הבא'
  },
};

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

איך זה נראה

ככה נראה Storybook מבפנים

הנה דוגמה מפרויקט LearnWithAvi, פלטפורמת למידה שנבנתה עם AI. צילומי המסך יראו את Storybook כשהוא מנהל את הדפים, הקומפוננטות וה-design system של הפרויקט.

סגירה

סגירה

איך מחברים סוכן AI ל-Storybook?

אפשר לחבר את Claude, Codex או כל סוכן שתומך ב-MCP ישירות ל-Storybook. MCP הוא פשוט חיבור שמאפשר לסוכן לפתוח את קטלוג הרכיבים והתיעוד שלו בזמן העבודה, במקום להסתמך על תיאור כללי בצ׳אט.

אחרי שמגדירים את החיבור ומפעילים את Storybook, הסוכן יכול לראות אילו רכיבים ומצבים כבר קיימים, ליצור stories ולהריץ בדיקות. בפועל, לפני שינוי של UI, מבקשים ממנו לבדוק קודם את ה-Storybook ורק אחר כך להציע קוד. כך ה-design system נשאר זמין לו גם בפרומפט הבא.

סדר עבודה מומלץ

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

מקורות והמשך קריאה

• התחלה והתקנה של Storybook
• Stories, סרגל הצד וה-Controls ב-Storybook
• בדיקות UI דרך Storybook
• Storybook עם AI ו-MCP
• תמיכת ה-frameworks העדכנית