איך בונים אתר עם AI שנראה מקצועי, צעד אחרי צעד

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

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

למה אתר שנבנה עם AI נראה כמעט גמור ובכל זאת לא נראה טוב?

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

מה בדרך כלל משתבש?

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

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

איך עובדים עם המדריך?

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

1. עוברים על הצעדים לפי הסדר. כל צעד נשען על הקודם.
2. מעתיקים את הפרומפט ומחליפים כל מה שבסוגריים מרובעים, [כך], בפרטים של העסק שלכם.
3. שומרים את התשובה של כל צעד במסמך אחד. נקרא לו מסמך האתר. בתחילת כל צעד מדביקים אותו לשיחה, כדי שה-AI יעבוד לפי מה שכבר הוחלט.
4. אם התשובה לא מתאימה, אומרים לו מה לא מתאים ומבקשים גרסה אחרת. לא עוברים לצעד הבא עד שהצעד הנוכחי סגור.

צעד 1: מה המטרה של האתר ומי הקהל שלו?

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

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

מספיק עמוד אחד. לא צריך תוכנית עסקית.

כך נראה סיכום כזה, לעסק לדוגמה:

הפרומפט להעתקה: מטרה וקהל

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

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

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

אחרי שאענה, כתוב סיכום של עד עמוד אחד:
1. המטרה של האתר, במשפט אחד
2. הלקוח האידיאלי: מי הוא ומה הוא מחפש
3. שלושת החששות העיקריים שלו לפני שהוא פונה לעסק כמו שלי
4. מה מבדל אותי מהמתחרים, לפי מה שסיפרתי
5. הפעולה האחת שכל עמוד באתר צריך להוביל אליה

כתוב בשפה פשוטה, בלי מונחים שיווקיים.

שמרו את הסיכום. זה העמוד הראשון במסמך האתר.

צעד 2: מה זה מפת אתר ואיך AI בונה אחת?

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

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

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

כך זה נראה:

הפרומפט להעתקה: מפת אתר

הנה מסמך האתר שלי עד עכשיו:
[הדביקו כאן את הסיכום מצעד 1]

בנה מפת אתר לאתר הזה.

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

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

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

צעד 3: מה זה סקיצה (wireframe) ולמה לא מדלגים עליה?

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

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

כך זה נראה:

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

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

הפרומפט להעתקה: סקיצה לעמוד

הנה מסמך האתר שלי עד עכשיו:
[הדביקו כאן את הסיכום מצעד 1 ואת מפת האתר מצעד 2]

בנה סקיצה לעמוד [שם העמוד, למשל: דף הבית].

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

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

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

צעד 4: איך מגדירים עיצוב שנראה מקצועי?

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

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

כך זה נראה:

צבעים

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

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

כל צבע מקבל קוד, כמו #1A5F7A. הקוד הזה נקרא HEX, והוא הדרך הפשוטה לוודא שה-AI משתמש באותו צבע בדיוק בכל עמוד.

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

פונטים

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

הכלל הפשוט: פונט אחד, לכל היותר שניים. הפונט צריך לתמוך בעברית, אחרת האותיות העבריות יוצגו בפונט אחר מהאנגלית. ב-Google Fonts יש פונטים חינמיים עם עברית, כמו Heebo, Assistant ו-Rubik. טקסט רגיל לא קטן מ-16 פיקסלים, אחרת קשה לקרוא אותו בטלפון.

כפתורים

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

הטקסט על הכפתור אומר מה יקרה כשלוחצים. "שלחו" לא אומר הרבה. "קבלו הצעת מחיר בוואטסאפ" אומר בדיוק מה הולך לקרות.

תמונות ואייקונים

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

מקום ריק לתמונה

מה שה-AI משאיר

מה שצריך להיות שם

אייקון הוא ציור קטן שמסמל משהו, כמו שפופרת ליד מספר טלפון. כל האייקונים באתר צריכים להגיע מאותה סדרה, באותו עובי קו ובאותו צבע. סדרות חינמיות כמו Lucide או Font Awesome נותנות סגנון אחיד, וה-AI מכיר אותן. אימוג'י הם לא אייקונים.

