ארגז הכלים של Vibe Coder — הכל ביחד

תהליך העבודה המלא — 6 שלבים מרעיון לאתר חי

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

זו המפה שתחזור אליה בכל פרויקט שתעשה מהיום:

הטעות הכי נפוצה של Vibe Coders מתחילים: קופצים ישר משלב 1 ל-4. הרעיון בראש ומיד פותחים V0 ומתחילים ליצור. התוצאה — שעות של שינויי כיוון, קוד שלא מרגיש שלם, ופרויקט שנתקע באמצע. 30 דקות על brief וstack חוסכות 5 שעות על תיקונים.

אז מה עושים בכל שלב? נרחיב על כל אחד, אבל הנה הכלל הכללי:

• אם השלב הבא לא ברור — חוזרים אחורה. אם אתה לא יודע איך לכתוב prompt (שלב 3), זה כי ה-brief (שלב 1) לא מלא. חזור ותשלים.
• אף שלב לא לוקח יותר מ-20% מהזמן הכולל. אם brief לוקח 3 שעות — אתה over-engineering. אם QA לוקח 8 שעות — בנית יותר מדי לפני שבדקת.
• שלב 4 (Build) הוא iterative. לא בונים הכל בפעם אחת. בונים שלד → בודקים → מוסיפים → בודקים → משפרים.

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

ארגז הכלים המלא — Reference Table

הטבלה הזו היא ה-cheatsheet של הקורס. כל הכלים ממוינים לפי קטגוריה, עם הבחירה המומלצת (default) וחלופות. שמרו אותה כ-bookmark — אתם תחזרו אליה בכל פרויקט חדש.

Frameworks (פרק 03)

CSS ו-Styling (פרק 04)

Component Libraries (פרק 05)

WOW Components ואנימציות (פרק 06)

Icons, Fonts ו-Assets (פרק 07)

Hosting ו-Deployment (פרק 09)

AI Tools לבנייה

Utilities נוספים

איזה AI tool לכל שלב — Claude Code, V0, ChatGPT, Cursor

אחת הטעויות הגדולות של Vibe Coders מתחילים היא להשתמש בכלי אחד לכל דבר. זה לא עובד. כל כלי AI מותאם למשימה אחרת, וה-workflow המקצועי משלב 2–3 כלים בפרויקט אחד.

הנה החלוקה לפי שלבים:

דוגמה מהחיים של workflow ישראלי טיפוסי:

1. בוקר: שיחה עם Claude chat — "אני רוצה לבנות לייף קואוצ'ית ישראלית אתר. תעזור לי לחדד מה חשוב." → brief של עמוד אחד.
2. צהריים: V0 — לוקחים את ה-brief, מבקשים "Build a landing page for Israeli life coach". מקבלים אתר שלם תוך 5 דקות.
3. אחה"צ: Cursor — פותחים את הפרויקט ב-VS Code, מבקשים "שפר את ה-hero עם animation מ-Magic UI", "הוסף טופס יצירת קשר עם Resend".
4. ערב: ChatGPT — "איך מחברים דומיין .co.il ל-Vercel?" → מדריך צעד אחר צעד.

4 כלים, יום עבודה אחד, אתר חי. אף אחד מהם לא היה יכול לעשות את כל השלבים טוב באותה מידה.

תבנית Brief ל-AI — המסמך שחוסך שעות

זו אולי התובנה הכי חשובה בקורס כולו: כל דקה שאתה מוציא על brief חוסכת 10 דקות של תיקונים. Vibe Coder מתחיל כותב "תבנה לי אתר פורטפוליו". Vibe Coder מקצועי כותב brief של 20 שורות. הפער בתוצאה — עצום.

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

# Project Brief: [שם הפרויקט]

## 1. Context
- מי אני: [Vibe Coder, agency, freelancer, סטודנט]
- מי הלקוח: [עצמי, לקוח אמיתי, עבור מוצר שלי]
- מטרת האתר: [להרוויח כסף, להציג עבודות, MVP לסטארט-אפ]

## 2. Audience
- קהל יעד ראשי: [גיל, מקצוע, מה הם מחפשים]
- שפה: [עברית, אנגלית, או bilingual]
- דפדפן ומכשיר עיקריים: [desktop/mobile, מה יותר חשוב]

## 3. Pages & Features
- דפים: [home, about, contact, blog, dashboard...]
- פיצ'רים: [טופס, auth, תשלומים, dashboard, דרק-ו-דרוף]
- אינטגרציות: [Supabase, Stripe, Resend, Google Analytics]

## 4. Stack (from Chapter 10 framework)
- Framework: [Next.js 15 / Astro / Vite]
- Styling: [Tailwind CSS v4]
- Components: [shadcn/ui + Aceternity UI]
- Icons: [Lucide]
- Font: [Heebo לעברית + Inter לאנגלית]
- Hosting: [Vercel / Cloudflare Pages]

## 5. Design Direction
- Style: [minimal, bold, playful, corporate, dark]
- Colors: [primary, secondary, accent — HEX codes אם יש]
- Reference sites: [2–3 URLs שאתה אוהב]
- Mood: [מקצועי, צעיר, יוקרתי...]

## 6. Constraints
- תקציב: [חינם / $X/חודש]
- Timeline: [כמה זמן יש לך]
- SEO: [חשוב מאוד / לא חשוב]
- Accessibility: [WCAG AA מינימום]

## 7. Success Criteria
- איך תדע שזה מוצלח: [3 משפטים ברורים]

זה נראה הרבה, אבל מילוי לוקח 20–30 דקות. הטיפ: כשאתה לא יודע מה לכתוב בסעיף — זה סימן שצריך לחשוב עליו לפני שבונים. Brief לא מלא = פרויקט לא מוכן.

