מדריך · בניית אתר עם קלוד קוד

איך לבנות אתר עם קלוד קוד · המדריך המעשי בעברית

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

אם אתם רציניים על Claude Code

יצרתי סדנת Claude Code
מאפס ועד אתר באוויר

המדריך הזה כיסה את הבסיס לבניית אתר עם קלוד קוד. בסדנה אתם מקבלים את כל היסודות: התקנה, CLAUDE.md, סקילים, סוכנים, ובניית אתרים.

🔊 לחצו על הסרטון כדי להפעיל את הקול

סדנה מוקלטת · כניסה חד-פעמית

₪297

₪597

גישה לכל החיים · ללא חידוש אוטומטי

כולל כל הסקילים, הפרומפטים, וההקלטות של 4 המפגשים

אני רוצה לראות את הסדנה ←

14 ימי החזר כספי · בלי שאלות

מה תקבלו בסדנה

התקנת Claude Code מאפס · כולל CLAUDE.md מותאם אישית
בניית Skills · יכולות-על שגורמות לקלוד לעשות מטלות שוב ושוב
סוכן וואטסאפ שסוגר פגישות ויוצר מטלות ביומן · בנייה חיה
מפגש בונוס · בניית אתרים בשלוש שיטות (Vibe Coding, השראה, 21st.dev)
4 מפגשים מוקלטים · גישה לכל החיים, צפייה בקצב שלכם
סקילים ופרומפטים מוכנים לקופי-פייסט · כל מה שראינו בסדנה
ראשונים בתור לסדנאות הבאות · פיתוח אפליקציות · Codex · יצירת וידאו

By עמיחי שקלPublished on 25.06.2026Updated on 25.06.2026

עד היום, כדי לבנות אתר היית צריך אחת משתיים · לשכור מתכנת ולשלם אלפי שקלים, או להיאבק עם בונה אתרים מסורבל ולקבל בסוף משהו שנראה כמו תבנית. קלוד קוד (Claude Code) משנה את כל המשוואה. אתה פותח את קלוד, מדבר איתו 30 שניות על מה שאתה רוצה שיהיה באתר, והוא בונה. תוך כמה דקות יש לך אתר חי עם תמונות, כפתורים, גלריה, טופס יצירת קשר וכפתור וואטסאפ · בלי שכתבת שורת קוד אחת. המדריך הזה עונה בדיוק על השאלה 'איך לבנות אתר עם קלוד קוד' · מההתקנות הראשונות ועד אתר חי באינטרנט. נעבור על 3 השיטות לעיצוב, על הסקילים שהופכים אתר רגיל לאתר פרימיום, ועל הפריסה לענן. בעברית, צעד אחר צעד.

מה יהיה לך בסוף המדריך

אתר חי באינטרנט · עם כתובת זמנית של Vercel (אפשר לחבר דומיין משלך בהמשך)
תהליך עבודה מסודר עם קלוד קוד · יודע לתת פרומפט, לעבוד ב-Plan Mode, ומתי לאשר
3 שיטות עיצוב באמתחתך · תמלול חופשי לקלוד, השראה מאתר קיים, ורכיבים מ-21st.dev
סקילים שמותקנים על קלוד · אתר עם נגישות, פרטיות ועיצוב פרימיום ולא AI-גנרי
גיבוי מלא של הקוד ב-GitHub · אם משהו נשבר, חוזרים אחורה בקליק
תשתית מסד נתונים מוכנה ב-Supabase · אם תרצה לאסוף מיילים, הזמנות, או כל מידע

מה זה קלוד קוד ולמה הוא מנצח כל בונה אתרים

קלוד קוד (Claude Code) הוא סוכן AI של Anthropic שיודע לבנות, לערוך ולפרוס אתרים ואפליקציות מתוך שיחה רגילה איתך. אתה לא לומד קוד, לא בוחר תבניות, ולא נאבק עם עורך גרור-ושחרר · אתה פשוט מתאר מה אתה רוצה, וקלוד כותב את הקוד מאחורי הקלעים. ההבדל מבונה אתרים רגיל הוא מהותי · בבונה אתרים אתה מוגבל למה שהמערכת מאפשרת. עם קלוד קוד אין גבול · כל פיצ'ר שראית באתר מוביל אפשר לבקש, וקלוד יבנה אותו. וכשמשהו לא מוצא חן בעיניך, אתה פשוט אומר לו 'תשנה את הצבע הזה', 'תזיז את הסקציה למעלה', והוא מתקן בזמן אמת. אם עוד לא התקנת את קלוד קוד · יש לנו מדריך התקנה נפרד שמראה בדיוק איך מתחילים. כאן נצא מנקודת הנחה שהוא כבר מותקן אצלך.

