Magic UI עם קלוד קוד

מה זה Magic UI ולמה אתרים של מותגים מרגישים יקרים?

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

Magic UI היא ספרייה של בדיוק הפרטים האלה. לפי האתר שלה, נכון לנובמבר 2026, יש בה יותר מ-150 רכיבים ואפקטים מונפשים, חינמיים ובקוד פתוח, שבנויים על React, TypeScript, Tailwind CSS ו-Motion. המאגר ב-גיטהאב פתוח ברישיון MIT, ונכון ל-5 בנובמבר 2026 יש לו יותר מ-23 אלף כוכבים.

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

איך מחברים את Magic UI לקלוד קוד?

ל-Magic UI יש שרת MCP רשמי. זה חיבור שנותן לקלוד גישה ישירה לקטלוג: הוא יכול לחפש רכיב לפי מילה, לקרוא את הפרטים שלו ולקבל את הוראות ההתקנה, בלי שתעתיקו שום דבר מהאתר. ב-README מופיעים שלושה כלים: listRegistryItems, searchRegistryItems ו-getRegistryItem.

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

העתקהclaude mcp add magicuidesign -- npx -y @magicuidesign/mcp@latest

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

העתקהnpx @magicuidesign/cli@latest install claude

אחרי שמפעילים מחדש את קלוד קוד, כותבים /mcp ובודקים ש-magicuidesign מופיע ברשימה כמחובר. צריך Node.js מותקן כדי ש-npx יעבוד.

אילו אפקטים הכי שווה להוסיף קודם?

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

• כפתור נוצץ (Shimmer Button): לפי התיעוד, כפתור עם אור שמסתובב סביב המסגרת. שמים אותו רק על הכפתור הראשי, זה שמוביל לרכישה או להשארת פרטים, כדי שהעין תלך אליו.
• פס לוגואים זז (Marquee): רכיב שגולל בלי סוף טקסט, תמונות או סרטונים. הכי נפוץ: לוגואים של לקוחות, או ציטוטים של ממליצים שזזים לאט.
• רשימה חיה (Animated List): פריטים שנכנסים אחד אחרי השני, כמו התראות. מתאים להראות "מה קורה אצלנו": הזמנות, פניות, תורים שנקבעו.

שניים נוספים שכדאי להכיר: Number Ticker שסופר מספר מאפס כשהוא נכנס למסך (מעולה למספר לקוחות או שנות ניסיון), ו-Blur Fade שמכניס טקסט ותמונות בעדינות בזמן גלילה.

איך גורמים לקלוד לצבוע את האנימציות בצבעים של העסק?

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

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

העתקהתשתמש ב-MCP של Magic UI כדי לשדרג את דף הנחיתה שלי. אל תשנה טקסטים, מבנה או תמונות קיימות.

הצבעים של העסק: ראשי #0F4C81, משני #F2A541, רקע #FAFAF7.
הפונט: Heebo לטקסט, Rubik לכותרות.

1. תחליף את הכפתור הראשי ב-Shimmer Button. האור שרץ סביבו בצבע המשני, הכפתור עצמו בצבע הראשי.
2. מתחת לאזור הפתיחה תוסיף Marquee עם הלוגואים מהתיקייה public/logos, בגווני אפור, שהופכים לצבעוניים במעבר עכבר. מהירות איטית.
3. באזור ההמלצות תשתמש ב-Animated List כדי שההמלצות ייכנסו אחת אחרי השנייה.
4. כל אנימציה צריכה לכבד prefers-reduced-motion.
5. בסוף תריץ את האתר, תצלם את הדף במחשב ובטלפון, ותראה לי מה השתנה לפני שאתה ממשיך.

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

אין לכם עדיין צבעים מוגדרים? תבקשו מקלוד לקחת אותם מהלוגו: "תסתכל על הקובץ logo.png ותציע לי צבע ראשי, צבע משני וצבע רקע שמתאימים לו".

איך זה נראה בעסקים אמיתיים?

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

• קליניקה או סטודיו: Number Ticker שסופר את מספר המטופלים או את שנות הניסיון, ופס Marquee עם ציטוטים קצרים של מטופלים.
• חנות אונליין: כפתור "לקנייה" נוצץ רק בעמוד המוצר, ו-Animated List שמראה הזמנות אחרונות בלי שמות, למשל "הזמנה מרחובות, לפני 5 דקות". רק אם הנתונים אמיתיים.
• יועץ או נותן שירות: פס לוגואים של חברות שעבדתם איתן, ו-Blur Fade שמכניס את שלבי העבודה אחד אחרי השני בזמן גלילה.
• מסעדה או בית קפה: Marquee עם תמונות של מנות, איטי מספיק כדי שיהיה נעים להסתכל.

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

מה חשוב לדעת לפני שמשתמשים ב-Magic UI?

• זה לאתרי React: הרכיבים בנויים ל-React עם Tailwind CSS, ומתקינים אותם כמו ב-shadcn/ui. אם דף הנחיתה שלכם הוא קובץ HTML פשוט, קלוד יכול לשחזר את האפקט ב-CSS ו-JavaScript, אבל זה יהיה העתק שלו ולא הרכיב המקורי.
• החינמי מול ה-Pro: יש גם Magic UI Pro בתשלום, עם יותר מ-50 בלוקים ותבניות לדפי נחיתה. כל מה שבמדריך הזה מגיע מהספרייה החינמית.
• פחות זה יותר: שלוש אנימציות בדף זה יוקרה. עשר זה קרקס. תתחילו מהכפתור הראשי ומפס הלוגואים, ורק אם חסר משהו תוסיפו עוד.
• מהירות האתר: כל אפקט מוסיף קוד. אחרי השדרוג תבקשו מקלוד לבדוק שהדף עדיין נטען מהר בטלפון.
• רישיון: הספרייה החינמית ברישיון MIT, כך שמותר להשתמש בה גם באתר מסחרי.

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