בניית אתר לחברה עם Claude Code — מדריך מלא עם פרומפטים

אתר חברה הוא הרבה יותר מ"דף נחיתה יפה". הוא הפנים הדיגיטליות של העסק — הרושם הראשוני, הנקודה שבה לקוחות פוטנציאליים מחליטים אם אתם רציניים או לא. בניית אתר כזה עם Claude Code נותנת לכם שליטה מלאה על כל פיקסל, בלי להתפשר על תבניות גנריות. היתרונות של Claude Code לאתר חברה: • שליטה מלאה בעיצוב — בלי מגבלות של תבנית • ביצועים גבוהים — אתר מהיר שגוגל אוהב • SEO מובנה — Claude Code יודע ליצור מבנה שגוגל מבין • תחזוקה קלה — שינויים בתוך דקות, לא ימים • עלות נמוכה — אין תשלום חודשי לפלטפורמות כמו Wix או WordPress

לפני שמתחילים לבנות, חשוב לתכנן. אתר חברה טוב כולל בדרך כלל את הדפים הבאים: דפים חובה: • דף ראשי (Homepage) — הרושם הראשוני, מה החברה עושה, CTA ברור • אודות (About) — הסיפור מאחורי החברה, הצוות, הערכים • שירותים/מוצרים — מה אתם מציעים, עם תיאורים ברורים • צור קשר — טופס, טלפון, מייל, מפה, שעות פעילות דפים מומלצים: • פורטפוליו/גלריה — עבודות קודמות, case studies • בלוג — תוכן שמביא תנועה מגוגל • שאלות נפוצות (FAQ) — חוסך שיחות טלפון • עמוד נחיתה לקמפיינים — ממוקד להמרות טיפ חשוב: תכננו את המבנה על דף נייר לפני שמתחילים. ככה Claude Code יקבל הוראות ברורות ויבנה בדיוק מה שצריך.

הנה הפרומפט המומלץ להתחלה. התאימו אותו לחברה שלכם: "אני רוצה לבנות אתר תדמית לחברה שלי. הנה הפרטים: שם החברה: [שם] תחום: [מה החברה עושה] קהל יעד: [מי הלקוחות] שפה: עברית (RTL) צבעים: [צבע ראשי, צבע משני] סגנון: [מודרני/קלאסי/מינימליסטי] דפים שצריך: 1. דף ראשי עם Hero section, סקציית שירותים, ביקורות לקוחות, CTA 2. דף אודות עם סיפור החברה וצוות 3. דף שירותים עם תיאור מפורט של כל שירות 4. דף צור קשר עם טופס, טלפון ומפה טכנולוגיות: Next.js 15, Tailwind CSS, TypeScript עיצוב: רספונסיבי, מהיר, מותאם SEO תתחיל ביצירת CLAUDE.md עם כל ההגדרות, ואחר כך תבנה את דף הבית." פרומפט כזה נותן ל-Claude Code את כל מה שהוא צריך כדי להתחיל נכון. שימו לב שאנחנו מבקשים CLAUDE.md קודם — ככה כל השאר יהיה עקבי.

דף ראשי (Homepage): "תבנה את דף הבית עם הסקציות הבאות: 1. Hero — כותרת גדולה שמסבירה מה החברה עושה, תת-כותרת עם הצעת ערך, כפתור CTA 'צרו קשר' 2. שירותים — 3-4 כרטיסיות עם אייקונים, כל אחת עם שם שירות ותיאור קצר 3. מספרים — סקציית סטטיסטיקה: שנות ניסיון, לקוחות מרוצים, פרויקטים 4. ביקורות — 3 ביקורות לקוחות עם שם, תפקיד, וציטוט 5. CTA תחתון — 'מוכנים להתחיל?' עם כפתור ליצירת קשר כל הטקסט בעברית. עיצוב נקי ומקצועי." דף אודות: "תבנה דף אודות עם: - Hero קטן עם כותרת 'אודותינו' - הסיפור של החברה — 2-3 פסקאות - ערכי החברה — 3-4 ערכים עם אייקונים - הצוות — 3-4 כרטיסי צוות עם תמונה, שם ותפקיד - CTA 'רוצים לעבוד איתנו?'" דף שירותים: "תבנה דף שירותים עם: - כותרת ראשית - רשימת שירותים — כל שירות בכרטיס נפרד עם: שם, תיאור מפורט (3-4 שורות), רשימת יתרונות, כפתור 'לפרטים נוספים' - סקציית FAQ — 5 שאלות נפוצות עם accordion - CTA 'בואו נדבר על הפרויקט שלכם'" דף צור קשר: "תבנה דף צור קשר עם: - טופס: שם, אימייל, טלפון, נושא, הודעה, כפתור שלח - ולידציה בעברית לכל השדות - מידע ליצירת קשר: טלפון, אימייל, כתובת - שעות פעילות - מפת Google (embed) - אייקונים לרשתות חברתיות"

