לתת ל-Claude
טעם בעיצוב
21st.dev וה-Magic MCP, ככה שהאתרים שאתם בונים עם AI יפסיקו להיראות גנריים. 4 שיעורים קצרים.
למה כל אתר שבונים עם AI נראה אותו דבר
הבעיה שאף אחד לא מדבר עליה, ולמה היא בכלל לא באשמתכם.
התחושה שכבר ראיתם את זה
בניתם אתר עם AI. הוא עובד, הוא נקי, אבל יש בו משהו שמרגיש מוכר מדי. כאילו כבר ראיתם אותו במאה מקומות אחרים. אותו hero גדול (התמונה הענקית שפותחת כל אתר) באמצע המסך, אותם כפתורים סגולים מעוגלים. כאילו מישהו לקח תבנית אחת ושכפל אותה שוב ושוב.
אתם לא מדמיינים את זה. זו התלונה שחוזרת היום אצל כמעט כל מי שבונה אתרים עם AI: הכל נראה אותו דבר. וברגע שתשימו לב לזה, אי אפשר להפסיק לראות את זה.
למה זה קורה (ולמה זה לא אתם)
זה לא קוד גרוע ולא חוסר ניסיון. זו פשוט הדרך שבה AI עובד.
- המודל למד מאינסוף אתרים, אז כשהוא צריך להחליט איך משהו ייראה, הוא הולך על הבחירה הכי שכיחה והכי בטוחה.
- בלי מקור עיצובי ברור, הוא בורר את מה שראה הכי הרבה פעמים. וזה בדיוק אותו מראה שכולם מקבלים.
- ברירת המחדל שלו היא "שיהיה תקין", לא "שיהיה מיוחד". הוא לא מסתכן בעיצוב נועז כי אתם לא ביקשתם.
אותו תוכן, שתי תוצאות
קחו את אותו אתר בדיוק, עם אותו תוכן. ההבדל היחיד הוא מאיפה ה-AI לוקח את חלקי העיצוב, הכפתורים וחלקי העמוד.
- פריסה צפויה שראיתם בכל מקום
- צבעים וטיפוגרפיה של ברירת מחדל
- אפס אנימציות או נגיעות קטנות
- נראה כמו תבנית, לא כמו מותג
- סקשנים שמעוצבים על ידי אנשים עם טעם
- אנימציות וכפתורים שמרגישים חיים
- פלטה וטיפוגרפיה שנבחרו בכוונה
- נראה ייחודי, לא משוכפל
זו בדיוק ההשוואה שעשיתי בסרטון. אותו פרומפט, אותו אתר, רק שלאחד נתתי מקור עיצובי טוב. ההבדל היה ברור מהשנייה הראשונה.
יש דרך אחרת
מה אם במקום לתת ל-AI לנחש, הייתם נותנים לו ספרייה שלמה של חלקי אתר שכבר נראים מעולה, מכפתורים בודדים ועד סקשנים שלמים עם אנימציות, כולם מעוצבים על ידי אנשים אמיתיים? וה-AI רק בוחר ומרכיב מתוכם.
לזה בדיוק נועד 21st.dev, ספרייה של חלקי אתר מוכנים, והוא הולך להיות הכוכב של הקורס הזה.
מה זה 21st.dev
ספרייה אחת עם כל חלקי האתר המעוצבים שתצטרכו.
חנות הרהיטים של אתרים
דמיינו חנות רהיטים. במקום לבנות שולחן מאפס, אתם נכנסים, בוחרים אחד שאהבתם, ולוקחים אותו הביתה. 21st.dev זה בדיוק זה, רק לאתרים.
זו ספרייה ענקית של חלקי אתר שכבר עוצבו על ידי מעצבים אמיתיים. אתם בוחרים את החלק שאהבתם, וה-AI מרכיב אותו לאתר שלכם. במקום לבקש מ-Claude שימציא לכם כפתור יפה, אתם נותנים לו כפתור שכבר יפה.
מה יש בפנים
שלושה סוגים של חלקים, וכולם מוכנים לשימוש מיד:
- רכיבים (components) · חתיכות בודדות. כפתור, תפריט, טופס הרשמה, כרטיס מחיר. אלה הלבנים שמהן בונים עמוד.
- טמפלטים (templates) · עמודים שלמים שכבר מוכנים. דף נחיתה, דף תמחור. בסיס מלא שאפשר להתחיל ממנו במקום מדף ריק.
- אנימציות · התנועות הקטנות שגורמות לאתר להרגיש חי. כפתור שמגיב למגע, סקשן שנכנס בעדינות כשגוללים אליו.
איך זה נראה
ככה נראית הספרייה מבפנים. כל ריבוע הוא רכיב מוכן שאפשר ללחוץ עליו ולקחת:
כל אחד מהריבועים האלה הוא עיצוב שמישהו השקיע בו מחשבה. זה בדיוק הדבר שחסר ל-AI כשהוא עובד לבד.
שתי דרכים להשתמש בזה
יש שתי דרכים לקחת חלק מהספרייה ולהכניס אותו לאתר שלכם:
- ידנית · נכנסים לאתר, בוחרים רכיב, ומעתיקים את הקוד והפרומפט שהוא נותן לכם. נעשה את זה צעד אחר צעד בשיעור הבא.
- אוטומטית · מחברים את ה-Magic MCP ל-Claude פעם אחת, ומאז הוא מביא את החלקים לבד בזמן שהוא בונה. זה השיא של הקורס, בשיעור 4.
רגע, זה אמיתי?
כן. 21st.dev הוא פרויקט פעיל שאלפי מפתחים כבר משתמשים בו ביום-יום. זה לא ניסוי קטן, אלא כלי עבודה אמיתי שאפשר לסמוך עליו.
מהרכיב לקוד ולפרומפט
איך לוקחים רכיב מהאתר ומכניסים אותו לאתר שלכם.
הדרך הידנית, וזה בסדר גמור
לפני שמחברים משהו אוטומטי, כדאי להבין איך הספרייה עובדת מבפנים. בשיעור הזה נעשה הכל ביד. זה לוקח דקה, וזה עובד כבר עכשיו בלי שום התקנה.
ארבעה שלבים פשוטים: מוצאים רכיב, בוחרים אותו, לוקחים את הפרומפט, ונותנים ל-Claude.
שלב 1 · מוצאים רכיב
באתר יש תפריט בצד עם כל סוגי הרכיבים, מסודרים לפי קטגוריה. רוצים סקשן פתיחה לעמוד? תיכנסו ל-Heroes. רוצים טבלת מחירים? Pricing Sections. יש שם רקעים, תפריטים, כפתורים, המלצות, וכמעט כל חלק שאתם יכולים לדמיין.
- Heroes · סקשן הפתיחה הגדול שפותח את העמוד
- Pricing Sections · טבלאות תמחור מוכנות
- Backgrounds ו-Shaders · רקעים ואפקטים נעים
- Navigation Menus · תפריטי ניווט לאתר
שלב 2 · בוחרים אחד שאהבתם
כל רכיב מוצג עם תצוגה חיה, אז אתם רואים בדיוק איך הוא נראה ומתנהג עוד לפני שלקחתם אותו. מצאתם משהו שמתאים? לחצו עליו, וייפתח חלון עם הרכיב בגדול.
שלב 3 · לוקחים את הפרומפט
למעלה בחלון של הרכיב יש שני כפתורים שחשובים לנו: Open והכפתור הכחול Copy prompt. הכפתור הכחול הוא הקסם.
כשתלחצו על החץ הקטן ליד Copy prompt, יופיעו שלוש אפשרויות:
- Copy prompt · פרומפט מוכן ל-AI, עם כל ההקשר של הרכיב. זה מה שרובכם תרצו.
- Copy code · הקוד הגולמי של הרכיב, אם בא לכם להדביק אותו ישירות.
- Copy code + demo · הקוד יחד עם דוגמת שימוש.
שלב 4 · נותנים ל-Claude
העתקתם את הפרומפט. עכשיו פשוט הדביקו אותו ל-Claude, ותגידו לו להוסיף את הרכיב לאתר שלכם. זהו. במקום שינחש איך כפתור צריך להיראות, הוא מקבל רכיב מעוצב מראש ומרכיב אותו פנימה.
נסו בעצמכם
תיכנסו ל-21st.dev, תבחרו קטגוריה אחת שמעניינת אתכם, ותלחצו על רכיב. רק תתנסו ללחוץ על Copy prompt ולראות מה מתקבל. בלי לבנות כלום עדיין, רק להרגיש את הזרימה.
לחבר את ה-Magic MCP ל-Claude Code
השיא. מכאן Claude מביא את העיצובים לבד, אוטומטית.
מה זה בכלל נותן
בשיעור הקודם חיפשתם רכיב והעתקתם אותו ביד. עכשיו נדלג על כל זה.
ה-Magic MCP מחבר את הספרייה של 21st.dev ישירות ל-Claude. תחשבו על MCP כמו תוסף ש-Claude מתחבר אליו פעם אחת, ומאז הוא יכול להשתמש בכלי לבד. אחרי החיבור, כשתבקשו מ-Claude לבנות משהו, הוא ייגש לבד לספרייה, יביא רכיבים מעוצבים, וירכיב אותם. בלי שתצטרכו לבקש.
שלב 1 · מפתח API
כדי שהחיבור יעבוד, צריך מפתח אישי. תיכנסו לעמוד ה-MCP של 21st.dev, ותלחצו על הכפתור Generate API Key. המפתח הזה הוא מה שמזהה אתכם מול השירות.
שלב 2 · מתקינים בפקודה אחת
קיבלתם מפתח. עכשיו פתחו את Claude Code והריצו את הפקודה הזו, כשאתם מחליפים את YOUR_API_KEY במפתח שלכם:
npx @21st-dev/cli@latest install claude --api-key YOUR_API_KEYהפקודה הזו מחברת את ה-Magic MCP ל-Claude Code. אחרי שהיא מסיימת, תפעילו מחדש את Claude Code כדי שהחיבור ייכנס לתוקף.
שלב 3 · משתמשים בזה
החיבור מוכן. עכשיו, בכל פעם שתרצו רכיב מעוצב, כתבו ל-Claude את הפקודה /ui ותארו מה אתם רוצים:
/ui create a modern navigation bar with responsive designמה שקורה עכשיו: נפתח דף בדפדפן עם כמה אפשרויות עיצוב מוכנות. אתם בוחרים את זו שאהבתם, והקוד נשלח חזרה ל-Claude אוטומטית. הוא מרכיב אותו לאתר, ואתם רואים תוצאה מעוצבת בלי לעצב כלום בעצמכם.
טעויות נפוצות (כדאי לדעת מראש)
- תבקשו רכיב אחד בכל פעם. אם תבקשו עמוד שלם ומסובך בבת אחת, התוצאה פחות טובה. רכיב-רכיב עובד הכי יפה.
- הכלי עדיין בפיתוח, אז דברים יכולים להשתנות מדי פעם. אם משהו נראה אחרת מהמדריך, זה בסדר.
כמה זה עולה
אפשר להתחיל בחינם. החיפוש וההשראה (Inspiration Search) חינמיים לגמרי. יצירת הרכיבים (Magic Generate, חמש הווריאציות) עובדת עם מכסה חודשית של 100 קרדיטים חינם להתנסות. אם תרצו להשתמש בזה הרבה, יש מנוי בתשלום שמתחיל ב-20 דולר לחודש.
סיימתם את המיני קורס
עכשיו יש לכם דרך אמיתית לתת ל-Claude טעם בעיצוב. הנה מה שאתם יודעים לעשות:
- להבין למה אתרים עם AI יוצאים גנריים
- למצוא רכיבים מעוצבים ב-21st.dev
- לקחת רכיב עם הפרומפט המוכן ולתת אותו ל-Claude
- לחבר את ה-Magic MCP ש-Claude יעשה את זה לבד
הגעתם לכאן מהסרטון? זה המדריך שהבטחתי. עכשיו לכו תבנו משהו שלא נראה כמו כולם.