עיצוב אתר עם קלוד קוד בעזרת 21st.dev

מה זה 21st.dev?

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

21st.dev היא ספרייה של רכיבי ממשק מוכנים שמעצבים ומפתחים העלו: כותרות עם אנימציה, תפריטים, דפי מחירים, רקעים בתלת מימד, פוטרים ותבניות שלמות. לפי האתר, נכון לאוקטובר 2026 יש שם יותר מ-12,000 רכיבים, תבניות וערכות עיצוב, ומתוכם יותר מ-2,000 בלוקים שיווקיים כמו כותרות ראשיות וסקשנים לדפי נחיתה.

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

למה אתרים שקלוד קוד בונה נראים כמו תבנית?

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

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

גם ב-21st מבינים את זה. בראש דף המחירים של 21st כתוב בגדול Keep the web free of AI slop, כלומר בואו נשמור על אינטרנט בלי אתרים שנראים כמו עוד משהו שה-AI הוציא בדקה.

איך מתחילים עם 21st.dev בלי להתקין כלום?

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

1. נכנסים ל-21st.dev ומחפשים את מה שצריך, למשל hero, pricing או footer.
2. פותחים רכיב שאהבתם ובודקים אותו בתצוגה החיה. שווה לגלול בתוכו ולראות איך הוא זז.
3. לוחצים על הכפתור הכחול Copy prompt. בפעם הראשונה האתר יבקש מכם לפתוח חשבון, ויש גם חשבון חינמי.
4. מדביקים את הפרומפט לקלוד קוד ומוסיפים משפט אחד משלכם.

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

איך מחברים את 21st.dev לקלוד קוד?

העתקה ידנית עובדת מצוין לרכיב אחד. אבל אם אתם רוצים שקלוד יחפש ויבחר רכיבים לבד, מחברים אותו לשרת ה-MCP של 21st. בפשטות, MCP הוא חיבור שנותן לקלוד קוד גישה לכלי חיצוני, ובמקרה הזה לכל הספרייה (כתבתי גם הסבר פשוט על מה זה MCP). ההתקנה לוקחת כמה דקות.

שלב 1: יוצרים מפתח API

נכנסים ל-21st.dev/mcp, מתחברים ויוצרים מפתח API. המפתח הוא מה שמזהה את החשבון שלכם מול הספרייה, ומפתח חינמי מספיק כדי להתחיל.

שלב 2: מריצים פקודה אחת בטרמינל

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

claude mcp add --transport http 21st https://21st.dev/api/mcp --header "x-api-key: YOUR_21ST_KEY"

זאת הפקודה שמופיעה בעמוד ההתקנה של 21st, בלשונית Claude. שימו לב לפרט אחד: כברירת מחדל קלוד קוד שומר את החיבור רק לתיקייה שבה הרצתם את הפקודה. רוצים שהספרייה תהיה זמינה בכל הפרויקטים שלכם? מוסיפים --scope user, ככה כתוב בתיעוד של קלוד קוד:

claude mcp add --scope user --transport http 21st https://21st.dev/api/mcp --header "x-api-key: YOUR_21ST_KEY"

שלב 3: בודקים שהחיבור עובד

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

claude mcp list

ליד כל שרת מופיע סטטוס. אם ליד 21st כתוב Connected, קלוד כבר רואה את כל הספרייה. אם כתוב Failed to connect, תבדקו קודם שהמפתח הועתק נכון, בלי רווחים מיותרים ובלי תווים חסרים.

דרך נוספת: קובץ הגדרות בתוך הפרויקט

עובדים על פרויקט אחד ורוצים שההגדרה תישמר בתוכו? 21st מציעים פקודה שכותבת לכם קובץ .mcp.json לבד:

npx @21st-dev/cli init --client claude --write

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

את המפתח לא משתפים עם אף אחד ולא מעלים לגיטהאב. מי שמחזיק אותו משתמש בחשבון שלכם.

איך משתמשים ב-21st.dev בתוך קלוד קוד?

נותנים לקלוד לבחור לבד

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

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

כשכבר ראיתם בדיוק מה אתם רוצים

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

מה קלוד מקבל מהחיבור

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

אילו רכיבים הכי פופולריים ב-21st.dev?

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

• Scroll Expansion Hero: וידאו קטן שנפתח למסך מלא כשגוללים. 10,349 שמירות.
• Splite: רובוט בתלת מימד עם תאורה, שמגיב לעכבר. 9,275 שמירות.
• Scroll Morph Hero: כרטיסי תמונות שמשנים צורה תוך כדי גלילה. 6,005 שמירות.
• Background Paths: רקע של קווים זורמים מאחורי הכותרת. 5,568 שמירות.
• Cinematic Landing Hero: כותרת ראשית עם הדמיה של אפליקציה בטלפון. 5,464 שמירות.

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

כמה עולה 21st.dev?

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

בתוכנית Builder + AI אפשר לעלות גם ל-1,000 או ל-2,000 קרדיטים בחודש, וקרדיטים נוספים עולים 5 דולר ל-100. אם אתם רק מחפשים רכיבים ונותנים לקלוד קוד להתאים אותם, לא צריך את תוכנית ה-AI בכלל: לפי ה-README של 21st, תוכנית Builder לא כוללת את היצירה עם ה-AI שלהם, וקלוד עושה את ההתאמה בעצמו.

מתי 21st.dev שווה לכם?

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

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

• הרכיבים כתובים ב-React וב-Tailwind CSS. באתר שבנוי ב-React או ב-Next.js הם נכנסים הכי חלק. אם האתר שלכם בנוי אחרת, למשל HTML רגיל, קלוד יצטרך לתרגם את הרכיב, ושווה לבדוק את התוצאה בדפדפן.
• שתי התקנות ביום בחשבון החינמי. בונים דף שלם? תבחרו מראש את הרכיבים הכי חשובים, או תשקלו את Builder לחודש של עבודה אינטנסיבית.
• ה-Magic MCP הישן הוחלף. אם התקנתם פעם את Magic MCP של 21st, היום הוא נקרא 21st MCP, וכל המפתחות הישנים אופסו. צריך ליצור מפתח חדש ב-21st.dev/mcp.
• המפתח הוא סוד. לא בצ'אט, לא בקבוצה ולא בגיטהאב.
• הרכיבים מגיעים מהקהילה. האיכות לא אחידה, אז לפני שעולים לאוויר תבדקו את האתר בטלפון ותראו שהאנימציות לא מאטות אותו.
• מערכת הפעלה. שרת ה-MCP של 21st עובד דרך האינטרנט, אז הוא עובד בכל מחשב שקלוד קוד רץ עליו: מק, ווינדוס או לינוקס. רק האפשרות עם npx צריכה Node.js.