תחשבו על איך הייתם בונים אתר עד היום: ניגשים לבונה אתרים, מסבירים מה אתם רוצים, מקבלים סקיצה, שולחים פידבק, מקבלים גרסה, שוב פידבק. שבוע של פינג-פונג ו-3,000 שקל לפחות. בכל פעם. Vibe Coding הופך את כל המשחק. אתם פותחים את Claude Code, מדברים אליו במשך 30 שניות על מה שאתם רוצים שיהיה באתר, והוא בונה. תוך כמה דקות יש לכם אתר חי עם תמונות, כפתורים, גלריה, חוויות לקוח. כל מה שאתם רגילים לראות באתר רגיל. המדריך הזה הוא תמצית של מה שלמדנו במפגש 4 של סדנת Claude Code. נלמד את 3 השיטות לעיצוב אתר, אילו 3 כלים חייבים להתקין לפני שמתחילים, איך משדרגים את הוויזואל מ-AI-גנרי לאתר פרימיום, ואיך פורסים את האתר לאוויר ב-Vercel.
מה יהיה לכם בסוף המדריך
- אתר חי באינטרנט · עם דומיין זמני של Vercel (אפשר לחבר דומיין משלכם בהמשך)
- תהליך עבודה מסודר עם Claude Code · יודעים איך לתת לו פרומפט, איך לעבוד ב-Plan Mode, מתי לאשר
- 3 שיטות עיצוב באמתחתכם · תמלול חופשי לקלוד, השראה מאתר קיים, ורכיבים מ-21st.dev
- סקילים שמותקנים על קלוד · אתר עם נגישות, פרטיות, ועיצוב פרימיום ולא AI-גנרי
- גיבוי מלא של הקוד ב-GitHub · אם משהו נשבר, חוזרים אחורה בקליק
- תשתית מסד נתונים מוכנה ב-Supabase · אם תרצו לאסוף מיילים, לשמור הזמנות, או כל מידע
שלב 1 · 3 הכלים שמתקינים לפני שמתחילים
Vercel
פריסה לענן · האתר חי באינטרנט
ברירת המחדל לפריסת אתרים סטטיים ו-Next.js. בלי Vercel, האתר שקלוד יבנה לכם יישב רק על המחשב שלכם ב-localhost:3000 · אף אחד אחר לא יראה אותו. רגע שאתם אומרים לקלוד 'תפרוס לוורסל', הוא דוחף את הקוד, פורס לענן, ומחזיר לכם URL ציבורי שאפשר לשתף.
להרשמה ל-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 · שיטה 1 · תזרקו את כל מה שעולה לכם לראש (תמלול למודל)
Speakly
כלי תמלול · מדברים, נוצר טקסט מסודר
התוכנה הטובה ביותר לתמלול עברית מדוברת לטקסט. לוחצים על מקש קיצור במקלדת (אצלי F-Key), המיקרופון נפתח, מדברים את כל מה שעולה על הראש, משחררים. הטקסט מסודר ומדויק נכנס אוטומטית לכל יישום שעובדים איתו · קלוד, צ'אט, מייל, וורד.
להרשמה ל-Speakly (חברות חינם)www.genspark.ai/speakly/invite/ODYwNWViYWVMOWYyOEw4NGY0TGRjMjQwN2RlYjA0YUxmZjAzטיפ לסוכנים: המקש המומלץ ב-Mac: F-Key (Fn). ב-Windows · אפשר להגדיר Caps Lock או מקש אחר. הקיצור נוח · רק תופסים, מדברים, משחררים.
איך להתחיל פרויקט חדש בקלוד
פרומפט לדוגמה · אתר למדרסים בהתאמה אישית (להעתקה ולעריכה)
אני רוצה לבנות אתר שיתאים למדרסים לנעליים. אני רוצה שהאתר יהיה בסגנון שלי · עתידני, נושם, עם פונטים ברורים וקונטרסט מאוד מאוד ברור. גוונים: מונוכרום · לבן, שחור, אפור. אקסנט כחול עתידני. אני רוצה כמה שפחות בלגן ויזואלי. אני רוצה שיהיה שם תמונות של ספורטאים, אולי תמונות של חיילים רצים, כאלה שאנשים יבינו את הכיוון. אני רוצה שיהיה שם חוויות לקוח · אנשים שמדרגים מגוגל וממליצים על המוצר. אני רוצה אולי מקומות שבהם יהיה סרטון של לקוח שממליץ. אם אין לי את זה · פשוט תשאיר Placeholder ריק שאוכל למלא אותו בעצמי. אני רוצה שיהיה כפתור גישה לוואטסאפ שיוכלו לגשת לנציג כמה שיותר מהר. ב-Hero · אני רוצה שיהיה תמונה של מדרס צף בחלל. אם אתה לא יכול ליצור לי תמונה כזאת · פשוט תיצור פרומפט להזין למודל תמונה ונייצר את זה. תעבוד ב-Plan Mode. תציג לי את התוכנית. אחרי שאני מאשר · תיגש לבנייה.
🎯 חשוב · תמיד מתחילים ב-Plan Mode (לחצן בתחתית קלוד). זה חוסך לכם ערימות של טוקנים · הקלוד מציג תוכנית עבודה לפני שהוא רץ לבנות, ואתם יכולים לתקן לפני שהוא משקיע מאמץ. ראינו ב-Plan Mode איך הוא מציג את כל הצבעים, הפונטים, סדר הסקציות · ואז מאשרים.
שלב 3 · שיטה 2 · השראה מאתר קיים
GoFullPage
תוסף Chrome · צילום מסך מלא של אתר
תוסף Chrome חינמי שמצלם את כל הדף בתמונה אחת ארוכה. לוחצים על האייקון של המצלמה · הוא גולל את כל האתר אוטומטית, מצלם כל סקציה, ומאחד לתמונה אחת רציפה. אפשר להוריד כ-PNG או PDF. שימושי במיוחד לקבלת השראה מאתרים מבלי לעשות 20 צילומי מסך ידניים.
להתקנת GoFullPage לכרוםgofullpage.comטיפ לסוכנים: אחרי הצילום · התוסף פותח עמוד חדש עם התמונה המלאה. לוחצים על אייקון ההורדה (חץ למטה) ובוחרים 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. תציג לי את התוכנית · באילו סקציות אתה מתחיל, באיזה סדר, איזה רכיבים אתה משכפל. אחרי שאני מאשר · תיגש לבנייה. תבנה את האתר חלקים-חלקים, לא במכה אחת · ככה זה יצא קרוב יותר למקור.
⚠️ זאת השראה · לא העתקה. אנחנו לוקחים את הוויזואל ואת המבנה, אבל מחליפים את התוכן, התמונות, והמוצרים לשלנו. גם הצבעים והפונטים אפשר להחליף. ככה האתר שלכם נראה מקצועי כמו אתר שאהבתם · אבל הוא שלכם.
שלב 4 · שיטה 3 · רכיבים מ-21st.dev (שיטת פרנקנשטיין)
21st.dev
ספריית רכיבים · עיצובים פרימיום מקהילה
אלפי רכיבי UI מקהילת מעצבים מובילים. כל רכיב כולל preview חי, קוד, ו-Copy Prompt button. לוחצים על הכפתור · הפרומפט מועתק. מדביקים בקלוד · קלוד בונה את הרכיב באתר שלכם. רוב הרכיבים חינמיים, חלק פרימיום.
ל-21st.dev21st.devטיפ לסוכנים: טיפ של זהב · לפני שלוקחים רכיב, לחשוב אם הוא משתלב עם השפה העיצובית הכללית של האתר. רכיב יפה שלא מתאים · הורס את הקוהרנטיות. עדיף 3 רכיבים שמתחברים מאשר 10 פיזורים.
תהליך עבודה עם 21st.dev
- 1נכנסים ל-21st.dev. נרשמים עם Google (תהליך של 5 שניות)
- 2גולשים בקטגוריות · Hero, Buttons, Cards, Galleries, Animations, וכו'
- 3מוצאים רכיב שאוהבים · רואים Preview חי בעמוד
- 4לוחצים על הכפתור הכחול Copy Prompt למעלה
- 5חוזרים לקלוד שלכם, מדביקים, ולוחצים Enter
- 6קלוד בונה את הרכיב באתר שלכם · בודקים ב-localhost:3000 שזה נראה כמו ש-21st הראה
שלב 5 · סקילים · ההבדל בין AI-גנרי לאתר פרימיום
⚖️ חשוב במיוחד · נגישות ופרטיות. בישראל אתר שלא עומד בתקן הנגישות (ת״י 5568) חושף את הבעלים שלו לתביעה של עד 50,000 שקל. מדיניות פרטיות חובה לפי חוק הגנת הפרטיות. אלה לא 'אופציה' · אלה חובה משפטית. הסקילים פותרים את זה בקליק.
איפה מורידים סקילים · 2 המאגרים המובילים
skills.sh
מאגר Anthropic הרשמי · אלפי סקילים
המאגר הראשי לסקילים מהקהילה. גולשים לפי קטגוריות (Website, Marketing, Productivity), מוצאים סקיל מתאים, ובודקים שיש לו תווית Trust Hub Pass (אומרת שהקוד נבדק ובטוח). אפשר לראות כמה הורדות יש לסקיל · ככל שיותר, יותר פופולרי וכנראה איכותי.
ל-skills.shskills.shטיפ לסוכנים: תמיד לבדוק תווית Trust Hub Pass לפני התקנה · ככה לא מורידים סקיל שעלול לעשות פעולות לא רצויות במחשב.
agentskills.co.il
מאגר ישראלי בעברית · סקילים מותאמים לשוק המקומי
המאגר הישראלי · סקילים שמותאמים לרגולציה ישראלית (פרטיות, נגישות), לשפה העברית, ולשוק המקומי. כל הסקילים חינמיים. ממש שווה לעבור על הכל לפני שמתחילים אתר חדש לישראלים.
ל-agentskills.co.ilagentskills.co.il/heטיפ לסוכנים: אם הסקיל ההכרחי שלכם הוא נגישות בישראל · כדאי גם להריץ בדיקה ידנית אחרי ההתקנה. התקן הישראלי מחמיר ולפעמים הסקיל הוא נקודת פתיחה, לא פתרון סופי.
9 הסקילים המומלצים לכל אתר חדש
Israeli Privacy Shield
רגולציה לפרטיות אתרים בישראל
פותר את החובה המשפטית של מדיניות פרטיות לפי חוק הגנת הפרטיות. הסקיל מוסיף banner עוגיות, מדיניות פרטיות מלאה, וניהול הסכמת משתמש. חובה לכל אתר ישראלי.
לדף הסקילagentskills.co.il/he/skills/security-compliance/israeli-privacy-shieldIsraeli Accessibility Compliance
נגישות אתרים לפי תקן ת״י 5568
מטמיע נגישות לפי תקן ת״י 5568 ו-WCAG 2.1 AA. מוסיף כפתור נגישות, בודק contrast, alt text, ומבטיח ניווט מקלדת. ללא הסקיל הזה · חשיפה לתביעה של עד 50,000 שקל.
לדף הסקילagentskills.co.il/he/skills/localization/israeli-accessibility-complianceטיפ לסוכנים: הסקיל הוא נקודת פתיחה מעולה, אבל התקן הישראלי מחמיר · רצוי לבצע בדיקה ידנית נוספת אחרי ההתקנה כדי לוודא עמידה מלאה.
Hebrew Content Writer
כתיבת תוכן עברי מקצועי
סקיל לכתיבת תוכן בעברית · בלי תרגומונים מאנגלית, בלי קלישאות 'AI'. כותב בסגנון ישיר, ממיר, ומדבר את השפה של הקהל הישראלי. שווה זהב לדפי נחיתה ולתוכן שיווקי.
לדף הסקילagentskills.co.il/he/skills/localization/hebrew-content-writerUI/UX Pro Max
חווית משתמש · 50 סגנונות, 161 פלטות צבעים
הסקיל הכי מקיף לחווית משתמש · 50 סגנונות עיצוב, 161 פלטות צבעים, 57 זוגות פונטים, וכללי UX מהמובילים בתעשייה. בחירת ויזואל ברירת המחדל של הקלוד מקבלת שדרוג של מאות אחוזים.
לדף הסקילskills.sh/nextlevelbuilder/ui-ux-pro-max-skill/ui-ux-pro-maxOKLCH Color Engine
צבעים שלא נראים 'AI-גנרי'
סקיל שמשפר את פלטת הצבעים של האתר. משתמש במרחב צבע מתקדם (OKLCH) ליצירת פלטות מקצועיות שלא נראות כמו 'AI-בנה-את-זה'. שדרוג מיידי לאיכות הוויזואל.
לדף הסקילoklch.fyi/skillEmil Kowalski Skill
חווית משתמש מבוססת מעצבים מובילים
סקיל שמבוסס על העבודה של אמיל קובלסקי · אחד המעצבים הכי מובילים בעולם (Linear, Vercel). הפוקוס שלו · micro-interactions, אנימציות עדינות, ופרטים שהופכים אתר רגיל לחוויה.
לדף הסקילemilkowal.ski/skillInterface Details
פרטים שעושים את ההבדל בפריסה
סקיל שמבוסס על מאמר של Jakub.kr על הפרטים שגורמים לממשק להרגיש טוב. ריווחים, ייצוב טיפוגרפיה, micro-spacing, וכל הניואנסים הקטנים שמבדילים בין אתר חובבני לפרימיום.
למאמר ולסקילjakub.kr/writing/details-that-make-interfaces-feel-betterWeb Design Guidelines
Vercel Labs · מעל 250,000 התקנות בשבוע
סקיל לעיצוב אתר · 250,000+ התקנות בשבוע. מ-Vercel Labs · הסטנדרט הדה-פקטו של עיצוב אתרים ב-AI. אם אתם מתקינים סקיל אחד לאתר חדש · זה הסקיל.
לדף הסקילskills.sh/vercel-labs/agent-skills/web-design-guidelinesRefero Design Styles
חוקיות עיצוב מהאתרים המובילים
ספריית סגנונות עיצוב מבוססת על האתרים המובילים בעולם · Apple, Linear, Notion, Stripe ועוד. בוחרים סגנון, קלוד מטמיע. דרך מהירה לקבל אסתטיקה של חברה גלובלית.
ל-Refero Designstyles.refero.designשלב 6 · פריסה לאוויר · האתר חי באינטרנט
🌐 הדומיין הזמני יהיה משהו כמו `my-project-xyz123.vercel.app`. אם אתם רוצים דומיין משלכם (`mydomain.com`), קונים אותו מ-SiteGround / GoDaddy / Cloudflare, ומבקשים מקלוד לחבר אותו ל-Vercel. זה תהליך של 10 דקות עם DNS records. אם תרצו · אעלה סרטון נפרד שמסביר את זה.
מה לעשות אחרי שהאתר חי
- 1**שולחים את הלינק לכמה חברים** · מבקשים פידבק. דברים שאתם רואים אחרי 50 פעמים בקוד · הם רואים בלחיצה אחת
- 2**מחליפים את כל ה-Placeholder עם תוכן אמיתי** · תמונות שלכם, וידאו של לקוחות, מספרי טלפון נכונים
- 3**מגבים לגיטהאב** · אומרים לקלוד 'תגבה את הקוד הזה לגיטהאב פרטי'. ככה אם משהו נשבר בעתיד · יש מאיפה לשחזר
- 4**מחברים דומיין משלכם** (אופציונלי) · אם רוצים לראות מקצועי
- 5**מוסיפים אנליטיקס** · מבקשים מקלוד 'תוסיף Google Analytics 4 לאתר'. ככה אתם רואים מי גולש ומאיפה
מה אפשר לבנות עם Vibe Coding · 8 רעיונות
8 פרויקטים שיוצרים עם Claude Code ב-45 דקות
- **דף נחיתה לעסק** · Hero חזק, הסבר על המוצר, חוויות לקוח, כפתור CTA לוואטסאפ
- **אתר תיק עבודות** · גלריית פרויקטים, סיפור אישי, יצירת קשר. רלוונטי לפרילנסרים ויוצרי תוכן
- **Lead Magnet** · דף שמציע מתנה (מדריך, צ'קליסט), אוסף מיילים, שולח ב-Make ל-RavMaser
- **אתר אירוע** · פרטי האירוע, ספירה לאחור, הרשמה, מפה
- **חנות קטנה** · קטלוג מוצרים, סליקה דרך Stripe / Cardcom / Sumit
- **אתר מנוי / קורס** · רישום משתמשים, גישה לתוכן, אזור אישי. ב-Supabase
- **Dashboard פנימי לעסק** · גרפים, נתונים, פעולות מהירות. למשרד שלכם
- **אתר לקוח** · אתם בונים, גובים. עם 21st.dev והסקילים · הלקוח לא יאמין שזה לא מעצב מקצועי
שאלות נפוצות
האם אני יכול לבנות אתר בעברית? קלוד באמת מבין עברית טוב?
כן, קלוד מבין עברית מצוין. אפשר לדבר איתו בעברית, לכתוב בעברית, והאתרים שהוא בונה יוצאים בעברית מקצועית. הקטע היחיד שיש לו לפעמים אתגר איתו הוא RTL (כיוון ימין-לשמאל) · בעיקר כשמערבבים אנגלית בתוך טקסט עברי. הסקיל Hebrew Content Writer עוזר במיוחד בזה.
כמה זה עולה לבנות אתר? אני שילמתי 500 שק רק על נגישות באתר אחר
המנוי הבסיסי של Claude (20 דולר/חודש) מספיק לבניית אתר בודד. עם מנוי Pro (100 דולר/חודש) אפשר לבנות מספר אתרים ביום. שלושת הכלים (Vercel, Supabase, GitHub) חינמיים. הסקילים חינמיים. בסה״כ · אתר מקצועי עולה לכם כמה שעות עבודה ולא יותר. את הנגישות והפרטיות הסקילים פותרים בקליק.
אם הקלוד יבנה משהו שלא אהבתי, אני יכול לתקן? או שצריך להתחיל מהתחלה?
תמיד אפשר לתקן. אומרים לקלוד 'הכפתור הזה גדול מדי', 'המראה של ה-Hero לא מתאים', 'תחליף את הצבע הראשי לכחול'. הוא משנה רק את החלק הספציפי, לא מתחיל מאפס. תוכלו לעשות אינסוף איטרציות עד שזה יוצא כמו שאתם רוצים. הטיפ · לעבוד בשינויים קטנים, לבדוק כל אחד לפני שעוברים לבא.
מה אם אני רוצה אתר על דומיין שכבר יש לי? אפשר לחבר?
כן. אחרי שהאתר פרוס ל-Vercel, אומרים לקלוד 'יש לי דומיין mydomain.com שקניתי ב-X. תחבר אותו לפרויקט בוורסל'. הוא ינחה אתכם לעדכן DNS records בספק הדומיין (SiteGround/GoDaddy/Cloudflare). תהליך של 10-20 דקות, ואז האתר חי על הדומיין שלכם.
מה ההבדל בין Vibe Coding לבין WordPress / Wix / Webflow?
WordPress/Wix/Webflow · אתם בוחרים תבנית מוכנה, גוררים אלמנטים, מוגבלים למה שהמערכת מאפשרת. אתר נראה 'תבניתי'. Vibe Coding · קלוד כותב קוד ייעודי לאתר שלכם. אין מגבלה לרכיבים, לעיצוב, או לפונקציונליות. רוצים אנימציה ייחודית? פיצ'ר שלא ראיתם בשום מקום? אינטגרציה מיוחדת? · קלוד יבנה. בנוסף · הקוד שלכם, אתם הבעלים שלו, אין נעילה ל-vendor.
האם אפשר לחבר חנות אינטרנטית עם תשלומים?
כן. אומרים לקלוד 'תוסיף לאתר חנות עם 5 מוצרים, חיבור ל-Cardcom (או Sumit, Stripe)'. הוא בונה את החנות, את עגלת הקניות, את ה-checkout, ומחבר ל-API של הסליקה. צריך לפתוח חשבון אצל ספק הסליקה, להעביר לקלוד את המפתחות, והוא מסיים את הכל.
מה הסיכון אם משהו נשבר באתר אחרי שהוא חי?
סיכון נמוך · כל פעם שמשנים משהו, קלוד יוצר commit חדש ב-GitHub. אם משהו נשבר · אומרים לקלוד 'תחזור לגרסה האחרונה שעבדה'. הוא ימצא את הקומיט הקודם ויחזיר. בנוסף · Vercel שומר את כל ה-deployments הקודמים, אפשר לחזור לכל גרסה ב-2 קליקים. בקיצור · קשה לשבור משהו לתמיד.
האם אני יכול להוסיף ניוזלטר / רשימת תפוצה לאתר?
כן. שתי אופציות · 1) משתמשים ב-Supabase לאחסון מיילים, ואז מתחברים ל-RavMaser/Resend/Mailchimp דרך Make או דרך API ישיר. 2) שמים טופס שמתחבר ישירות לכלי הניוזלטר שלכם. אומרים לקלוד 'תוסיף לאתר טופס אימייל שמתחבר ל-RavMaser'. הוא מטפל בכל הצד טכני.