שלב 1 · 3 הכלים שמתקינים לפני שמתחילים

לפני שמבקשים מקלוד לבנות אתר, יש 3 חשבונות חינמיים שצריך לפתוח. כל אחד פותר בעיה אחרת · Vercel מפרסם את האתר לאוויר, Supabase שומר מסד נתונים, GitHub מגבה את כל הקוד. ההרשמה לכל אחד היא קליק עם חשבון Google. אחרי ההרשמה, מחברים את הקונקטור של כל כלי בקלוד קוד · ככה קלוד יכול לעבוד איתם ישירות.

Vercel

פריסה לענן · האתר חי באינטרנט

ברירת המחדל לפריסת אתרים. בלי Vercel, האתר שקלוד יבנה לך יישב רק על המחשב שלך ב-localhost:3000 · אף אחד אחר לא יראה אותו. ברגע שאתה אומר לקלוד 'תפרוס לוורסל', הוא דוחף את הקוד, פורס לענן, ומחזיר לך כתובת ציבורית שאפשר לשתף.

להרשמה ל-Vercelvercel.com

טיפ לסוכנים: אחרי ההרשמה, חוזרים לקלוד → Customize → Connectors → Browse Connectors → Vercel → Connect. ככה קלוד פורס אתרים בקליק.

Vercel · מפרסם את האתר שבנית עם קלוד קוד לאוויר בקליק, עם כתובת ציבורית

Supabase

מסד נתונים · זיכרון לאתר

Postgres + Auth + Storage. במקום להפעיל שרת לשמירת מיילים, הזמנות או כל מידע · Supabase נותן לך את כל זה בקליק. אם תרצה טופס יצירת קשר שישמור את כל הפניות, רשימת תפוצה, או חנות קטנה · זו התוכנה שאחראית על שמירת המידע.

להרשמה ל-Supabasesupabase.com

טיפ לסוכנים: כמו Vercel · מחברים את הקונקטור ב-Customize → Connectors. שם הקונקטור: Supabase. החשבון החינמי מספיק ל-99% מהפרויקטים האישיים.

Supabase · מסד הנתונים שמאחורי טפסים, לידים והזמנות באתר שבונים עם קלוד קוד

GitHub

גיבוי קוד · כמו Google Drive לאתר שלך

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

להרשמה ל-GitHubgithub.com

טיפ לסוכנים: המאגרים נשמרים כברירת מחדל ב-Private (פרטי) · רק לך יש גישה. אם תרצה לחלוק את הקוד עם מפתח אחר · אפשר לעבור ל-Public בקליק.

GitHub · שומר את כל היסטוריית הקוד של האתר, כדי שתמיד אפשר לחזור אחורה

💡 שלושת הכלים יחד · עולים אפס שקל למתחילים. רק אם תרצה אתר עם תעבורה גבוהה (אלפי משתמשים ביום) או מסד נתונים גדול במיוחד · אז יש מסלולים בתשלום. ל-99% מהפרויקטים האישיים והעסקיים הקטנים · החינמי מספיק.

שלב 2 · איך פותחים פרויקט חדש בקלוד

כל פעם שמתחילים פרויקט חדש (אתר, אפליקציה, אוטומציה) · פותחים תיקייה נפרדת. ככה קלוד יודע על איזה פרויקט הוא עובד, והקבצים לא מתבלבלים עם פרויקטים אחרים. 1. בקלוד · לוחצים על Code (לשונית עליונה) → New session 2. מעל תיבת הטקסט · לוחצים על שם התיקייה הנוכחית 3. נפתח Finder · יוצרים New Folder (משמאל למטה) 4. נותנים שם (לדוגמה: 'אתר מדרסים') 5. בוחרים את התיקייה החדשה → Open

סדנת Claude Code

רוצים לשלוט ב-Claude Code מאפס?