הפרומפט להעתקה: כללי עיצוב

הנה מסמך האתר שלי עד עכשיו:
[הדביקו כאן את הסיכום, מפת האתר והסקיצות]

עזור לי להגדיר את העיצוב של האתר, ורשום אותו ככללים קבועים.

מה שכבר ידוע לי:
- הצבעים של העסק, אם יש לוגו: [קודי צבע, או "אין, תציע"]
- אתרים שאני אוהב את המראה שלהם: [קישור או שם, ומה אהבתי בהם]
- איך העסק צריך להרגיש: [למשל: רגוע ומקצועי / צעיר ואנרגטי / יוקרתי]

כתוב "כללי עיצוב" שכוללים:
1. צבעים: צבע ראשי, צבע לכפתורים, צבע רקע, צבע רקע משני וצבע טקסט. לכל אחד קוד HEX ומתי משתמשים בו. ודא שיש ניגודיות טובה בין הטקסט לרקע.
2. פונטים: פונט אחד או שניים מ-Google Fonts שתומכים בעברית. גודל לכותרת ראשית, לכותרת משנית ולטקסט רגיל. טקסט רגיל לפחות 16 פיקסלים.
3. כפתורים: סגנון לכפתור ראשי וסגנון לכפתור משני. צבע, צבע טקסט, פינות עגולות או חדות, ואיך הכפתור משתנה כשעומדים עליו עם העכבר.
4. אייקונים: סדרה אחת בלבד, עובי קו אחד וצבע אחד.
5. תמונות: לכל מקטע בסקיצות, איזו תמונה צריך שם. סמן מה יש לי ומה חסר.

כתוב את הכללים כרשימה קצרה שאפשר להדביק בכל שיחה. אל תכתוב קוד.

שמרו את כללי העיצוב במסמך האתר. מעכשיו כל שינוי עיצובי עובר דרכם.

צעד 5: איך בונים את האתר לפי העיצוב ולא הפוך?

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

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

שלושה כללים לצעד הזה:

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

הפרומפט להעתקה: בניית עמוד

הנה מסמך האתר שלי:
[הדביקו כאן את הסיכום, מפת האתר, הסקיצות וכללי העיצוב]

בנה את עמוד [שם העמוד] לפי המסמך.

כללים:
1. בנה בדיוק לפי הסקיצה של העמוד: אותם מקטעים, באותו סדר.
2. השתמש רק בצבעים, בפונטים ובסגנונות הכפתורים שבכללי העיצוב. אל תוסיף צבע או פונט שלא מופיעים שם.
3. האתר בעברית, מימין לשמאל.
4. העמוד צריך להיראות טוב קודם כל בטלפון, ואחר כך במחשב.
5. במקום שבו צריכה להופיע תמונה שאין לי, שים מסגרת אפורה עם תיאור של התמונה שצריך. אל תביא תמונות מאתרים אחרים.
6. אייקונים רק מהסדרה שבכללי העיצוב.
7. כל כפתור מוביל לפעולה שהוגדרה בסקיצה. קישור לוואטסאפ בפורמט https://wa.me/972XXXXXXXXX, כלומר המספר עם 972 בהתחלה ובלי ה-0.
8. אל תמציא טקסטים, המלצות, מספרים או לקוחות. איפה שחסר טקסט, כתוב [טקסט חסר: מה צריך לכתוב כאן].

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

הפרומפט להעתקה: תיקון סטייה מהעיצוב

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

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

צעד 6: מה בודקים לפני שהאתר עולה לאוויר?

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

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

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

הפרומפט להעתקה: בדיקה לפני העלייה

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

והנה כללי העיצוב:
[הדביקו כאן את כללי העיצוב]

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

לכל בעיה כתוב איפה היא ואיך מתקנים. אל תתקן עדיין.

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

מתי כדאי להעביר את הבנייה לסטודיו?

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

יש מצבים שבהם בנייה לבד פחות משתלמת:

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

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

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

עוד על בניית אתרים: בניית אתרים

רון בכר

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

עוד על רון