איך אני בונה אתר עם AI: מרפרנס ועד אתר חי על Vercel

התהליך בשבעה שלבים

1. רעיון. מה האתר צריך לעשות, ואיזו פעולה אחת המבקר אמור לבצע.
2. רפרנס. אתרים, תמונות וסרטונים שמראים את התחושה שמחפשים.
3. כיוון ויזואלי. צבעים, פונט וכללים, כתובים לפני הקוד.
4. בנייה. סוכני קוד בונים, משימה קטנה בכל פעם.
5. סבבי תיקון. הגרסה הראשונה היא טיוטה, לא תוצר.
6. בדיקה בנייד. לפני שמראים למישהו.
7. עלייה לאוויר. Git, GitHub ופריסה על Vercel.

בהמשך כל שלב מפורט, עם דוגמאות מהאתר הזה.

מתחילים מרעיון ומפעולה אחת

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

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

רפרנס: מאיפה מתחיל המראה

AI בונה מהר, אבל הוא לא יודע מה אתם אוהבים. בלי רפרנס מקבלים את האתר הממוצע: נקי, סביר ודומה לכל אתר אחר.

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

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

כיוון ויזואלי, כתוב לפני הקוד

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

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

:root {
  --paper: #f7f8fa;
  --ink: #0b2d50;
  --muted: #47617a;
  --action: #154b83;
  --electric: #2385cf;
  --mist: #d8ebf8;
}

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

קובץ ההוראות של הפרויקט

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

הנה שני כללים אמיתיים מתוך הקובץ של האתר הזה:

- All colors live as CSS variables in `app/globals.css` `:root` [...]
  When changing a color, update the hex var AND its `-rgb` triplet
  together; never hardcode a new hex in `tailwind.config.ts`.

- The active source is the Next app in `app/`, `components/`, `lib/`
  and `public/`. The legacy `index.html` is kept as an older static
  build and should not be treated as the primary source.

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

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

בונים עם סוכני קוד, משימה קטנה בכל פעם

האתר בנוי על Next.js ועל TypeScript, והעיצוב נכתב עם Tailwind. הקוד נכתב יחד עם סוכני קוד: עבדתי עם Codex, עם Claude Code ועם Cursor, ושמות הענפים בגיט מתעדים מי עבד על מה.

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

משימה: סקשן פתיחה לעמוד הבית.
רפרנס: התמונה המצורפת, רק לקצב ולריווח.
כללים: צבעים ופונט לפי AGENTS.md. עברית, מימין לשמאל.
גמור כאשר: הכותרת והכפתור נראים בלי גלילה במסך ברוחב 390 פיקסלים.

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

כל גרסה רצה קודם על המחשב. באתר שבנוי על Next זו הפקודה:

npm run dev
# http://localhost:3000

הגרסה הראשונה היא טיוטה

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

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

נכון לתחילת אוקטובר 2026 יש בענף הראשי יותר מ 170 קומיטים, מאז הקומיט הראשון באפריל. אתר לא נבנה בבקשה אחת. הוא נבנה בהרבה תיקונים קטנים.

לצד האתר הזה, יש שני אתרים חיים שעבדתי עליהם ואפשר לפתוח ולבדוק:

אתר מותגMochiאתר תדמית לבית קפהקפה אנה

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

בודקים בנייד לפני שמראים למישהו

הרבה מהמבקרים מגיעים מהטלפון, ושם אתר נשבר קודם. לכן הבדיקות של האתר הזה רצות על ארבעה רוחבי מסך: 320, 390, 768 וגם 1440 פיקסלים.

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

ענף לכל שינוי: Git, GitHub ובדיקות אוטומטיות

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

על כל בקשת מיזוג רצות בדיקות אוטומטיות. אלה השורות מקובץ הבדיקות של הפרויקט:

- run: npm ci
- run: npm test
- run: npx tsc --noEmit
- run: npx next build

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

עולים לאוויר על Vercel

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

אלה ההגדרות העיקריות מתוך הקובץ של האתר הזה:

{
  "framework": "nextjs",
  "regions": ["fra1"],
  "installCommand": "npm ci",
  "buildCommand": "npm run build"
}

שלושה דברים שכדאי לסגור כבר ביום הראשון:

• דומיין. הכתובת בלי www מפנה לכתובת עם www, כדי שלא יהיו שתי גרסאות של אותו אתר.
• משתני סביבה. מפתחות וסיסמאות נשמרים בלוח הבקרה של Vercel, לא בקוד.
• קובץ התעלמות. מה לא עולה לשרת. כאן זה נשבר לי.

# before: matches every folder named assets, at any depth
assets/

# after: only the folder at the project root
/assets/

מי שרוצה לעבור את השלב הזה צעד אחרי צעד, כולל שתי דרכים להעלות אתר ותקלות נפוצות, ימצא את זה במדריך הוויזואלי שבניתי לבניית עמוד נחיתה.

האתר חי, ועכשיו מתחילה העבודה

עלייה לאוויר היא לא הסוף. אחרי ההשקה נוספו מפת אתר ונתונים מובנים, מפת האתר נשלחה אל Google Search Console, והאתר ממשיך להשתנות לפי מה שרואים בפועל.

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

מה לקחת מכאן

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

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