המדריך הזה נתן לכם את הבסיס. בסדנת Claude Code המלאה בונים יחד שלב אחר שלב: התקנה, CLAUDE.md, סקילים, סוכנים ואתר חי באוויר. 4 מפגשים מוקלטים, גישה לכל החיים.

אני רוצה לראות את הסדנה

שלב 3 · שיטה 1 · תזרוק לקלוד את כל מה שעולה לך לראש

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

פרומפט לדוגמה לקלוד קוד (להעתקה ולעריכה)

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

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

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

אני רוצה חוויות לקוח · אנשים שמדרגים מגוגל וממליצים על המוצר. אם אין לי את זה · פשוט תשאיר Placeholder ריק שאמלא בעצמי.

אני רוצה כפתור וואטסאפ צף שיוכלו לגשת לנציג כמה שיותר מהר.

ב-Hero · אני רוצה תמונה של מדרס צף בחלל. אם אתה לא יכול ליצור תמונה כזאת · תיצור פרומפט להזין למודל תמונה.

תעבוד ב-Plan Mode. תציג לי את התוכנית. אחרי שאני מאשר · תיגש לבנייה.

🎯 חשוב · תמיד מתחילים ב-Plan Mode (לחצן בתחתית קלוד). זה חוסך ערימות של טוקנים · קלוד מציג תוכנית עבודה לפני שהוא רץ לבנות, ואתה יכול לתקן לפני שהוא משקיע מאמץ. ב-Plan Mode רואים את כל הצבעים, הפונטים וסדר הסקציות · ואז מאשרים.

שלב 4 · שיטה 2 · השראה מאתר קיים

ראית אתר שאהבת? Apple, Notion, Linear, או כל אתר אחר? אפשר לקבל ממנו השראה ולבנות אתר באותו סגנון. קלוד יכול לראות תמונה של אתר ולשכפל את הוויזואל. כדי שזה יצא הכי קרוב למקור · לא נותנים לו רק את התמונה, אלא גם את הלינק. איך מקבלים תמונה של אתר שלם? תוסף Chrome בשם GoFullPage. נכנסים לאתר, לוחצים על האייקון · הוא גולל את האתר אוטומטית, מצלם כל סקציה, ומחבר לתמונה אחת ארוכה. מורידים כ-PNG ומזינים לקלוד יחד עם הלינק.

פרומפט להזנה לקלוד יחד עם תמונת ההשראה והלינק (להעתקה)

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 (שיטת פרנקנשטיין)

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

תהליך עבודה עם 21st.dev

1נכנסים ל-21st.dev ונרשמים עם Google (5 שניות)
2גולשים בקטגוריות · Hero, Buttons, Cards, Galleries, Animations
3מוצאים רכיב שאוהבים · רואים Preview חי בעמוד
4לוחצים על הכפתור הכחול Copy Prompt למעלה
5חוזרים לקלוד, מדביקים, ולוחצים Enter
6קלוד בונה את הרכיב באתר · בודקים ב-localhost:3000 שזה נראה כמו ש-21st הראה

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

לצפייה בסדנה

21st.dev · אלפי רכיבי עיצוב פרימיום, כל אחד עם פרומפט מוכן להעתקה לקלוד קוד

שלב 6 · סקילים · ההבדל בין AI-גנרי לאתר פרימיום

אם תבנה אתר רק עם 3 השיטות למעלה · יצא לך אתר, אבל הוא ייראה דומה למיליון אתרים אחרים. קלוד משתמש בצבעים, פונטים ולייאאוטים די צפויים · בדיוק כמו שמודלי תמונה יוצרים 'AI-look'. ההבדל בין AI-גנרי לאתר פרימיום נמצא ב-Skills. סקיל הוא קובץ הוראות שמרחיב את היכולות של קלוד. סקיל לעיצוב מסביר לקלוד אילו צבעים לבחור ואיך לבנות היררכיה ויזואלית. סקיל לנגישות מוודא עמידה בתקן ת״י 5568. סקיל לפרטיות מוסיף תקנון, מדיניות עוגיות ו-banner. מתקינים פעם אחת · קלוד מפעיל אוטומטית בכל פרויקט עתידי.

ההבדל בין AI-גנרי (משמאל) לפרימיום (מימין) · בדיוק מה שהסקילים עושים לאתר שלך