1. עיצוב (Design): • שמרו על 2-3 צבעים מקסימום — צבע ראשי, משני, וניטרלי • השתמשו ב-whitespace — אל תעמיסו, תנו לתוכן לנשום • תפריט ניווט פשוט — מקסימום 5-6 פריטים • כפתורי CTA בולטים — כל דף צריך לנתב את המבקר לפעולה • תמונות איכותיות — "תוסיף placeholder images מ-Unsplash" או השתמשו בתמונות אמיתיות 2. תוכן (Content): • כותרות ברורות — המבקר צריך להבין תוך 3 שניות מה אתם עושים • טקסט קצר — פסקאות של 2-3 שורות מקסימום • הוכחות חברתיות — ביקורות, לוגואים של לקוחות, מספרים • CTA בכל דף — אל תשאירו את המבקר בלי שיודע מה לעשות 3. טכני (Technical): • רספונסיביות — "תוודא שהאתר נראה מושלם במובייל" • מהירות — "תוודא שאין תמונות כבדות מדי, השתמש ב-next/image" • SEO — "תוסיף meta title, description, ו-Open Graph tags לכל דף" • נגישות — "תוסיף alt text לכל תמונה ו-aria labels לכפתורים"

אחרי שהשלד מוכן, השתמשו בפרומפטים האלה לשדרוג: אנימציות: "תוסיף אנימציות עדינות: fade-in בגלילה לכל סקציה, hover effects על כרטיסיות ולינקים, ואנימציית כניסה ל-Hero. השתמש ב-CSS transitions או framer-motion." מהירות: "תעבור על כל הדפים ותוודא: lazy loading לתמונות, next/image במקום img רגיל, אין CSS או JS מיותרים, font loading אופטימלי." SEO: "תוסיף לכל דף: meta title ו-description ייחודיים, Open Graph tags עם תמונה, JSON-LD structured data (Organization לדף הבית, LocalBusiness לצור קשר), כותרות h1-h6 בהיררכיה נכונה, sitemap.xml ו-robots.txt." Google Analytics: "תוסיף Google Analytics 4 עם Google Tag Manager. תוודא שהטראקינג עובד על כל הדפים ושיש events על לחיצות CTA וטפסים." ביצועים: "תריץ בדיקת Lighthouse על כל הדפים ותתקן כל בעיה שמורידה את הציון מתחת ל-90." מובייל: "תבדוק את כל הדפים ברזולוציות: 375px (iPhone), 768px (iPad), 1024px (laptop), 1440px (desktop). תתקן כל בעיית layout, גודל טקסט, או ריווח."

1. לא לתכנן לפני שמתחילים הטעות: לקפוץ ישר לקוד בלי מבנה ברור. התוצאה — אתר מבולגן שצריך לבנות מחדש. הפתרון: תכננו את כל הדפים, הסקציות, והתוכן לפני שנותנים ל-Claude Code את הפרומפט הראשון. 2. פרומפטים כלליים מדי הטעות: "תבנה אתר לחברה שלי" — בלי פרטים, צבעים, או מבנה. הפתרון: השתמשו בפרומפטים המפורטים שבמדריך הזה. ככל שתהיו יותר ספציפיים, התוצאה תהיה יותר טובה. 3. להתעלם ממובייל הטעות: לבדוק רק על מחשב ולשכוח שרוב הגולשים בישראל גולשים מהטלפון. הפתרון: אחרי כל שלב, בקשו: "תוודא שזה נראה מושלם במובייל". 4. לא לעשות commits הטעות: לבנות הכל בפעם אחת ואז לגלות שמשהו נשבר. הפתרון: "תעשה commit אחרי כל דף שמסיימים". ככה תמיד אפשר לחזור אחורה. 5. להתעלם מ-SEO הטעות: לבנות אתר יפה שגוגל לא מוצא. הפתרון: בסוף הבנייה, בקשו: "תעבור על כל הדפים ותוודא שה-SEO מושלם — meta tags, כותרות, structured data, sitemap". 6. טקסט placeholder הטעות: להשאיר "Lorem ipsum" או טקסט זמני באתר. הפתרון: כתבו את התוכן האמיתי לפני הבנייה, או בקשו מ-Claude Code לכתוב טקסטים ואז ערכו אותם.

הנה תהליך עבודה שלם, שלב אחרי שלב: שלב 1 — הקמת פרויקט (5 דקות): "צור פרויקט Next.js 15 חדש עם TypeScript ו-Tailwind CSS. צור CLAUDE.md עם ההגדרות. החברה שלי עוסקת בייעוץ עסקי, שם החברה 'אופק ייעוץ', צבע ראשי כחול כהה #1e3a5f, צבע משני זהב #d4a853." שלב 2 — דף ראשי (15 דקות): [השתמשו בפרומפט דף ראשי מלמעלה עם הפרטים שלכם] שלב 3 — דפים פנימיים (30 דקות): [בנו דף אחרי דף — אודות, שירותים, צור קשר] שלב 4 — ניווט ו-Footer (10 דקות): "תוסיף Header קבוע עם לוגו, תפריט ניווט עם לינקים לכל הדפים, ו-hamburger menu למובייל. תוסיף Footer עם מידע על החברה, לינקים מהירים, ואייקונים לרשתות חברתיות." שלב 5 — שיפורים (20 דקות): [השתמשו בפרומפטים לשיפור — אנימציות, SEO, מהירות] שלב 6 — העלאה לאוויר: "הכן את הפרויקט ל-deployment ב-Vercel. תוודא ש-next build עובר בלי שגיאות." סך הכל: אתר חברה מקצועי תוך שעה וחצי.