מדריך קלוד - מדריך סדר הפעולות בבניית אתר בוייב קודינג

מדריך סדר הפעולות בבניית אתר בוייב קודינג

מאת חיים בניסטי

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

קריאה של 2 דקות

שאלון אפיון, תמחור ואישור הצעת המחיר

לפני שנוגעים בכלום - מבינים מה בונים ומסכמים על הכסף.

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

שווה לדעת. למחשבון התמחור בפאנליינר

אפיון כתוב ושרטוט האתר

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

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

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

עיצוב, וכאן דברים נהיים מעניינים

לא צריך פיגמה. אוספים חומרים, ו-Claude מעצב מהם.

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

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

פיתוח

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

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

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

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

סבבי תיקונים

הלקוח רואה אתר אמיתי, לא צילום מסך, ואומר מה לשנות.

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

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

פעולות סיום

הכל עובד. עכשיו בודקים שהוא גם תקין, בטוח וחוקי.

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

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

העלאה לאוויר

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

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

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

הירשמו לעדכונים במייל

ואל תפספסו אף זום חינמי, סדנה חדשה או מדריך שווה!

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