עד היום, כדי לבנות אתר היית צריך אחת משתיים · לשכור מתכנת ולשלם אלפי שקלים, או להיאבק עם בונה אתרים מסורבל ולקבל בסוף משהו שנראה כמו תבנית. קלוד קוד (Claude Code) משנה את כל המשוואה. אתה פותח את קלוד, מדבר איתו 30 שניות על מה שאתה רוצה שיהיה באתר, והוא בונה. תוך כמה דקות יש לך אתר חי עם תמונות, כפתורים, גלריה, טופס יצירת קשר וכפתור וואטסאפ · בלי שכתבת שורת קוד אחת. המדריך הזה עונה בדיוק על השאלה 'איך לבנות אתר עם קלוד קוד' · מההתקנות הראשונות ועד אתר חי באינטרנט. נעבור על 3 השיטות לעיצוב, על הסקילים שהופכים אתר רגיל לאתר פרימיום, ועל הפריסה לענן. בעברית, צעד אחר צעד.
מה יהיה לך בסוף המדריך
- אתר חי באינטרנט · עם כתובת זמנית של Vercel (אפשר לחבר דומיין משלך בהמשך)
- תהליך עבודה מסודר עם קלוד קוד · יודע לתת פרומפט, לעבוד ב-Plan Mode, ומתי לאשר
- 3 שיטות עיצוב באמתחתך · תמלול חופשי לקלוד, השראה מאתר קיים, ורכיבים מ-21st.dev
- סקילים שמותקנים על קלוד · אתר עם נגישות, פרטיות ועיצוב פרימיום ולא AI-גנרי
- גיבוי מלא של הקוד ב-GitHub · אם משהו נשבר, חוזרים אחורה בקליק
- תשתית מסד נתונים מוכנה ב-Supabase · אם תרצה לאסוף מיילים, הזמנות, או כל מידע
מה זה קלוד קוד ולמה הוא מנצח כל בונה אתרים
שלב 1 · 3 הכלים שמתקינים לפני שמתחילים
Vercel
פריסה לענן · האתר חי באינטרנט
ברירת המחדל לפריסת אתרים. בלי Vercel, האתר שקלוד יבנה לך יישב רק על המחשב שלך ב-localhost:3000 · אף אחד אחר לא יראה אותו. ברגע שאתה אומר לקלוד 'תפרוס לוורסל', הוא דוחף את הקוד, פורס לענן, ומחזיר לך כתובת ציבורית שאפשר לשתף.
להרשמה ל-Vercelvercel.comטיפ לסוכנים: אחרי ההרשמה, חוזרים לקלוד → Customize → Connectors → Browse Connectors → Vercel → Connect. ככה קלוד פורס אתרים בקליק.
Supabase
מסד נתונים · זיכרון לאתר
Postgres + Auth + Storage. במקום להפעיל שרת לשמירת מיילים, הזמנות או כל מידע · Supabase נותן לך את כל זה בקליק. אם תרצה טופס יצירת קשר שישמור את כל הפניות, רשימת תפוצה, או חנות קטנה · זו התוכנה שאחראית על שמירת המידע.
להרשמה ל-Supabasesupabase.comטיפ לסוכנים: כמו Vercel · מחברים את הקונקטור ב-Customize → Connectors. שם הקונקטור: Supabase. החשבון החינמי מספיק ל-99% מהפרויקטים האישיים.
GitHub
גיבוי קוד · כמו Google Drive לאתר שלך
ב-GitHub שומרים את כל הקוד של האתר אונליין. אם משהו נשבר, אם קלוד עשה טעות שאי אפשר להחזיר אחורה, או אם אתה רוצה לעבוד על האתר ממחשב אחר · GitHub שומר את כל ההיסטוריה. בכל פעם שתרצה · אומר לקלוד 'תגבה לגיטהאב' והוא דוחף את הגרסה האחרונה.
להרשמה ל-GitHubgithub.comטיפ לסוכנים: המאגרים נשמרים כברירת מחדל ב-Private (פרטי) · רק לך יש גישה. אם תרצה לחלוק את הקוד עם מפתח אחר · אפשר לעבור ל-Public בקליק.
💡 שלושת הכלים יחד · עולים אפס שקל למתחילים. רק אם תרצה אתר עם תעבורה גבוהה (אלפי משתמשים ביום) או מסד נתונים גדול במיוחד · אז יש מסלולים בתשלום. ל-99% מהפרויקטים האישיים והעסקיים הקטנים · החינמי מספיק.
שלב 2 · איך פותחים פרויקט חדש בקלוד
שלב 3 · שיטה 1 · תזרוק לקלוד את כל מה שעולה לך לראש
פרומפט לדוגמה לקלוד קוד (להעתקה ולעריכה)
אני רוצה לבנות אתר שיתאים למדרסים לנעליים. אני רוצה שהאתר יהיה בסגנון שלי · עתידני, נושם, עם פונטים ברורים וקונטרסט מאוד ברור. גוונים: מונוכרום · לבן, שחור, אפור. אקסנט כחול עתידני. כמה שפחות בלגן ויזואלי. אני רוצה תמונות של ספורטאים וחיילים רצים, כאלה שאנשים יבינו את הכיוון. אני רוצה חוויות לקוח · אנשים שמדרגים מגוגל וממליצים על המוצר. אם אין לי את זה · פשוט תשאיר Placeholder ריק שאמלא בעצמי. אני רוצה כפתור וואטסאפ צף שיוכלו לגשת לנציג כמה שיותר מהר. ב-Hero · אני רוצה תמונה של מדרס צף בחלל. אם אתה לא יכול ליצור תמונה כזאת · תיצור פרומפט להזין למודל תמונה. תעבוד ב-Plan Mode. תציג לי את התוכנית. אחרי שאני מאשר · תיגש לבנייה.
🎯 חשוב · תמיד מתחילים ב-Plan Mode (לחצן בתחתית קלוד). זה חוסך ערימות של טוקנים · קלוד מציג תוכנית עבודה לפני שהוא רץ לבנות, ואתה יכול לתקן לפני שהוא משקיע מאמץ. ב-Plan Mode רואים את כל הצבעים, הפונטים וסדר הסקציות · ואז מאשרים.
שלב 4 · שיטה 2 · השראה מאתר קיים
פרומפט להזנה לקלוד יחד עם תמונת ההשראה והלינק (להעתקה)
Check deeply the elements, DOM, sources. Then start to create section by section, one by one, in all aspects · HTML, CSS, JS. Reference site: [מדביקים פה את הלינק לאתר ההשראה] [בנוסף · גוררים את תמונת ה-Full Page לקלוד] תעבוד ב-Plan Mode. תציג לי את התוכנית · באילו סקציות אתה מתחיל, באיזה סדר, איזה רכיבים אתה משכפל. אחרי שאני מאשר · תיגש לבנייה. תבנה את האתר חלקים-חלקים, לא במכה אחת · ככה זה יצא קרוב יותר למקור.
⚠️ זו השראה · לא העתקה. לוקחים את הוויזואל ואת המבנה, אבל מחליפים את התוכן, התמונות והמוצרים לשלך. גם הצבעים והפונטים אפשר להחליף. ככה האתר נראה מקצועי כמו אתר שאהבת · אבל הוא שלך.
שלב 5 · שיטה 3 · רכיבים מ-21st.dev (שיטת פרנקנשטיין)
תהליך עבודה עם 21st.dev
- 1נכנסים ל-21st.dev ונרשמים עם Google (5 שניות)
- 2גולשים בקטגוריות · Hero, Buttons, Cards, Galleries, Animations
- 3מוצאים רכיב שאוהבים · רואים Preview חי בעמוד
- 4לוחצים על הכפתור הכחול Copy Prompt למעלה
- 5חוזרים לקלוד, מדביקים, ולוחצים Enter
- 6קלוד בונה את הרכיב באתר · בודקים ב-localhost:3000 שזה נראה כמו ש-21st הראה
שלב 6 · סקילים · ההבדל בין AI-גנרי לאתר פרימיום
⚖️ חשוב במיוחד · נגישות ופרטיות. בישראל אתר שלא עומד בתקן הנגישות (ת״י 5568) חושף את הבעלים לתביעה של עד 50,000 שקל. מדיניות פרטיות חובה לפי חוק הגנת הפרטיות. אלה לא 'אופציה' · אלה חובה משפטית. הסקילים פותרים את זה בקליק.
agentskills.co.il
מאגר סקילים ישראלי בעברית
המאגר הישראלי · סקילים שמותאמים לרגולציה ישראלית (פרטיות, נגישות), לשפה העברית ולשוק המקומי. כל הסקילים חינמיים. שווה לעבור על הכל לפני שמתחילים אתר חדש לישראלים · במיוחד Israeli Privacy Shield, Israeli Accessibility Compliance ו-Hebrew Content Writer.
ל-agentskills.co.ilagentskills.co.il/heטיפ לסוכנים: מעתיקים את פקודת ההתקנה השחורה מדף הסקיל, מדביקים בקלוד, וקלוד מתקין. הסקיל מופיע אחר כך ב-Customize → Skills.
skills.sh
מאגר Anthropic הרשמי · אלפי סקילים
המאגר הראשי לסקילים מהקהילה. גולשים לפי קטגוריות (Website, Marketing, Productivity), מוצאים סקיל, ובודקים שיש לו תווית Trust Hub Pass (הקוד נבדק ובטוח). שווה במיוחד הסקיל UI/UX Pro Max · 50 סגנונות עיצוב, 161 פלטות צבעים ו-57 זוגות פונטים.
ל-skills.shskills.shטיפ לסוכנים: תמיד לבדוק תווית Trust Hub Pass לפני התקנה · ככה לא מורידים סקיל שעלול לעשות פעולות לא רצויות במחשב.
שלב 7 · פריסה לאוויר · האתר חי באינטרנט
✅ זהו · יש לך אתר חי באינטרנט שבנית עם קלוד קוד, בלי לכתוב שורת קוד אחת. מכאן אפשר להמשיך לשפר · להוסיף עמודים, לחבר טופס לידים ל-Supabase, או להוסיף בלוג. כל שינוי · פשוט אומרים לקלוד, והוא מבצע ופורס מחדש.
כלים וקישורים שימושיים
כל מה שצריך כדי לבנות אתר עם קלוד קוד · במקום אחד
הרחבה מעמיקה · 3 שיטות העיצוב, 9 סקילים מומלצים, ופריסה לענן צעד אחר צעד
www.ai-masterclub.com/guides/vibe-coding-websitesמדריך התקנה מלא לקלוד קוד · נקודת ההתחלה אם עוד לא התקנת
www.ai-masterclub.com/guides/install-claude-codeפריסת האתר לאוויר · כתובת ציבורית בקליק. חינמי למתחילים
vercel.comמסד נתונים לאתר · טפסים, לידים והזמנות. חינמי לרוב הפרויקטים
supabase.comספריית רכיבי עיצוב פרימיום עם פרומפט מוכן לכל רכיב
21st.devמאגר סקילים ישראלי · נגישות, פרטיות וכתיבה בעברית
agentskills.co.il/heשאלות נפוצות · איך לבנות אתר עם קלוד קוד
האם אפשר לבנות אתר עם קלוד קוד בלי לדעת לתכנת?
כן, וזה בדיוק הרעיון. קלוד קוד כותב את כל הקוד מאחורי הקלעים · אתה רק מתאר בשפה רגילה מה אתה רוצה שיהיה באתר. אין צורך בידע טכני, בלימוד שפת תכנות, או בהבנה של איך אתרים בנויים. אם אתה יודע לתאר מה אתה רוצה · אתה יכול לבנות אתר.
כמה זמן לוקח לבנות אתר עם קלוד קוד?
אתר בסיסי או דף נחיתה אפשר להעלות לאוויר תוך פחות משעה · כולל ההתקנות הראשונות. אחרי שהכלים מותקנים, הבנייה עצמה של אתר חדש לוקחת כמה דקות, והשיפורים נעשים בזמן אמת. אתר מורכב יותר עם הרבה עמודים ופונקציות יכול לקחת כמה שעות עבודה מצטברות.
כמה עולה לבנות אתר עם קלוד קוד?
הכלים שצריך (Vercel, Supabase, GitHub) חינמיים למתחילים ומספיקים ל-99% מהפרויקטים האישיים והעסקיים הקטנים. העלות היחידה היא מנוי לקלוד, ובמידת הצורך דומיין בתשלום (כמה עשרות שקלים בשנה). זה לעומת אלפי שקלים שעולה אתר אצל מתכנת.
מה ההבדל בין קלוד קוד לבונה אתרים כמו Wix?
בבונה אתרים אתה מוגבל לתבניות ולרכיבים שהמערכת מאפשרת. עם קלוד קוד אין גבול · כל פיצ'ר שראית באתר מוביל אפשר לבקש וקלוד יבנה אותו, והאתר נשאר שלך לגמרי (הקוד מגובה ב-GitHub). בנוסף, השליטה בעיצוב מדויקת הרבה יותר · משנים כל פרט בשיחה רגילה.
האם האתר שבונים עם קלוד קוד עומד בחוק בישראל?
רק אם מוסיפים את זה. אתר ישראלי חייב לעמוד בתקן הנגישות ת״י 5568 ובחוק הגנת הפרטיות, אחרת יש חשיפה לתביעה של עד 50,000 שקל. הפתרון הוא להתקין סקילים ייעודיים (כמו Israeli Accessibility Compliance ו-Israeli Privacy Shield ממאגר agentskills.co.il) · קלוד מטמיע נגישות, מדיניות פרטיות ו-banner עוגיות אוטומטית.
מה עושים אם קלוד שובר משהו באתר?
בדיוק בשביל זה מגבים ל-GitHub. בכל פעם שמשהו עובד טוב, אומרים לקלוד 'תגבה לגיטהאב'. אם בהמשך קלוד עשה טעות שלא מצליחים לתקן · חוזרים לגרסה הקודמת ששמורה ב-GitHub בקליק. זו רשת הביטחון שמאפשרת להתנסות בלי פחד.
המדריך הזה הוא הבסיס. בסדנת Claude Code אנחנו בונים את הכל מאפס, צעד אחר צעד, ביחד · התקנה והגדרה, בניית Skills, סוכן וואטסאפ חי, ומפגש בונוס שלם על בניית אתרים ב-3 שיטות (Vibe Coding, השראה, 21st.dev). 4 מפגשים מוקלטים עם גישה לכל החיים, וכל הסקילים והפרומפטים מוכנים לקופי-פייסט. אם אתה רוצה לבנות אתרים עם קלוד קוד כמו שצריך · זה המקום להתחיל.
עזר לכם המדריך?
דרגו את המאמר ועזרו לנו לשפר אותו.
יש לכם שאלה?
שאלו כל דבר על המדריך ונחזור אליכם.