אם תהיתם אי פעם איך לבנות אתר עם קלוד קוד בלי להיות מהנדסי תוכנה, המאמר הזה בשבילכם. במקום תיאוריה, ניקח דוגמה אמיתית: אתר נחיתה לעסק קטן, מהרעיון ועד עמוד חי באוויר עם כתובת אמיתית ו-SSL. תראו את השלבים המדויקים, את הפרומפטים ששוברים כל שלב, ובעיקר, את הלקחים שחוסכים לכם את הטעויות שאני עשיתי.
נקודת מוצא אחת: הכל כאן נעשה עם Claude Code, כלי שורת הפקודה של Anthropic. אם עוד לא התקנתם אותו, המדריך המלא שלנו מסביר איך, זה לוקח כמה דקות.
שלב 0: להגדיר מה בונים לפני שכותבים שורה
הטעות הכי גדולה היא לפתוח את הטרמינל ולהגיד "בנה לי אתר". קלוד יבנה משהו, אבל לא בהכרח מה שרצית. במקום זה, התחל בהגדרה ברורה:
"אני רוצה לבנות אתר נחיתה של עמוד אחד לסטודיו צילום בשם 'אור'. יש בו: hero עם כותרת וקריאה לפעולה, גלריית תמונות, שלוש חבילות מחיר, טופס יצירת קשר, ופוטר. עברית, RTL, עיצוב נקי ומודרני, מותאם למובייל. לפני שאתה כותב קוד, כתוב לי תוכנית מבנה קבצים ותן לי לאשר."
שים לב ל"תן לי לאשר", זה מפעיל את plan mode, ומאפשר לך לתקן את הכיוון לפני שנכתב קוד. זה החיסכון הכי גדול בכל התהליך.
שלב 1: לתת ל-Claude Code לבנות את השלד
אחרי שאישרת את התוכנית, קלוד יוצר את מבנה הקבצים ואת השלד הבסיסי. בשלב הזה תראה אותו יוצר קבצי HTML, CSS ואולי JavaScript, מריץ פקודות, ולפעמים מתקן את עצמו כשמשהו לא עובד. אתה לא צריך לכתוב שורת קוד, רק להסתכל, לאשר פעולות, ולכוון.
שלב 2: עיצוב ותיקונים בלולאה
כאן העבודה האמיתית. תסתכל על התוצאה, ותכוון במילים פשוטות:
- "הכותרת גדולה מדי במובייל, הקטן אותה שם."
- "הצבעים קרים מדי, אני רוצה גוון חם יותר, נסה טונים של כתום ובז'."
- "הוסף אנימציית hover עדינה לכפתורים."
אתה מדבר בעברית פשוטה, קלוד מתרגם את זה לקוד. אם יש לך כבר עיצוב מוכן (למשל מ-Claude Design), אפשר להעביר אותו ל-Claude Code כ-handoff מסודר, התהליך המלא מפורט בשיעור Design → Code Pipeline, Handoff Bundle ל-Claude Code.
שלב 3: להוסיף נתונים אם צריך
אתר נחיתה סטטי לא צריך בסיס נתונים. אבל אם אתה רוצה שטופס יצירת הקשר ישמור פניות, או שיהיה אזור התחברות, כאן נכנס Supabase: Postgres, אימות משתמשים ואחסון, הכל מנוהל. קלוד מתכנן את הסכמה, כותב את ה-migrations, ומחבר את זה לאתר. איך עושים את זה בפועל, כולל הגדרת הרשאות (RLS), מפורט בשיעור Supabase + Claude, בסיס נתונים בלי כאב.
שלב 4: Deploy ל-Vercel
האתר עובד אצלך במחשב, עכשיו צריך שכל העולם יראה אותו. כאן נכנס Vercel, שירות אירוח שמתחבר ישירות ל-Claude Code דרך plugin רשמי. שלוש פקודות והאתר חי, כולל תעודת SSL אוטומטית וכתובת preview לכל branch שאתה מפתח.
"בצע deploy של האתר ל-Vercel. אני רוצה URL חי לבדיקה, ואחרי שאאשר, production."
את הזרימה המלאה, מ-prompt ל-deploy תוך 60 שניות, עוברים צעד-צעד בשיעור Vercel + Claude, מ-prompt ל-deploy ב-60 שניות. מכאן, כל git push חדש מתעדכן אוטומטית באוויר.
סיכום השלבים
| שלב | מה קורה | מי עושה |
|---|---|---|
| 0. הגדרה | מגדירים מבנה ומאשרים תוכנית | אתה + plan mode |
| 1. שלד | בניית מבנה קבצים וקוד בסיסי | Claude Code |
| 2. עיצוב | תיקונים בלולאה במילים פשוטות | אתה מכוון, קלוד מבצע |
| 3. נתונים | Supabase לטפסים/אימות (אופציונלי) | Claude Code |
| 4. Deploy | העלאה ל-Vercel עם SSL | Claude Code + Vercel |
לקחים מהדרך
- תמיד plan mode לפני משימה גדולה. אישור מוקדם חוסך שעות של תיקונים.
- עבוד בקטעים. חלק אחד בכל פעם, בדיקה בדפדפן, ואז הלאה. אל תבנה הכל בבת אחת.
- שמור נקודות ביניים. בקש מקלוד לעשות
git commitאחרי כל שלב שעובד, כדי שתוכל לחזור אחורה אם משהו נשבר. - אתה המנהל, לא הצופה. קלוד כותב את הקוד, אבל ההחלטות, עיצוב, תוכן, כיוון, הן שלך. ככל שהכיוון שלך ברור יותר, כך התוצאה טובה יותר.
הדבר היפה הוא שברגע שבנית אתר אחד ככה, השני לוקח חצי מהזמן. אתה כבר יודע את הזרימה, ואתה כבר יודע איך לדבר עם הכלי. כל 127 השיעורים בקטלוג חינמיים לגמרי, והם ילוו אותך מהאתר הראשון ועד פרויקטים מורכבים.
שאלות נפוצות
האם אפשר לבנות אתר שלם עם קלוד קוד בלי לדעת לתכנת?
כן, אפשר להגיע רחוק מאוד. Claude Code כותב את הקוד, מריץ פקודות, ומתקן שגיאות בעצמו, כך שגם מי שלא מכיר לעומק את השפות יכול לבנות אתר עובד. עדיין כדאי להבין את הזרימה הכללית: מה זה קובץ, מה זה תיקייה, ומה זה deploy. ככל שתבין יותר, כך תוכל לכוון את קלוד טוב יותר ולפתור תקלות מהר יותר.
כמה זמן לוקח לבנות אתר עם Claude Code?
אתר נחיתה פשוט אפשר לבנות ולהעלות לאוויר תוך שעה עד יומיים, תלוי במורכבות. אתר עם מספר עמודים, טופס יצירת קשר ועיצוב מותאם לוקח בדרך כלל כמה ימים. הבנייה עצמה מהירה, רוב הזמן הולך על החלטות עיצוב ותוכן, לא על כתיבת הקוד, כי את זה קלוד עושה.
איך מעלים אתר של Claude Code לאוויר עם Vercel?
Vercel הוא שירות אירוח שמתחבר ישירות ל-Claude Code. אחרי שהאתר מוכן, מבקשים מ-Claude לבצע deploy דרך ה-plugin הרשמי של Vercel, כמה פקודות והאתר חי, כולל תעודת SSL אוטומטית וכתובת preview לכל branch. אין צורך להגדיר שרתים ידנית. כל push חדש מתעדכן אוטומטית באוויר.