⚖️ חשוב במיוחד · נגישות ופרטיות. בישראל אתר שלא עומד בתקן הנגישות (ת״י 5568) חושף את הבעלים לתביעה של עד 50,000 שקל. מדיניות פרטיות חובה לפי חוק הגנת הפרטיות. אלה לא 'אופציה' · אלה חובה משפטית. הסקילים פותרים את זה בקליק.

agentskills.co.il

מאגר סקילים ישראלי בעברית

המאגר הישראלי · סקילים שמותאמים לרגולציה ישראלית (פרטיות, נגישות), לשפה העברית ולשוק המקומי. כל הסקילים חינמיים. שווה לעבור על הכל לפני שמתחילים אתר חדש לישראלים · במיוחד Israeli Privacy Shield, Israeli Accessibility Compliance ו-Hebrew Content Writer.

ל-agentskills.co.ilagentskills.co.il/he

טיפ לסוכנים: מעתיקים את פקודת ההתקנה השחורה מדף הסקיל, מדביקים בקלוד, וקלוד מתקין. הסקיל מופיע אחר כך ב-Customize → Skills.

agentskills.co.il · מאגר סקילים בעברית לנגישות, פרטיות וכתיבה לאתר ישראלי

skills.sh

מאגר Anthropic הרשמי · אלפי סקילים

המאגר הראשי לסקילים מהקהילה. גולשים לפי קטגוריות (Website, Marketing, Productivity), מוצאים סקיל, ובודקים שיש לו תווית Trust Hub Pass (הקוד נבדק ובטוח). שווה במיוחד הסקיל UI/UX Pro Max · 50 סגנונות עיצוב, 161 פלטות צבעים ו-57 זוגות פונטים.

ל-skills.shskills.sh

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

שלב 7 · פריסה לאוויר · האתר חי באינטרנט

עד עכשיו האתר רץ רק אצלך על המחשב ב-localhost. כדי שכל העולם יראה אותו · פורסים אותו לוורסל. זה החלק הכי קל · אומרים לקלוד משפט אחד. 1. אומרים לקלוד: 'תגבה את הפרויקט לגיטהאב ואז תפרוס לוורסל' 2. קלוד דוחף את הקוד ל-GitHub (גיבוי מלא) ומפרסם ל-Vercel 3. תוך דקה-שתיים · קלוד מחזיר לך כתובת ציבורית (למשל my-site.vercel.app) 4. פותחים את הכתובת בדפדפן · האתר חי באוויר ואפשר לשתף אותו 5. רוצה דומיין משלך? קונים דומיין ומחברים ב-Vercel → Domains תוך כמה דקות

סדנת Claude Code

רוצים לשלוט ב-Claude Code מאפס?

אני רוצה לראות את הסדנה

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

מ-localhost ריק על המחשב (משמאל) לאתר פרימיום חי באינטרנט (מימין) · זה כל המסע

כלים וקישורים שימושיים

כל מה שצריך כדי לבנות אתר עם קלוד קוד · במקום אחד

המדריך המלא ל-Vibe Coding

הרחבה מעמיקה · 3 שיטות העיצוב, 9 סקילים מומלצים, ופריסה לענן צעד אחר צעד

www.ai-masterclub.com/guides/vibe-coding-websites

איך מתקינים את קלוד קוד

מדריך התקנה מלא לקלוד קוד · נקודת ההתחלה אם עוד לא התקנת

www.ai-masterclub.com/guides/install-claude-code

Vercel

פריסת האתר לאוויר · כתובת ציבורית בקליק. חינמי למתחילים

vercel.com

Supabase

מסד נתונים לאתר · טפסים, לידים והזמנות. חינמי לרוב הפרויקטים

supabase.com

21st.dev

ספריית רכיבי עיצוב פרימיום עם פרומפט מוכן לכל רכיב

21st.dev

agentskills.co.il

מאגר סקילים ישראלי · נגישות, פרטיות וכתיבה בעברית

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 מפגשים מוקלטים עם גישה לכל החיים, וכל הסקילים והפרומפטים מוכנים לקופי-פייסט. אם אתה רוצה לבנות אתרים עם קלוד קוד כמו שצריך · זה המקום להתחיל.