מדריך מעשי למנהלי שיווק בארגונים שרוצים לבנות אתר B2B מקצועי עם AI. בלי לשלם לסוכנות, בלי לוותר על שליטה, עם ממשק ניהול תוכן שלא דורש פרומפטים.
הנאבר הסופי של האתר. Dark pill, לוגו SVG עם אייקון הפלנטה, ניווט נקי.
הרגע שהחלטתי לקחת את זה לידיים
בוא נתחיל מהסוף: הרבה שנים שילמתי לסוכנויות על תחזוקת אתר. כל שינוי קטן, כפתור, צבע, טקסט, היה עובר דרך מייל, Slack, ותהליך אישור שלוקח שבועיים. ובסוף מה שהיה עולה לאוויר לא היה בדיוק מה שביקשתי.
ב-2026, אחרי שהבנתי מה סוכני AI מסוגלים לעשות היום, החלטתי לבנות את האתר של העסק מאפס. לבד. עם AI. לא כתחביב, אלא כפרויקט B2B אמיתי עם CMS, ניהול הרשאות, גיבוי קוד וכלי אנליטיקס. תוך 72 שעות היה לי אתר חי עם עמוד ראשי, מגזין, עמוד CV ודף יצירת קשר.
הכלי שפתח לי את הראש לגבי מה שאפשר לעשות עם סוכני AI היה Manus AI (הרשמה דרך הלינק שלי נותנת לכם 500 קרדיטים בחינם). ברגע שראיתי סוכן שפותח דפדפן, מנווט לאתרים ומבצע משימות בצורה אוטונומית, הבנתי שהמשחק השתנה.
במדריך הזה אני משתף בדיוק איך עשיתי את זה, שלב אחרי שלב. אילו כלים, אילו פרומפטים, כמה זה עלה ומה החלקים שכל CMO או VP Marketing צריך לשים לב אליהם אם הוא רוצה לעשות את זה בעצמו.
הכלים שהשתמשתי: ה-Stack המלא
לפני שנכנס לפרטים, הנה תמונה כללית של מה שנמצא מתחת למכסה:
| תפקיד | כלי | עלות |
|---|---|---|
| סוכן AI, תכנון + אוטומציה | Manus AI (500 קרדיטים בהרשמה דרך הלינק) | Free Tier |
| סוכן AI, כתיבת קוד + browser agent | Claude (Cowork / Code) | ~$20/חודש |
| Framework | Next.js 15 (App Router) | $0 |
| ספריות עיצוב | Tailwind CSS, Framer Motion, GSAP, Lenis | $0 |
| ניהול תוכן (CMS) | Sanity.io | Free Tier |
| Hosting + CDN | Vercel | Free Tier |
| גיבוי קוד | GitHub | $0 |
| אנליטיקס | GA4, Meta Pixel, LinkedIn Insight Tag, Hotjar | $0 |
סה"כ? כ-$20 לחודש על Claude Pro, והשאר ב-Free Tier. לעומת 3,000 עד 10,000 דולר שסוכנות היתה גובה על בנייה ותחזוקה חודשית.
עמוד ה-CV. תמונה full-bleed עם אלמנט הפלנטה, אנימציית mouse-follow, ועיצוב שנבנה כולו עם AI.
איך AI עבד בפועל: החיבור לדפדפן שמשנה את הכל
זה החלק שהכי הפתיע אותי. הכלים של היום לא רק מייצרים טקסט. הם מתחברים לדפדפן שלך, רואים את המסך ומבצעים פעולות.
בפועל, ככה זה עבד אצלי:
עם Manus AI: השתמשתי ב-Manus כדי לחקור אתרי השראה, לנתח מתחרים, לאסוף מידע על ספריות עיצוב ולתכנן את מבנה האתר. Manus פתח דפדפן, נכנס לאתרים, העתיק מבנים והציע לי ארכיטקטורה שלמה. אני לא כתבתי שורת קוד אחת.
עם Claude Cowork: הסוכן של Claude התחבר לדפדפן שלי, ראה את הקוד, את Vercel, את GitHub ופשוט עשה דברים. לא "הציע". עשה. הוא דחף קוד ישירות ל-GitHub דרך ה-API, בדק אם ה-Build עבר ב-Vercel, ואם היתה שגיאת TypeScript הוא תיקן אותה וחזר לדחוף.
הנה דוגמא לפרומפט אמיתי שכתבתי:
מפרומפט כזה Claude בנה mockup שלם עם Three.js, אנימציות GSAP, particle system ותאורה תלת-ממדית. הכל בקובץ HTML אחד שפתחתי וראיתי מיד.
הפרומפט השני שהשתמשתי בו כדי לבנות את עמוד ה-CV:
מתוך 2 פרומפטים האלה Claude בנה 4 קבצים חדשים, שינה את הנאבר, יצר עמוד שלם, תרגם את התוכן שלי מעברית ודחף הכל ל-GitHub. Vercel בנה את האתר מחדש אוטומטית תוך 40 שניות.
כל שינוי מתועד ב-GitHub. אפשר לראות בדיוק מה נעשה, מתי, ולחזור אחורה בכל שלב.
Sanity CMS: ניהול תוכן שלא דורש פרומפטים
ועכשיו לחלק שהכי קריטי למי שמנהל צוות שיווק בחברה: ממשק ניהול התוכן.
כשהצוות שלך צריך לעדכן כותרת בעמוד הבית, להוסיף פוסט חדש למגזין או לשנות תמונה, הם לא צריכים לדבר עם AI. לא צריכים לכתוב פרומפט. לא צריכים לגעת בקוד. הם נכנסים ל-Sanity Studio, רואים טפסים נקיים, ממלאים שדות, לוחצים "Publish" והאתר מתעדכן אוטומטית.
למה Sanity ולא WordPress?
Sanity הוא headless CMS, מה שאומר שהתוכן מנוהל בממשק נפרד מהאתר עצמו. זה נותן כמה דברים שמנהלי שיווק חייבים:
1. ניהול הרשאות אמיתי. אפשר להגדיר מי Editor, מי Admin, ומי Viewer. אנשי תוכן לא רואים קוד, ומפתחים לא שוברים תוכן.
2. Schemas מובנים. כל סוג תוכן מוגדר עם שדות ברורים. אי אפשר "לשבור" את העיצוב כי הכותב פשוט ממלא טופס שהקוד יודע לקרוא.
3. API-first. כל מה שנמצא ב-Sanity זמין דרך API, מה שאומר שאותו תוכן יכול להזין את האתר, את האפליקציה ואת הניוזלטר. ממקום אחד.
ממשק Sanity Studio. עורכי תוכן ממלאים שדות, לא כותבים קוד.
GitHub: גיבוי קוד הוא לא אופציונלי
כל שורת קוד באתר שלי נמצאת ב-GitHub. כל commit מתועד עם הודעה ברורה שמסבירה מה השתנה. למה זה חשוב?
בואו נדבר על התרחיש שאף אחד לא רוצה לדבר עליו: מה קורה כשהפרילנסר שבנה לכם את האתר עוזב? או כשסוכנות סוגרת? אם הקוד נמצא אצלם, אתם תקועים. אם הוא ב-GitHub שלכם, אתם בעלים. כל מפתח חדש יכול להיכנס, לקרוא את ה-commit history ולהבין בדיוק מה נבנה ואיך.
טיפ נוסף: GitHub נותן לכם branching. זה אומר שאפשר לנסות שינוי עיצובי ב-branch נפרד, לראות Preview ב-Vercel, ורק אם מאשרים, לשלב את זה לאתר החי. בדיוק כמו A/B test, אבל לעיצוב.
ספריות העיצוב שגורמות לאתר להרגיש מקצועי
אחד הדברים שהפתיעו אותי בתהליך: הסוכן לא רק בנה עמודים, הוא השתמש בספריות עיצוב ברמה של סטודיו מקצועי. הנה מה שנכנס לאתר:
Tailwind CSS. במקום לכתוב CSS ידני שנשבר בכל מסך, Tailwind נותן utility classes מוכנים. כל רכיב מעוצב ישירות ב-HTML, אין קובץ CSS נפרד שהולך לאיבוד, והעקביות הוויזואלית שמורה לאורך כל האתר.
Framer Motion. אנימציות כניסה שמרגישות חלקות. כל סקשן שעולה על המסך נכנס עם fade-in ו-slide-up עדין. זה מה שגורם לאתר להרגיש "חי" ולא סתם דף סטטי.
GSAP + ScrollTrigger. אנימציות מתקדמות שמגיבות ל-scroll. אלמנטים שזזים, סקשנים שנעצרים ואפקטי parallax. ב-mockup שבנינו היה horizontal scroll של case studies שנראה כמו מתוך אתר של סטודיו עיצוב.
Lenis. smooth scrolling שגורם לגלילה להרגיש native. דבר קטן שעושה הבדל גדול בחוויה.
הנקודה החשובה: אני לא כתבתי אף אחד מהקודים האלה ביד. ה-AI ידע לבחור את הספריות הנכונות, לשלב אותן, ולייצר קוד שעובד. כל מה שהייתי צריך לעשות זה לתאר מה אני רוצה לראות.
סקשן ה-Toolkit. בועות floating עם Framer Motion, מעוצב ב-Tailwind CSS, תוכן מנוהל דרך Sanity.
Analytics Layer: $0 על מעקב מלא
לא משנה כמה האתר יפה. אם אין לכם data, אין לכם כלום. הנה מה שהכנסתי ולמה:
Google Analytics 4. הבסיס. Events, conversions, funnels. כל מנהל שיווק מכיר, ואם לא הגדרתם עדיין GA4 זה הזמן. הגדרה תיקח 5 דקות עם environment variable ב-Vercel וקוד gtag.js קצר.
Meta Pixel (Facebook). קריטי אם אתם מריצים demand gen ב-Facebook/Instagram. ברגע שהפיקסל על האתר אתם יכולים לבנות Custom Audiences ו-Lookalike Audiences מהמבקרים. בעולם B2B כל ליד שנכנס שווה הון.
LinkedIn Insight Tag. וזה הזהב האמיתי ל-B2B. ה-Insight Tag מזהה אנשים לפי חברה, תפקיד ותעשייה. אתם יכולים לדעת שמנהלת שיווק מחברה X ביקרה בעמוד ה-case studies שלכם, ולשלוח לה InMail ממוקד.
Hotjar / Microsoft Clarity. Heatmaps והקלטות של משתמשים. רוצים לדעת אם אנשים באמת מגיעים ל-CTA שלכם? Clarity בחינם, Hotjar בחינם עד רמה מסוימת. אין תירוץ.
כל ארבעת הכלים האלה עלו לי $0. רק צריך להוסיף scripts דרך Vercel environment variables או ישירות בקוד.
SEO: איך שומרים על ותק כשמחליפים אתר
אם יש לכם אתר WordPress קיים עם ותק SEO, אל תזרקו אותו. הנה מה שעשיתי כדי לשמור על הערך:
Metadata דינמי מ-Sanity. כל פוסט, כל עמוד, ה-title, description ו-OG image נשלפים אוטומטית מ-Sanity. מנהלי תוכן מגדירים את ה-SEO מהממשק בלי לגעת בקוד.
Sitemap אוטומטי. Next.js מייצר sitemap.xml אוטומטית שמתעדכנת עם כל פוסט חדש. Google crawlers מקבלים מפה מעודכנת תמיד.
301 Redirects. כשעוברים מ-WordPress, כל URL ישן צריך redirect לכתובת החדשה. ככה Google לא מפסיד את ה-juice שנצבר. ב-Next.js זה פשוט, מגדירים ב-next.config.js וזהו.
OpenGraph. כל שיתוף בלינקדאין, בוואטסאפ או בטוויטר מושך תמונה, כותרת ותיאור מותאמים. זה נראה טוב ומגדיל CTR בפיד.
Vercel. כל push ל-GitHub מייצר deployment חדש אוטומטית. Status: Ready תוך 40 שניות.
כמה זה עלה לי בפועל
אני אוהב שקיפות, אז הנה הפירוט:
| כלי | תוכנית | עלות חודשית |
|---|---|---|
| Manus AI | Free Tier | $0 |
| Claude Pro | Pro | $20 |
| Vercel | Hobby (Free) | $0 |
| Sanity.io | Free | $0 |
| GitHub | Free | $0 |
| Analytics (GA4 + Pixel + Hotjar) | Free | $0 |
סה"כ: בערך $20 לחודש. לעומת 3,000 עד 10,000 דולר חד פעמי ועוד 500 עד 1,500 דולר תחזוקה חודשית שסוכנות גובה.
עמוד הבית. Hero section עם תמונת פרופיל, אנימציות Framer Motion ועיצוב Tailwind CSS.
שאלות ששאלו אותי כבר
צריך לדעת לתכנת כדי לעשות את זה?
לא. זה הפואנטה. אני לא מתכנת. אני יודע לתאר מה אני רוצה, להבין מה התוצאה, ולבקש תיקונים. ה-AI כותב את הקוד, אני מנהל את הפרויקט.
מה קורה אם AI שובר משהו באתר?
לכן GitHub קיים. כל שינוי מתועד, ואפשר לחזור לכל גרסה קודמת בלחיצת כפתור. Vercel גם נותן Instant Rollback, חזרה לגרסה הקודמת תוך שנייה.
האם אנשי התוכן שלי יצטרכו לעבוד עם AI?
ממש לא. Sanity Studio נראה כמו כל CMS רגיל. טפסים, שדות, כפתור Publish. הם לא ירגישו הבדל מ-WordPress.
מה עם SEO? לא אפסיד את מה שצברתי?
עם 301 redirects, metadata דינמי ו-sitemap אוטומטי שומרים על כל ה-juice. Next.js גם טוען מהר יותר מ-WordPress, מה שעוזר ב-ranking.
אפשר לעשות את זה עם Manus AI לבד?
Manus מעולה לתכנון, מחקר והרצת משימות אוטונומיות (ואגב, דרך הלינק שלי מקבלים 500 קרדיטים בחינם). לכתיבת קוד ספציפית השתמשתי ב-Claude. השילוב של השניים ביחד הוא מה שנתן את התוצאה.
אז מה הצעד הבא?
אם הגעת עד לכאן, כנראה שאתה כבר חושב על זה. ובצדק. האפשרות לבנות אתר B2B מקצועי עם CMS, ניהול הרשאות, אנליטיקס וגיבוי קוד, בלי סוכנות ובלי לשבור את התקציב, היא אמיתית.
לא צריך להיות מפתח. צריך להיות מנהל שיווק שיודע לנהל פרויקט ולתאר מה הוא רוצה.
התחילו עם Manus AI + 500 קרדיטים בחינם דרך הלינק שלי
רוצים שאלווה אתכם בתהליך? דברו איתי.