עכשיו, אחרי שהתאוריה ברורה — בואו נראה 3 workflows שלמים, עם brief אמיתי, stack, prompts ו-deployment. זה הלב של הפרק.

Workflow 1: פורטפוליו אישי — מקצה לקצה

Case: עומר, מעצב UX ישראלי, רוצה פורטפוליו שיציג 8 עבודות. חינם לחלוטין. אנגלית + עברית. עלייה לאוויר תוך יומיים.

שלב 1: Define (30 דקות)

# Portfolio Brief — Omer
- מי: מעצב UX, 5 שנות ניסיון
- לקוח: חברות סטארטאפ ישראליות ובינלאומיות
- מטרה: להביא 2–3 פניות בחודש
- דפים: Home, Works (8 פרויקטים), About, Contact
- שפה: אנגלית עיקרית, עברית משנית
- Design: מינימלי, dark mode, typography-first
- Reference: brunomatheus.com, olafurw.com
- הצלחה: 10+ מבקרים/יום מ-LinkedIn, 2 פניות חמות/חודש

שלב 2: Choose Stack

• Framework: Astro — תוכן סטטי, SEO מעולה, קל
• Styling: Tailwind CSS v4
• Components: shadcn/ui (מינימלי — רק Button ו-Card)
• Animations: Magic UI (Blur Fade לתמונות)
• Icons: Lucide
• Font: Inter (אנגלית) + Heebo (עברית)
• Hosting: Cloudflare Pages (unlimited bandwidth חינם)
• Domain: omer.design (סדר גודל של $35–45/שנה ברישום/חידוש ב-Cloudflare Registrar או Porkbun; סיומת .design יקרה יותר מ-.com. חלופה זולה: omercohen.com בכ-$10–12/שנה)

שלב 3: Prompt ל-AI

Create an Astro portfolio site for Omer Cohen, UX designer.

Pages:
- / — hero with "UX Designer for Israeli & global startups",
  latest 3 works, brief about, contact CTA
- /works — grid of 8 project cards (image + title + tags + year)
- /works/[slug] — case study template
- /about — 2-column layout: bio + skills
- /contact — form (name, email, project type, message)

Tech:
- Astro 5 + Tailwind CSS v4
- shadcn/ui for Button and Card
- Magic UI "Blur Fade" for project images
- Inter font (English) + Heebo (Hebrew subset)
- Dark mode default, light mode toggle
- Lucide icons

