תסתכלו רגע על האתר שמופיע פה למטה. נראה כמו עבודה של סטודיו עיצוב מקצועי, נכון?
אז זהו, שלא. הוא נבנה ב-3 שלבים פשוטים, על ידי בן אדם אחד, בלי לדעת לעצב ובלי לכתוב שורת קוד. במאמר הזה אני מראה לכם בדיוק איך לעשות את זה גם.
רגע, על מה אנחנו מדברים פה?
הכלי המרכזי שאנחנו עובדים איתו הוא Claude Code, הסוכן הכי חזק היום של Anthropic לבניית פרויקטים. אם זו פעם ראשונה שאתם נתקלים בו, יש לי מדריך מלא לקלוד קוד שיעשה לכם סדר, גם אם אתם לא מתכנתים.
מושג נוסף שיופיע פה הרבה הוא סקיל. סקיל הוא כמו "מומחיות" שמחברים לקלוד וגורמת לו להתנהג בצורה ספציפית. במקרה שלנו, אנחנו מחברים סקיל שגורם לקלוד לחשוב כמו מעצב מקצועי. אם אתם רוצים את ההסבר המלא, יש לי מדריך נפרד על סקילס שמסדר את כל הנושא.
טוב, מספיק הקדמות.
שלב 1: התקנת הסקיל UI UX Pro Max
זה השלב שהופך את קלוד ממתכנת רגיל למעצב עם טעם.
הסקיל הזה הוא בעצם "ספר חוקים של מעצב מקצועי" שאנחנו טוענים לקלוד. ברגע שהוא מותקן, בכל פעם שתבקשו מקלוד לבנות ממשק הוא יעבוד לפי עקרונות ברורים: היררכיה ויזואלית נכונה (איפה העין נופלת קודם), פלטות צבעים מתואמות, טיפוגרפיה מקצועית, וריווח שמרגיש נשימה במקום צפיפות. בלי שאתם צריכים לדעת מילה אחת על עיצוב.
ההתקנה לוקחת בערך 10 שניות. תיכנסו לקלוד דסקטופ ותלחצו על הקטגוריה Code בראש המסך:
ואז תעתיקו את הפרומפט הבא ותדביקו לקלוד:
תתקין לי את הסקיל הזה: https://github.com/nextlevelbuilder/ui-ux-pro-max-skillזהו. קלוד יוריד את הסקיל ויחבר אותו אליו אוטומטית, ומהרגע הזה הוא חושב כמו מעצב מקצועי.
שלב 2: התקנת ה-MCP של Magic
עכשיו אנחנו נותנים לקלוד גם גישה לספריית קומפוננטות מוכנות.
לפני שמתחילים, מילה קצרה על MCP. MCP (ראשי תיבות של Model Context Protocol) זה בעצם "שקע" שדרכו אפשר לחבר לקלוד יכולות חיצוניות: ספריות, כלים, או שירותים. תחשבו על זה כמו תוסף לדפדפן. ברגע שמתקינים את התוסף, הדפדפן מקבל יכולות שלא היו לו קודם. ככה בדיוק זה עם MCP בקלוד.
ה-MCP שאנחנו מתקינים עכשיו נקרא Magic, והוא מגיע מהאתר 21st.dev. זאת אחת הספריות הגדולות והעדכניות בעולם של רכיבי UI מקצועיים, אלה בעצם כמו חלקי פאזל יפים ומוכנים, שאפשר לחבר אותם לאתר שלם, לשנות ולערוך. והמטרה של כל התהליך הזה הוא ליצור אתר מיוחד ובולט, שלא נראה כמו כל אחד מהאתרים עם העיצובים הגנרי שכלי בינה מלאכותית מייצרים לנו היום. אז, אחרי שמחברים את ה-MCP, קלוד יכול למשוך ישירות רכיבים מהקטלוג של 21st.dev ולשלב אותם באתר שאתם בונים.
ההתקנה לוקחת בערך דקה:
1. תיכנסו ל-21st.dev, ובתפריט הצדדי משמאל תלחצו על Magic Chat. זה החלק שמאפשר לכם לדבר עם המערכת ולקבל קומפוננטות לפי בקשה.
2. בעמוד שנפתח, תלחצו על הכפתור Install MCP. זה יפתח בפניכם הוראות התקנה לפי הכלי שאתם משתמשים בו.
3. תוודאו שהטאב Claude Code מסומן (למעלה משמאל), ותעתיקו את הפקודה שמופיעה. היא מתחילה ב-claude mcp add magic ומסתיימת במפתח API ייחודי בשבילכם, שמשמש כסוג של "סיסמה" שמזהה אתכם מול 21st.dev.
4. תחזרו לקלוד ותדביקו את הפקודה כמות שהיא. אפשר אפילו לעטוף אותה במשפט פתיחה כדי שיהיה ברור לקלוד מה לעשות:
תתקין את ה-MCP הזה: <תדביקו את הפקודה>קלוד יריץ את הפקודה, ה-MCP יחובר, וזהו. עכשיו יש לקלוד גם את "המוח של מעצב" (הסקיל) וגם גישה ישירה לקטלוג ענק של רכיבים מוכנים (ה-MCP). השילוב הזה הוא בעצם כל הקסם.
שלב 3: לבקש מקלוד לבנות את האתר
עכשיו כל מה שנשאר זה לתת לקלוד פרומפט. אבל פה יש משהו שאני רוצה שתשימו לב אליו: ככל שהפרומפט יותר מדויק, התוצאה יותר טובה בפער.
במקום לכתוב סתם "תבנה לי אתר לקורס שלי", תכתבו משהו כזה:
תבנה לי דף נחיתה לקורס AI לאנשי עסקים.
הקהל שלי: בעלי עסקים בני 35-55, בלי רקע טכני, חוששים מבינה מלאכותית.
מבנה: אזור פתיחה עם וידאו, סקציית הבטחות, עדויות אמיתיות, תמחור, שאלות נפוצות, CTA אחרון.
סגנון: מודרני, רקע כהה, הדגשות בצבע כתום, טיפוגרפיה גדולה.קלוד ייקח את הפרומפט, יחיל את עקרונות הסקיל, ימשוך את הקומפוננטות הרלוונטיות, ויבנה לכם את האתר. בלי שאתם נוגעים בקוד אפילו פעם אחת. אחרי שתראו את התוצאה הראשונה, אתם יכולים פשוט לבקש שינויים ("תשנה את הצבעים לכחול", "תוסיף עוד עדות"), והוא ימשיך מהמקום שעצר.
בונוס: ככה תיקחו השראה מקטלוג הקומפוננטות
לפני שאתם בכלל יושבים לכתוב את הפרומפט, תעשו דבר אחד: תיכנסו לקטלוג של 21st.dev. שם יש מאות רכיבים מוכנים בקטגוריות שונות, מאזורי פתיחה ועד אזורי תמחור, אנימציות גלילה, ואפילו רקעי שיידר אינטראקטיביים.
תעברו על הקטלוג, תסמנו 2-3 דברים שאתם אוהבים, ותגידו לקלוד בפרומפט "תשתמש בקומפוננטה כזו וכזו" (אפשר אפילו לתת לו את הקישור הישיר לקומפוננטה הספציפית). ככה אתם הופכים ממישהו שמקבל אתר גנרי, למישהו שמכוון את התוצאה לכיוון ספציפי וייחודי.
וזה לא חייב להיות אתר שלם. גם רכיבים בודדים אפשר לבקש מקלוד לבנות בדיוק לפי הסגנון שאתם רוצים, כמו תיבת הקלט הזו:
הנקודה האחרונה
הקצב של AI במיוחד בכל מה שקשור לבניית מוצרים ואתרים פשוט משוגע. תהליך שלפני שנה דרש צוות שלם והרבה כסף, אתם יכולים לעשות עכשיו לבד באחר הצהריים אחד, ועם תוצאה לא פחות טובה.
וזה רק קצה המזלג של מה שאפשר לעשות עם קלוד…
כרגע אני עובד על משהו חדש. לא הכשרה רגילה, ולא קורס דיגיטלי. ממש מערכת הפעלה לעידן החדש של הבינה המלאכותית. שיטה שלמה שתהפוך אתכם למומחים בקלוד ובעידן ה-AI החדש. אני עוד לא מפרסם את זה בשום מקום, אבל פתחתי רשימת המתנה. אם בא לכם להיות מהראשונים שיודעים מתי זה יוצא לאוויר, תרשמו פה.
