The Kitchen: רכיבים שנראים כמו חפצים

מה זה The Kitchen ולמה אתרים של AI נראים אותו דבר?

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

The Kitchen הוא המקום שבו המעצב שמאחורי dqnamo אוסף ניסויים קטנים בממשק. בכותרת העמוד הוא קורא להם "רכיבים, מחקרי ממשק וניסויים קטנים". מה שמשותף לכולם: כל רכיב מרגיש כמו חפץ פיזי. יש לו עומק, משקל ותגובה, ולא רק צבע.

נכון לנובמבר 2026 יש בעמוד 15 ניסויים. ההבדל מספריות כמו Magic UI: שם תמצאו מאות אפקטים של תנועה. כאן יש מעט, וכל אחד מהם הוא רגע קטן שאנשים מספרים עליו.

אילו רכיבים יש ב-The Kitchen, ולמה הם משמשים?

• נגן קלטת (Cassette Audio Player): נגן אודיו בצורת קלטת, עם גלגלים שמסתובבים בזמן הנגינה ותמיכה בכתוביות. מתאים לפודקאסט, להקלטה של המלצה מלקוח או להודעה קולית באתר.
• כפתור שצריך להחזיק (Hold to Confirm): לפי העמוד, אישור בלחיצה ארוכה לפעולות שאי אפשר לבטל. שחררתם באמצע, המילוי חוזר אחורה. סיימתם, מופיעה הודעה עם אפשרות לבטל לכמה שניות.
• קופה שמדפיסה קבלה (Receipt Printer): מסך תשלום שהופך את אישור ההזמנה לקבלה מודפסת, עם פרטי ההזמנה. רגע של סיפוק בדיוק כשהלקוח שילם.
• ועוד: כפתור מוחשי שנלחץ פנימה, טקסט שמתחלף בערבול של תווים, אזור גרירה של קבצים שנמשך לקובץ, כרטיס עם חירור, בול דואר, חתימה שמציירת את עצמה ומשטח מבריק שמגיב לגלילה.

איך מכניסים רכיב מ-The Kitchen לאתר עם קלוד?

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

1. פותחים את הרכיב ב-dqnamo.com/kitchen.
2. מעתיקים כל קובץ, אחד אחרי השני, ומדביקים לקלוד קוד.
3. מדביקים אחריהם את הפרומפט הזה:

העתקהאלה קבצי הקוד של רכיב מ-The Kitchen (dqnamo.com/kitchen). תכניס אותו לפרויקט שלי:

1. תשמור כל קובץ בתיקיית הרכיבים של הפרויקט, ותתקין רק את החבילות שהוא צריך (למשל motion ו-@phosphor-icons/react).
2. תחליף את הצבעים והפונט בצבעים ובפונט שכבר מוגדרים אצלי באתר. אל תמציא צבעים חדשים.
3. תשים אותו במקום הזה: [למשל: כפתור "מחיקת פרויקט" בדשבורד / מסך אישור התשלום / סקשן ההמלצות].
4. תשאיר את התמיכה ב-prefers-reduced-motion ובמקלדת כמו שהיא.
5. תריץ את האתר, תבדוק את הרכיב בדפדפן ובגודל של טלפון, ותראה לי צילום מסך.
6. תוסיף הערה בראש הקובץ עם קישור למקור.

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

למה פרטים מוחשיים גורמים לאתר להרגיש יקר?

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

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

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

איך בונים עם קלוד רכיב מוחשי משלכם?

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

העתקהתסתכל על הרעיון של רכיבים מוחשיים ב-dqnamo.com/kitchen, אבל אל תעתיק קוד משם.
תבנה לי רכיב חדש משלי לאתר של [סוג העסק]: [למשל: כרטיס תור שנקרע כשהלקוח מאשר את התור].
הוא צריך להרגיש כמו חפץ אמיתי: עומק, צל עדין ותגובה ללחיצה.
תשתמש בצבעים ובפונט שכבר יש באתר, תתמוך ב-prefers-reduced-motion ובמקלדת,
ותראה לי שתי גרסאות בצילום מסך לפני שאתה מכניס אחת מהן לאתר.

ככה אתם מקבלים את אותה תחושה, בלי לשאול אף אחד, ועם משהו שאף אתר אחר לא מחזיק.

מה חשוב לדעת לפני שמעתיקים?

• רישיון לא מצוין: נכון לנובמבר 2026 אין בעמוד רישיון שימוש מפורש, והקוד מוצג לצפייה ולהעתקה. לאתר אישי או לניסוי זה בסדר. לפני שימוש בפרויקט מסחרי של לקוח, כדאי לשלוח למעצב הודעה ולבקש אישור, ולשמור קרדיט בקוד.
• זה React: הקבצים כתובים ב-React עם TypeScript ו-Tailwind, ומשתמשים בחבילות motion ו-@phosphor-icons/react. באתר בלי React, קלוד יכול לשחזר את הרעיון, אבל זה יהיה העתק ולא הרכיב.
• ניסויים, לא ספרייה: המעצב קורא להם ניסויים. אין התקנה בפקודה אחת, אין תיעוד מלא, ומדי פעם הם משתנים. קלוד מכניס אותם ידנית לפרויקט.
• נגישות: לפחות חלק מהרכיבים מכבדים את ההגדרה של הפחתת תנועה. אחרי שקלוד מכניס רכיב, תבדקו שאפשר להפעיל אותו גם מהמקלדת.

רוצים ספרייה גדולה יותר של אנימציות שמתקינים בפקודה? תציצו במדריך על Magic UI, או ב21st.dev עם קלוד קוד. ואם ראיתם אנימציה באתר אחר ורוצים לשחזר אותה, יש מדריך על שחזור אנימציה מקוד המקור.