Content:
- Professional minimal tone
- English primary, Hebrew /he route secondary
- Project metadata in src/content/works/*.md (MDX)

Deploy config:
- Cloudflare Pages with build command "npm run build"
- Output: /dist

שלב 4: Build (3–5 שעות מפוזרות)

1. Bolt: להעלות את ה-prompt, לקבל שלד עובד (20 דק').
2. Cursor: לפתוח את הפרויקט, להוסיף תוכן אמיתי — 8 פרויקטים עם תמונות (מ-Unsplash או מ-case studies אמיתיים).
3. V0: בשלב נפרד, לעצב את דף works/[slug] — hero גדול, 3 תמונות, טקסט, "Next project".
4. Magic UI: להוסיף "Blur Fade" לתמונות כך שהן נטענות עם fade-in. Cursor: "Add Magic UI BlurFade to project images".

שלב 5: QA

• Mobile: לבדוק ב-Chrome DevTools responsive mode (iPhone 14, Pixel 7)
• Dark mode toggle עובד ונשמר ב-localStorage
• Hebrew route /he עובד עם RTL נכון
• Lighthouse: Performance 95+, SEO 100, Accessibility 95+
• Links to LinkedIn, Twitter, Email — כולם עובדים

שלב 6: Ship

1. Push ל-GitHub (repo ציבורי או פרטי)
2. Cloudflare Pages: Connect repo → build command → deploy
3. קנייה של omer.design מ-Cloudflare Registrar או Porkbun (כ-$35–45/שנה לסיומת .design; לחלופין omercohen.com בכ-$10–12/שנה)
4. DNS: Cloudflare מגדיר אוטומטית
5. SSL: אוטומטי, תוך 10 דקות
6. תוך שעה אחרי push — האתר חי ב-omer.design

עלות כוללת: כ-$35–45/שנה לסיומת .design (או $10–12/שנה ל-.com) — דומיין בלבד, כל השאר חינם. זמן: 2 ימי עבודה. תוצאה: פורטפוליו מקצועי, מהיר, SEO-ready.

שלב 6.5: Post-Deployment — מה עושים ביום שאחרי ה-launch

ה-deploy הוא לא סוף הסיפור — זו נקודת ההתחלה של המדידה והשיווק. רוב ה-Vibe Coders לוחצים "deploy", משתפים פוסט ב-LinkedIn, ומפסיקים להסתכל על האתר. זה הרגע שבו מפסידים את 70% מהערך. הנה צ'קליסט של 10 משימות ל-72 השעות הראשונות אחרי שהאתר עולה:

1. Analytics: התקנת Plausible (חינמי לפרויקטים קטנים, פרטי), Vercel Analytics (אוטומטי ב-Vercel), או Google Analytics 4. ודאו שה-pageview event יורה — פתחו את האתר בחלון פרטי, חכו 30 שניות, תראו ב-Real-Time של הדשבורד.
2. Google Search Console: היכנסו ל-search.google.com/search-console, הוסיפו את הדומיין (URL prefix property), אמתו בעלות דרך DNS TXT record ב-Cloudflare. שלחו את ה-sitemap.xml שיצרתם. תוך 2–7 ימים Google יתחיל לאנדקס.
3. Bing Webmaster Tools: 5 דקות, ייבוא אוטומטי מ-Google Search Console. בישראל זה מקור נוסף של ~5% traffic ושווה את המאמץ.
4. Lighthouse אחרי deploy: הציון ב-production שונה מ-localhost. הריצו Lighthouse על הדומיין החי. אם Performance ירד מ-90 — CDN caching או image optimization לא עובדים, תקנו לפני שמשתפים.
5. First-100-visitors QA: שלחו את הלינק ל-3 אנשים שונים: (א) חבר שמבין בטכנולוגיה, (ב) חבר שלא מבין, (ג) הבן-דוד שלכם עם iPhone ישן ו-4G חלש. בקשו מכל אחד דבר אחד ספציפי — "מה קורה כשאתה לוחץ על הקישור הזה?", "באיזה שלב איבדת עניין?". כתבו את התגובות. המשוב הראשוני הזה שווה יותר מ-100 מבקרים אקראיים.
6. Broken link check: הריצו את npx broken-link-checker https://your-site.com או השתמשו ב-Dr. Link Check. קישור שבור בעמוד About = אסון של אמינות.
7. Open Graph debugger: בדקו איך הקישור נראה כששולחים אותו. LinkedIn Post Inspector (linkedin.com/post-inspector), Facebook Sharing Debugger (developers.facebook.com/tools/debug), WhatsApp — פשוט שלחו לעצמכם בהודעה אישית. אם לא מופיעה תמונה — ה-og:image לא מוגדר נכון.
8. SSL & security headers: הריצו את securityheaders.com על הדומיין. יעד: ציון B+ או יותר. Next.js 15 עם הגדרות ברירת המחדל של Vercel מגיע בדרך כלל ל-B; A+ דורש next.config.js עם Content-Security-Policy.
9. Launch post: פוסט LinkedIn עם 3 תמונות (screenshot מהאתר, תהליך העבודה, תובנה אחת שלמדתם), טקסט של 200–300 מילים, קישור בתגובה הראשונה (לא בפוסט עצמו — ה-algorithm של LinkedIn מעניש קישורים חיצוניים בפוסט).
10. מעקב שבועי: שבוע אחרי ה-launch — כמה מבקרים, מאיפה הגיעו, באיזה עמוד יצאו. אם 80% יוצאים מה-hero — הכותרת או ה-CTA לא עובדים. זה נתון שבלי analytics אתם מפספסים.

Workflow 2: SaaS Dashboard — מקצה לקצה

Case: מיכל, יזמית ישראלית, בונה "TaskFlow" — כלי ניהול משימות לצוותים קטנים. Landing page שיווקי + אפליקציה עם dashboard, auth, billing. MVP תוך חודש.

שלב 1: Define

# TaskFlow SaaS Brief
- מי: יזמית solo, MVP ראשון
- לקוח: צוותי סטארטאפ 5–20 אנשים בישראל ובינלאומי
- מטרה: 10 משלמים תוך 90 יום אחרי לאנץ'
- חלקים:
  • Marketing site (landing, pricing, docs, blog)
  • App — /app (dashboard, tasks, projects, team)
  • Auth — email/password + Google
  • Billing — Stripe subscriptions ($9/$29/$99)
- שפה: אנגלית (שוק בינלאומי)
- הצלחה: MRR של $200 ב-90 יום

שלב 2: Choose Stack

• Framework: Next.js 15 App Router (SSR, API routes, middleware ל-auth)
• Styling: Tailwind CSS v4
• Components: shadcn/ui (Table, Dialog, Form, Sidebar — כל ה-set)
• Charts: Recharts (בתוך shadcn/ui)
• Auth & DB: Supabase (PostgreSQL + Auth מובנה)
• Payments: Stripe + Stripe Checkout
• Emails: Resend (transactional)
• Hosting: Vercel (Pro tier $20/חודש)
• Analytics: Vercel Analytics + Plausible

שלב 3: Prompt ל-AI (לחלק ה-MVP בלבד)

Build a Next.js 15 SaaS starter for TaskFlow — team task management.

Structure:
- app/(marketing)/ — landing, pricing, docs, blog
- app/(app)/dashboard — authenticated area
- app/(app)/tasks — CRUD for tasks
- app/(app)/team — invite/manage members
- app/(app)/settings — account, billing

Tech:
- Next.js 15 App Router
- Tailwind CSS v4 + shadcn/ui (full component set)
- Supabase for auth and database
- Middleware: protect /app routes, redirect to /login
- Stripe Checkout for upgrade button (use test keys)

Features for MVP:
- Email/password auth + Google OAuth
- Create/edit/delete tasks (title, description, status, assignee)
- Simple Kanban view (To Do, In Progress, Done)
- Team invite via email link
- 3 pricing tiers with Stripe

שלב 4: Build (5–12 שבועות — 5 לצוות של 2 עם ניסיון; 8–12 ל-solo founder)

זה פרויקט גדול — לא בונים בישיבה אחת. חשוב לכייל ציפיות: הלו"ח המהיר (5 שבועות) הוא ריאלי רק אם יש שני אנשים, לפחות אחד מהם עם ניסיון קודם ב-Next.js + Supabase + Stripe, ועובדים במשרה מלאה. Solo founder עם עבודה צדדית יגיע לאותן תוצאות תוך 8–12 שבועות — וזה בסדר. פירוק לשלבים (הזמנים בהמשך הם לצוות של 2; הכפילו ב-1.5–2 ל-solo):

• שבוע 1: Lovable או V0 — יוצרים את ה-marketing site + auth scaffolding. פריסה ראשונית ל-Vercel.
• שבוע 2: Cursor + Claude Code — מחברים Supabase, בונים את ה-schema (users, teams, tasks), מגדירים RLS (Row Level Security).
• שבוע 3: Dashboard — Cursor: "Build a Kanban board for tasks using shadcn/ui Card and drag-and-drop with @dnd-kit".
• שבוע 4: Stripe integration — Claude Code: "Add Stripe Checkout with 3 pricing tiers. Use webhooks to update user.plan in Supabase".
• שבוע 5: Polish — emails (Resend), onboarding flow, empty states, settings page.

שלב 5: QA (יותר מקיף מפורטפוליו)

• Auth flows: signup, login, logout, password reset — כולם עובדים
• Middleware באמת חוסם — נסה לגשת ל-/dashboard בלי login, אתה מופנה ל-/login
• Stripe Checkout עובר מ-test mode ל-live mode
• Webhooks של Stripe מגיעים ל-Vercel (לבדוק ב-Stripe Dashboard)
• Emails נשלחים דרך Resend (signup confirmation, invite)
• RLS בעצם חוסם — User A לא יכול לראות tasks של User B
• Lighthouse על /marketing: 90+, על /dashboard: 80+ (זה OK ל-app)

שלב 6: Ship

1. Vercel: הגדרת environment variables (SUPABASE_URL, SUPABASE_ANON_KEY, STRIPE_KEY, RESEND_KEY)
2. Domain: taskflow.app ($15/שנה) — חיבור ל-Vercel
3. Stripe: מעבר מ-test ל-live keys
4. Supabase: upgrade ל-Pro ($25/חודש) אם יש 100+ משתמשים
5. Analytics: התקנת Plausible או Vercel Analytics
6. Launch ב-Product Hunt / LinkedIn / קהילות ישראליות (Startup Israel, Geektime)

עלות כוללת: $20/חודש (Vercel Pro) + $15/שנה (domain) + עמלות Stripe (כ-2.9% + ~1.1 ש"ח לעסקה, משתנה לפי מטבע). זמן: 5–12 שבועות (5 לצוות של 2 עם ניסיון; 8–12 ל-solo founder שעובד במקביל לעבודה אחרת). תוצאה: SaaS עם הכנסות ראשונות.

Workflow 3: Landing Page שיווקי — מקצה לקצה

Case: אביב, יועץ עסקי ישראלי, רוצה landing page יחיד לקורס אונליין חדש — "AI לעסקים קטנים". מטרה: 100 הרשמות לוובינר חינמי תוך 30 יום.

שלב 1: Define

# Landing Page Brief — AI Business Course
- מי: יועץ עסקי, ליסט של 3,000 נרשמים
- לקוח: בעלי עסקים קטנים ישראלים, 35–55
- מטרה: 100 הרשמות לוובינר
- שפה: עברית בלבד
- Design: מקצועי, בוטח, גוון אדום-כחול (מוכר מהמותג של אביב)
- Reference: altmba.com, buildspace.so
- הצלחה: conversion rate 8%+ מ-traffic של FB ads

שלב 2: Choose Stack

• Framework: Next.js 15 (טוב ל-SEO, אפשר להוסיף בלוג בהמשך)
• Styling: Tailwind CSS v4
• Components: shadcn/ui (Form, Button, Accordion ל-FAQ)
• WOW: Aceternity UI — Sparkles hero, Spotlight effect
• Icons: Lucide
• Font: Heebo
• Form backend: Resend + Supabase (לשמירת leads)
• Hosting: Vercel (חינם — פרויקט יחיד)
• Analytics: Vercel Analytics + Meta Pixel (ל-FB ads)

שלב 3: Prompt ל-AI

Build a single-page Hebrew landing page for an AI course webinar.

Sections (in order, Hebrew RTL):
1. Hero — "AI לעסקים קטנים — וובינר חינם", subtitle, date,
   Aceternity Sparkles effect, CTA button "הרשמה חינם"
2. Problem/Solution — "כל העסקים שלכם עובדים על AI. אתם?"
   3 pain points vs 3 solutions
3. What you'll learn — 6 items with Lucide icons
4. About the instructor — תמונה + bio + 3 הישגים
5. Social proof — 4 citations מלקוחות קיימים
6. FAQ — 6 שאלות נפוצות (shadcn Accordion)
7. Final CTA — form: name, email, phone, business size
   → saves to Supabase + sends confirmation via Resend

Colors:
- primary: #DC2626 (red-600)
- accent: #2563EB (blue-600)
- bg: white with subtle gradient on hero

Tech: Next.js 15, Tailwind v4, shadcn/ui, Aceternity Sparkles & Spotlight,
Heebo font, full RTL layout.

שלב 4: Build (6–10 שעות)

1. V0: להעלות prompt — לקבל את 7 הסקשנים עם shadcn (1 שעה).
2. Cursor: לפתוח את הפרויקט, להוסיף את Aceternity Sparkles ב-hero ואת Spotlight ב-About (30 דקות).
3. Cursor: להוסיף תוכן אמיתי — העתק-הדבק מהקופי שאביב כתב בנפרד (2 שעות).
4. Claude Code: לחבר את הטופס ל-Supabase + Resend. "When form submitted, save to Supabase 'leads' table and send confirmation email via Resend" (1.5 שעות).
5. V0: לתקן חלקים ספציפיים ("תעצב את ה-FAQ מחדש עם accordion יותר יפה").

שלב 5: QA

• RTL: כל הטקסטים מיושרים ימינה, האייקונים בצד הנכון
• Mobile first: ב-iPhone 14 הדף נראה מושלם (מרבית ה-traffic מ-Facebook הוא mobile)
• טופס: שולח באמת ל-Supabase, הלקוח מקבל email
• Meta Pixel: יורה "Lead" event בטופס — לבדוק ב-Meta Events Manager
• Lighthouse Performance: 95+ (landing חייב להיות מהיר — כל שנייה פחות conversion)
• Dark mode: לא חובה ב-landing — אפשר להשאיר light בלבד

שלב 6: Ship

1. Vercel: deploy אוטומטי מ-GitHub
2. Domain: aviv-ai.co.il (25 ש"ח לשנה ראשונה במבצעי רישום אצל רשמים כמו domain.co.il / Livedns; חידוש שנתי רגיל נע בין 45–80 ש"ח. לחלופין .com בכ-$10–12/שנה)
3. Environment variables: SUPABASE + RESEND keys
4. Meta Pixel ID + Google Tag Manager
5. Facebook Ads: יצירת קמפיין שמוביל לאתר
6. A/B test (בשבוע 2): גרסה B של ה-hero — "90 דקות שישנו את העסק שלכם"

עלות כוללת: 25–80 ש"ח/שנה (domain .co.il, תלוי אם שנה ראשונה במבצע או חידוש) + $0 hosting. זמן: 2 ימי עבודה. תוצאה יעד: 100 הרשמות ב-30 יום במחיר 4–6 ש"ח לליד (קהל ישראלי מקומי, נישה לא תחרותית במיוחד, קריאייטיב סביר ו-landing עם conversion rate 6%+; בתחרות גבוהה או קהל יקר — 10–25 ש"ח לליד זה יותר ריאליסטי).

Workflow 4: אתר קורס/מדריך 10-פרקים — המקרה של nVision Academy

Case: שירה, מרצה לשיווק דיגיטלי, כתבה מדריך של 10 פרקים על "SEO לבעלי עסקים קטנים". רוצה אתר שמציג את כל הפרקים כמו ספר דיגיטלי, עם ניווט בין פרקים, חיפוש, ו-tracking התקדמות. חינמי לקוראים, עם CTA לקורס בתשלום שלה בסוף. זה בדיוק ה-pattern של learn.nvision.me עצמו — ולכן הוא ה-workflow הכי רלוונטי לבוגרי הקורס הזה שרוצים לבנות משהו משלהם.

שלב 1: Define

# Course Site Brief — "SEO למתחילים"
- מי: מרצה לשיווק, ליסט של 5,000 נרשמים
- לקוח: בעלי עסקים קטנים ישראלים, 30–55, לא טכניים
- תוכן: 10 פרקים של 3,000-5,000 מילים כל אחד
- מטרה: traffic אורגני מ-Google + lead magnet לקורס בתשלום
- פיצ'רים:
  • תוכן עניינים (hub) + דפי פרק נפרדים
  • ניווט prev/next בין פרקים
  • תוכן עניינים בתוך כל פרק (anchor links)
  • CTA לקורס בתשלום בסוף כל פרק
  • סימון "הושלם" לפרק (localStorage, בלי auth)
  • print-friendly (אנשים מדפיסים מדריכים ארוכים)
- שפה: עברית RTL
- Design: מקצועי, קריא, טיפוגרפיה חזקה — לא "wow", "readable"
- הצלחה: 500 מבקרים/חודש אורגני תוך 6 חודשים, CTR 3% ל-CTA

שלב 2: Choose Stack

• Framework: Astro — אידיאלי לתוכן סטטי ארוך, SEO מעולה, טעינה מהירה. Content Collections ל-MDX.
• Styling: Tailwind CSS v4 + @tailwindcss/typography (המחלקה prose לפורמט אוטומטי של H1/H2/P/UL בתוך MDX).
• Components: shadcn/ui רק למה שצריך — Button, Sheet (ל-mobile nav), Accordion ל-FAQ.
• Search: Pagefind (חינמי, client-side, אפס שרת, מושלם ל-Astro).
• Icons + Font: Lucide + Heebo (אופטימלי לקריאת עברית ארוכה).
• Hosting: Cloudflare Pages (bandwidth ללא הגבלה — חשוב אם המדריך ייעשה ויראלי).
• Analytics: Plausible — reading depth events דרך GTM (לדעת עד איזה פרק קוראים מגיעים).

שלב 3: Prompt ל-AI — התבנית הייחודית לאתרי-קורס

זה prompt שונה מפורטפוליו או SaaS — יש לו דגשים ייחודיים. העתיקו ותתאימו:

Build an Astro 5 Hebrew-first course site for a 10-chapter SEO guide.

Architecture:
- src/content/chapters/01-intro.mdx through 10-advanced.mdx (MDX with frontmatter:
  title, order, readingTime, summary, prev, next).
- src/pages/index.astro — hub page listing all 10 chapters in a grid with
  progress indicators (reads localStorage key 'completedChapters').
- src/pages/chapters/[slug].astro — dynamic route that renders one MDX file.
- src/layouts/ChapterLayout.astro — shared header with chapter progress bar,
  floating TOC (sticky sidebar on desktop, Sheet on mobile), prev/next nav,
  "mark as read" button at the bottom.
- src/components/CTABlock.astro — reusable CTA block injected at the end of
  each chapter (title, subtitle, button linking to paid course).

Content treatment:
- Use @tailwindcss/typography `prose prose-lg prose-he` on the article.
- Hebrew-specific: letter-spacing: -0.01em on Heebo, line-height: 1.8, max-width 68ch.
- Pull-quote component for important callouts.
- Table of contents generated from MDX headings (h2/h3 only), anchor links.
- Reading time calculated from word count (Hebrew: ~220 words/minute).

Navigation:
- Persistent top bar with "Chapter N of 10" and a thin progress bar.
- Prev/Next footer with chapter titles, not just arrows.
- Keyboard shortcuts: left/right arrows for prev/next chapter.

SEO (Hebrew):
- Article schema.org/JSON-LD per chapter.
- BreadcrumbList schema: Home > Course > Chapter N.
- hreflang he-IL.
- og:image per chapter (dynamic, generated with @vercel/og or similar).

Tech stack: Astro 5, Tailwind v4, shadcn/ui (Sheet + Accordion + Button only),
Pagefind for search, Heebo font, Lucide icons, Cloudflare Pages deployment.

שלב 4: Build (8–15 שעות מפוזרות על שבועיים)

1. Claude Code: להעלות את ה-prompt, לקבל את השלד המלא (שעתיים). Astro הוא יחסית פחות מוכר ל-AI tools מ-Next.js, אז Claude Code עדיף על V0 לפרויקט הזה.
2. Cursor: להעתיק תוכן אמיתי של פרק אחד ל-MDX, לוודא ש-prose מעצב טוב, לתקן טיפוגרפיה עברית (spacing, ניקוד במקומות הנכונים).
3. Cursor + Claude Code: להוסיף Pagefind — ריצת npx pagefind אחרי build, קומפוננטה SearchBar שקוראת את ה-index. זמן: 90 דקות.
4. Cursor: לכתוב את שאר 9 הפרקים ב-MDX. זה לא "build" — זה content. 6–10 שעות נטו אם התוכן מוכן בטיוטה.
5. Claude Code: OG images דינמיות, schema, sitemap עם priority גבוה לפרקים (0.8) ונמוך ל-hub (0.6).

שלב 5: QA — ייחודי לאתר קורס

• קריאות: פתחו פרק אקראי, קראו 5 דקות. אם העיניים מתעייפות — line-height, font-size או max-width לא נכונים. הפרק הזה הוא המבחן, לא ה-design.
• Print CSS: Cmd+P על פרק. האם נראה כמו PDF מקצועי, או שהניווט ו-CTA מופיעים? הוסיפו @media print שמסתיר nav, sidebar, CTA — ומשאיר רק תוכן + header מינימלי.
• Deep linking: לחיצה על H2 ב-TOC → anchor scroll חלק, URL מתעדכן (/chapters/01#section-3). שליחת הלינק הזה לחבר — הוא נופל ישר לאמצע הפרק.
• LocalStorage: סמנו פרק כ"הושלם", סגרו טאב, חזרו — עדיין מסומן? פתחו חלון פרטי — מסומן? (לא אמור — כי זה localStorage, לא account).
• Search: חיפוש בעברית של מילה שמופיעה בפרק 7 → תוצאה. של מילה שלא קיימת → empty state מסודר.
• Lighthouse פר-פרק: Performance 95+, Accessibility 100, SEO 100. אם לא — CSS Heebo fallback, alt חסר, או LCP של תמונה ראשונה.

שלב 6: Ship + Content Marketing

1. Cloudflare Pages: deploy אוטומטי מ-GitHub.
2. Domain: guide.shira-seo.co.il (subdomain זול ופשוט) או shira-seo.com/guide אם יש כבר אתר ראשי.
3. Google Search Console: submit sitemap, בקשת אינדוקס לכל 10 הפרקים ידנית (URL Inspection → Request Indexing).
4. פרסום בפרוסה: לא כל 10 הפרקים ביום אחד. פרק אחד לשבוע ב-LinkedIn + ליסט, עם thread על התובנות. זה נותן 10 שבועות של מומנטום במקום יום אחד.
5. Lead magnet: בסוף פרק 3, 6, 10 — CTA חזק ("רוצים את זה כ-PDF? תרשמו") שמוסיף ל-email list.

עלות כוללת: $0 hosting (Cloudflare Pages) + דומיין 25–80 ש"ח/שנה ל-.co.il או $10–12/שנה ל-.com. זמן: 2 שבועות build + יצירת תוכן (תלוי אם מוכן מראש). תוצאה: נכס דיגיטלי שיוצר leads אורגנית 24/7. רוב ה-Vibe Coders שמצליחים להתפרנס בונים לעצמם נכס כזה בחודשים הראשונים.

Quality Checklist — 15 בדיקות לפני שמפרסמים

לפני שאתה לוחץ על "deploy to production" — רוץ על הרשימה הזו. 30 דקות עכשיו חוסכות לך מביכות ענק אחר כך.

רוצים לחסוך זמן? בקשו מ-Claude Code: "Go through this Next.js project and check items 1–15 from the pre-launch checklist. Report which ones pass, which fail, and fix the easy ones." — הוא יעבור אוטומטית על רובם.

Lighthouse Audit — איך להריץ ולהבין את התוצאות

Lighthouse הוא כלי חינמי של Google שבונה דו"ח מלא על האתר שלך ב-4 קטגוריות. הוא מובנה בתוך Chrome ולוקח 30 שניות להריץ.

איך מריצים

1. פתחו את האתר שלכם ב-Chrome (רצוי במצב Incognito — בלי extensions)
2. לחצו F12 או Cmd+Option+I (DevTools)
3. בטאבים למעלה, לחצו על Lighthouse
4. בחרו Device: Mobile (חשוב! רוב ה-traffic mobile)
5. סמנו את כל 5 הקטגוריות: Performance, Accessibility, Best Practices, SEO, PWA (אופציונלי)
6. לחצו Analyze page load
7. המתינו 30–60 שניות

מה אומרות התוצאות

אם ציון נמוך — Lighthouse נותן לך רשימת תיקונים ספציפית. העתק אותה ל-Cursor: "Here's my Lighthouse report. Fix the top 5 Performance issues." — תוך 10 דקות יש לך אתר עם 95+.

Core Web Vitals (LCP, INP, CLS) הם לא רק "ציון" — Google משתמש בהם לדירוג. אתר עם Lighthouse Performance של 60 יופיע נמוך יותר מאתר זהה עם 95. זה fair game של SEO ב-2026.

SEO בסיסי ל-Vibe Coders — מה לבקש מ-AI

SEO הוא עולם שלם, אבל 80% מהתוצאות מגיעות מ-5 דברים בסיסיים. כולם פשוטים לבקש מ-AI ולממש תוך חצי שעה:

1. Meta Tags בכל דף

// app/layout.tsx או בכל page.tsx
export const metadata = {
  title: "שם העמוד — שם האתר",
  description: "תיאור קצר של 150–160 תווים שיופיע בתוצאות Google",
  keywords: ["מילת מפתח", "עוד מילה"],
  openGraph: {
    title: "אותו title",
    description: "אותו description",
    images: ["/og-image.png"], // 1200×630
  },
};

Prompt ל-AI: "Add proper Next.js metadata exports to every page, in Hebrew. Include title, description, Open Graph, and Twitter cards."

2. Sitemap.xml ו-robots.txt

Prompt ל-AI: "Add app/sitemap.ts and app/robots.ts using Next.js 15 built-in support. Include all pages automatically." — Next.js יוצר את הקבצים אוטומטית.

3. Structured Data (JSON-LD)

Google מבין טוב יותר אתר עם structured data. לעסק מקומי (ישראלי): schema.org/LocalBusiness. לבלוג: schema.org/BlogPosting. Prompt: "Add JSON-LD structured data for a LocalBusiness in Tel Aviv."

4. Open Graph Image

תמונה 1200×630 שתופיע כש-משתפים את האתר ב-LinkedIn, WhatsApp, Twitter. בלי זה, הקישור נראה עלוב. Next.js מאפשר ליצור OG images דינמיות עם opengraph-image.tsx. Prompt: "Create dynamic Open Graph images using Next.js 15 opengraph-image.tsx".

5. Performance = SEO

Google רואה את Core Web Vitals. אתר איטי = דירוג נמוך. זה כבר מכוסה ב-Lighthouse מהסעיף הקודם. הערה ביקורתית: אם Lighthouse Performance > 90 — SEO-wise אתה סגור לרוב המקרים.

6. AI Briefing Template ל-SEO — prompt שמייצר את כל הבסיס

במקום ללכת לסעיף-סעיף ולבקש מ-AI כל דבר בנפרד, יש prompt אחד גדול שחוסך שעה של עבודה. העתיקו את התבנית הזו ל-Claude Code / Cursor / ChatGPT, מלאו את המשתנים בסוגריים, ותקבלו חבילה שלמה של מטא-נתונים, schema ו-sitemap מוכנים ליישום:

# SEO Foundation Prompt — Next.js 15

You are an SEO engineer. The project is a [PROJECT TYPE: portfolio / SaaS landing / Israeli service site]
targeting [TARGET AUDIENCE: Israeli small business owners, global UX hiring managers...]
in [LANGUAGE: Hebrew / English / both].

Primary keywords: [3-5 keywords, e.g. "בניית אתרים עם AI", "יועץ עסקי AI", "vibe coder portfolio"]
Secondary keywords: [5-8 supporting terms]
Brand name: [BRAND]
Base URL: [https://example.com]

Produce the following, ready to paste:

1. app/layout.tsx — default metadata export (title template with brand suffix,
   description, keywords array, openGraph with siteName and locale he_IL/en_US,
   twitter card type "summary_large_image", metadataBase).
2. For each of these pages, a page-level metadata export:
   - /            (home — broad, brand-heavy)
   - /about       (personal/company narrative)
   - /services OR /pricing (commercial intent)
   - /contact     (local intent, include city)
3. app/sitemap.ts — dynamic sitemap that includes all static routes + any MDX blog posts.
4. app/robots.ts — allow all, reference sitemap URL.
5. JSON-LD structured data for schema.org/[LocalBusiness | Organization | Person]
   including name, url, logo, sameAs (social profiles), address (if local), telephone.
6. One opengraph-image.tsx that renders a 1200x630 image with the brand name,
   subtitle, and accent color [HEX].
7. A Hebrew-friendly slug helper (lowercase, hyphens, no niqqud, transliterate or keep Hebrew).

Constraints:
- Title length: 50-60 chars. Description: 150-160 chars.
- Hebrew titles must read naturally; do NOT keyword-stuff.
- Every image must have meaningful alt text (not "image" or filename).
- Do not invent facts about the business; leave [BRACKETS] for values you don't have.

התוצאה של ה-prompt הזה היא שלד SEO מלא לפרויקט. אם משהו חסר — בקשו המשך: "Now add FAQ schema to /services". החוכמה היא להפוך SEO לסט של prompts חוזרים, לא לדבר שמחליטים עליו מחדש בכל פרויקט.

7. On-Page SEO Checklist — 10 פריטים לכל דף

המטא-נתונים הם הבסיס, אבל SEO אמיתי קורה בתוך הדף. לפני שאתם מפרסמים דף חדש (home, blog post, landing, case study), רוצו על הצ'קליסט הזה. הוא פר-דף, לא פר-אתר:

Next.js 15 מטפל אוטומטית ב-4, 9 ו-10 אם מגדירים metadataBase ב-layout. ב-1, 2, 8 האחריות עליכם. 3, 5, 6 — שם Vibe Coders נופלים הכי הרבה, כי V0 מייצר לפעמים 2 H1 או תמונות בלי alt. לכן הצ'קליסט הזה נעשה אחרי ה-AI, לא לפניו.

8. Israeli Search Intent — מה שונה ב-SEO בעברית

אם הקהל שלכם ישראלי, יש כמה הבדלים קריטיים שאף קורס בינלאומי לא מלמד:

• Google.co.il שונה מ-google.com: דף התוצאות בישראל מושפע יותר מאתרים ישראליים (.co.il), מ-Google Maps מקומי, ומ-Featured Snippets בעברית. אם אתם מדרגים אתר ישראלי — השוואות ב-google.com ילכו שולל. השתמשו תמיד ב-google.co.il עם חלון פרטי.
• Hebrew keyword research: כלים כמו Ahrefs ו-SEMrush מכסים עברית חלקית. עדיף לעבוד עם Google Keyword Planner (חינם, נדרש חשבון Ads), Google Trends (השוואת "vibe coder" מול "מפתח AI" בישראל), וה-"People also ask" של Google עצמו. תכתבו מילת מפתח ב-google.co.il, תגללו, תראו מה Google חושב שהאנשים שואלים באמת.
• ניקוד וכתיב: אנשים מחפשים "בנייה" לא "בְּנִיָּה", "AI" לא "בינה מלאכותית" (או שניהם — תלוי בקהל). טעויות כתיב נפוצות ("חיפוש" מול "חפוש") — שווה לכלול את שתיהן ב-keywords array.
• עברית + אנגלית באותו דף: Google מבין שני שפות באותו דף, אבל מעדיף עקביות. אם רוב הדף עברי, כתבו <html lang="he" dir="rtl">. אם יש גרסה אנגלית — דף נפרד עם hreflang.
• Long-tail בעברית זול יותר: התחרות על "אתר" או "פורטפוליו" בעברית — טירוף. אבל "פורטפוליו מעצב UX תל אביב" או "קורס AI לעסקים קטנים בעברית" — פתוח כמעט לכל אחד. המיקוד ב-long-tail עברי = shortcut לדירוג.

Reference Sheet אישי — המסמך שאתה חוזר אליו בכל פרויקט

סיימתם את הקורס — אבל הידע לא שווה כלום אם הוא לא מאורגן. Reference Sheet הוא מסמך אחד (Notion page, Google Doc, README במחשב) שמרכז את כל מה שאתה צריך כדי להתחיל פרויקט.

המבנה המומלץ:

1. My Defaults — הכלים שלך (Next.js 15 + Tailwind + shadcn + Vercel, או מה שבחרת)
2. Decision Frameworks — 5 השאלות מפרק 10, ה-decision framework מפרק זה
3. Brief Template — התבנית המלאה מהפרק (להעתקה בכל פרויקט)
4. Prompt Library — 20 prompts מנצחים שכבר השתמשת בהם ועבדו
5. Quality Checklist — 15 הפריטים מהפרק הזה
6. Links & Docs — קישורים ל-Next.js docs, shadcn, Aceternity, Vercel dashboard
7. API Keys / Credentials — רשימה של השירותים שאתה משתמש בהם (בלי keys אמיתיים — הם ב-1Password)
8. Learning Queue — דברים שאתה רוצה ללמוד בחודש הבא

תוכנית 90 יום — מה לבנות בשבועות הקרובים

סיום הקורס הוא ההתחלה. ידע בלי build זה ידע שמתעייף. הנה תוכנית 90 יום מעשית — כל שבוע עם משימה ברורה ותוצר מוחשי.

למה 12 שבועות? כי זה הזמן שלוקח לעבור מ"למדתי" ל"אני עושה את זה באמת". גם אם תעשה רק 6 מה-12 משימות — אתה ב-top 10% של Vibe Coders.

מה הלאה — סדרת WOW: 3 קורסים ממשיכים

הקורס הזה, Web Stack for Vibe Coders, הוא הראשון בסדרה של 4. הוא נתן לך את ה-foundation — איזה כלים, איך מחברים אותם, איך בונים פרויקט שלם. הקורסים הבאים לוקחים אותך מ-"בניתי אתר" ל-"בניתי אתר שאי-אפשר להפסיק להסתכל עליו".

קורס 2: CSS Design Mastery

ההבדל בין אתר "בסדר" לאתר "וואו" הוא לא הקוד — הוא ה-design sense. הקורס הזה מלמד:

• Typography שבאמת עובד — hierarchy, scale, pairing
• Color theory ו-gradient mastery — מעבר משמוש "random" ל-systematic
• Spacing ו-rhythm — למה Apple נראה יקר ולמה האתר שלך לא
• Dark mode שעושה את ההבדל
• Glassmorphism, neumorphism, aurora — ה-visual languages של 2026
• Design tokens ו-design systems — לבנות שפה ויזואלית עקבית

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

קורס 3: Motion, Animation & 3D

בקורס הזה למדת על Aceternity ו-Magic UI — components מוכנים. בקורס הבא תלמד לבנות אנימציות משלך:

• Framer Motion מאפס לעד — variants, gestures, layout animations
• GSAP ו-ScrollTrigger — אנימציות scroll מורכבות כמו apple.com
• Three.js ו-React Three Fiber — 3D בתוך האתר
• Lottie — אנימציות vector קלות
• Micro-interactions — הפרטים הקטנים שעושים את ההבדל
• Performance של אנימציות — אין "אנימציה שקטלנית" אם היא תוקעת את הדפדפן

מי צריך: מי שרוצה לבנות אתרים ב-level של awwwards.com. הקורס יפורסם בקרוב

קורס 4: WOW Playbook

הקורס האחרון בסדרה הוא ה-business side. איך הופכים את היכולות שלמדת ל-freelance business:

• איך לבנות פורטפוליו שמביא לקוחות (לא רק שמציג עבודות)
• תמחור פרויקטים — מ-5,000 ש"ח עד 50,000 ש"ח לפרויקט
• איך למצוא לקוחות — LinkedIn, קהילות ישראליות, cold outreach
• Client management — briefing, feedback rounds, revisions
• Productized services — לבנות פעם אחת ולמכור 100 פעמים
• Case studies שמוכרים — איך לכתוב, איך לצלם, איך להציג

מי צריך: מי שרוצה לעבור מ-"לומד לבנות" ל-"מתפרנס מזה". לעבור לקורס ←