Design-to-Code Handoff — מ-Claude Design ל-Claude Code

מהו Design-to-Code Handoff ולמה זה Game Changer

בעולם העיצוב המסורתי, Design-to-Code Handoff (העברה מעיצוב לקוד) הוא אחד השלבים הכי כואבים בפרויקט. מעצב מסיים עיצוב ב-Figma, מכין "Handoff" עם Specs ומרחקים, ואז מפתח מנסה לשחזר את העיצוב בקוד. התוצאה? שבועות של פינג-פונג: "זה לא מה שעיצבתי", "הצבע הזה לא מדויק", "ברגע שזה במובייל הכל נשבר." על פי נתוני תעשייה (Zeplin, 2023), מעצבים ומפתחים מבזבזים ממוצע של כ-8 שעות בשבוע על תקשורת לא יעילה במהלך handoff.

עם Claude Design ו-Claude Code, ה-pipeline הזה קורס לשעה אחת. אין מעצב ומפתח נפרדים — יש אתם. אתם מעצבים ב-Claude Design, מייצאים HTML, פותחים ב-Claude Code, אומרים לו "שדרג את הדף הזה עם responsive ואנימציות" — ומעלים לאוויר. זה לא רק חוסך זמן. זה מחליף מודל עסקי שלם.

חשבו על זה ככה: לפני Claude, בעל עסק קטן שרצה Landing Page היה צריך לשכור מעצב (3,000-5,000 ש"ח), מפתח (5,000-15,000 ש"ח), ולחכות 2-4 שבועות. אחרי Claude — אותו בעל עסק יכול לעשות את זה בעצמו תוך שעה, או לשכור פרילנסר שעושה את זה ב-1,000-3,000 ש"ח ומספק תוך יום. ה-pipeline הזה דמוקרטיזציה של עיצוב ופיתוח web.

לפני ואחרי — בטבלה

חשוב להבין: ה-pipeline הזה לא מחליף כל פרויקט פיתוח. הוא מחליף פרויקטים ספציפיים — Landing Pages, אתרי תדמית, portfolios, דפי מוצר, event pages. אבל בדיוק אלה הם 80% מהפרויקטים שעסקים קטנים ופרילנסרים צריכים. נגיע למגבלות בהמשך הפרק.

למה הפרק הזה קריטי בקורס

בפרקים 1-10 בניתם מיומנויות עיצוב עם Claude Design: למדתם את הממשק (פרק 2), בניתם one-pagers (פרק 5), עיצבתם Landing Pages (פרק 6), הגדרתם Design Systems (פרק 7), יצרתם Brand Assets (פרק 8), פתרתם בעיות RTL (פרק 9), ובניתם wireframes ו-prototypes (פרק 10). כל אלה הם תוצרים יפים — אבל הם עדיין קבצים במחשב שלכם. הפרק הזה סוגר את הפער: הוא הופך עיצוב לאתר חי שלקוחות, שותפים ומשתמשים יכולים לגשת אליו.

מבחינה עסקית, זו הנקודה שבה המיומנות הופכת לשירות. בפרק 12 תלמדו למכור את ה-pipeline כשירות פרילנס, אבל בלי היכולת לעשות deploy — אין מה למכור. לקוח לא משלם על Figma file; הוא משלם על אתר שעובד.

ה-Pipeline: Claude Design → Export → Claude Code → Deploy

לפני שנצלול לפרטים, בואו נראה את התמונה המלאה. ה-pipeline מורכב מ-5 שלבים, ולכל שלב יש קלט, פלט, וכלי ספציפי:

שימו לב למשהו חשוב: שלבים 1-3 כבר למדתם. בפרק 3 למדתם לכתוב brief ולייצר עיצוב. בפרק 6 למדתם לבנות Landing Pages ולייצא HTML. בפרק 10 עשיתם prototype אינטראקטיבי. הפרק הזה מוסיף שני שלבים חדשים: שדרוג ב-Claude Code ו-Deploy. זה מה שהופך עיצוב לאתר חי.

למה ה-Pipeline עובד כל כך טוב

ה-pipeline של Claude Design → Claude Code עובד טוב כי שני הכלים מבוססים על אותו מודל שפה — Claude. כש-Claude Design מייצר HTML, הוא כותב קוד שמבנה לוגי. כש-Claude Code קורא את הקוד הזה, הוא מבין אותו ברמה עמוקה — לא רק את ה-syntax אלא את ה-intent. הוא "יודע" ש-<section class="hero"> הוא אזור ראשי עם כותרת וקריאה לפעולה, ומתאים את השדרוגים בהתאם.

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

ייצוא HTML מ-Claude Design — Best Practices

בפרק 6 למדתם את הבסיס של ייצוא HTML. כאן נלך צעד נוסף — כי כשה-HTML הזה הולך ל-Claude Code ולא רק לצפייה בדפדפן, ההכנה צריכה להיות שונה. HTML שמיוצא "כמו שהוא" עובד, אבל HTML שמיוצא נכון חוסך 30% מהזמן ב-Claude Code.

10 כללים לייצוא HTML מוכן ל-Handoff

1. הגדירו Design System לפני הייצוא — אם לא הגדרתם DS (פרק 7), ה-HTML יכיל סגנונות Inline במקום CSS classes. זה עובד, אבל Claude Code צריך לעבוד קשה יותר כדי לשפר
2. ודאו ש-RTL מוגדר ברמת המסמך — בדקו שיש dir="rtl" ו-lang="he". אם לא (פרק 9) — בקשו מ-Claude Design: "הוסף dir=rtl ו-lang=he ל-HTML"
3. תנו שמות משמעותיים לסקשנים — אם יש לכם סקשן Hero, ודאו ש-ID שלו הוא hero ולא section-1. בקשו: "תן ID semantי לכל סקשן"
4. הפרידו CSS מ-HTML — בקשו מ-Claude Design: "ייצא עם קובץ CSS נפרד, לא inline styles." זה קריטי לעבודה ב-Claude Code
5. ודאו שתמונות מקושרות נכון — אם יש תמונות, הן צריכות להיות בתיקייה images/ עם נתיבים relative
6. בדקו שהפונטים מוגדרים — ודאו שיש Google Fonts link ב-head. פונט Heebo לעברית, Inter או Poppins לאנגלית
7. הסירו אלמנטים זמניים — Placeholder text, תמונות דמה, הערות פנימיות — הכל צריך להיות אמיתי או מסומן
8. בדקו בדפדפן לפני ייצוא — פתחו את ה-HTML בדפדפן. אם הוא נשבר שם — הוא יישבר גם ב-Claude Code
9. ודאו מבנה תיקיות נכון — צרו תיקייה עם שם הפרויקט, בתוכה: index.html, style.css, images/
10. שמרו את ה-Brief המקורי — ב-Claude Code תרצו לתת context. שמרו קובץ brief.md בתיקיית הפרויקט

דוגמה: מבנה תיקייה מוכן ל-Handoff

ככה צריכה להיראות תיקיית הפרויקט לפני שפותחים ב-Claude Code:

my-landing-page/
├── index.html          ← HTML מיוצא מ-Claude Design
├── style.css           ← CSS נפרד (לא inline)
├── brief.md            ← ה-Brief המקורי
├── prompts.md          ← ספריית 6 Prompts
└── images/
    ├── hero-bg.jpg     ← תמונת רקע ל-Hero
    ├── logo.svg        ← לוגו העסק
    └── team.jpg        ← תמונת צוות

שימו לב: אין קבצים מיותרים. אין .DS_Store, אין thumbs.db, אין עותקים ישנים. Claude Code "רואה" את כל הקבצים בתיקייה — קבצים מיותרים מבלבלים אותו ומבזבזים context. זה אותו עיקרון שלמדתם בפרק 3 לגבי prompts ברורים: input נקי = output טוב יותר.

פתיחת HTML ב-Claude Code — מה לצפות

Claude Code הוא כלי שרץ ב-Terminal (שורת הפקודה) של המחשב שלכם. הוא לא אתר — הוא תוכנה שמותקנת מקומית ועובדת ישירות על הקבצים שלכם. אם מעולם לא עבדתם עם Terminal — אל דאגה. כל פקודה שנדרשת תופיע כאן מילה במילה.

התקנת Claude Code (אם עדיין לא התקנתם)

Claude Code דורש Node.js 18+. אם אתם לא בטוחים אם Node.js מותקן, פתחו Terminal (ב-Mac: חפשו "Terminal" ב-Spotlight. ב-Windows: חפשו "PowerShell" בתפריט Start) והקלידו:

node --version

אם מופיע מספר גרסה (למשל v20.12.0) — אתם מוכנים. אם מופיעה שגיאה — התקינו Node.js מ-nodejs.org (בחרו את גרסת LTS). עכשיו התקינו את Claude Code:

npm install -g @anthropic-ai/claude-code

אחרי ההתקנה, הריצו claude ועקבו אחרי הוראות ההתחברות. תצטרכו להתחבר עם חשבון Anthropic שלכם (אותו חשבון של Claude Design). ב-Mac/Linux תראו הודעה שמבקשת אימות דרך הדפדפן — לחצו על הקישור שמופיע, התחברו, וחזרו ל-Terminal. ב-Windows התהליך זהה.

[SCREENSHOT NEEDED — מסך התקנה ראשוני של Claude Code]

פתרון בעיות התקנה נפוצות

שלוש בעיות שמתרחשות הכי הרבה:

• "npm: command not found" — Node.js לא מותקן. התקינו מ-nodejs.org
• "EACCES: permission denied" — ב-Mac/Linux, הריצו עם sudo npm install -g @anthropic-ai/claude-code (ותזינו סיסמת המחשב)
• "Claude Code requires Pro or higher" — ודאו שהמנוי שלכם פעיל ב-claude.ai/settings. חשבון Free לא כולל Claude Code

פתיחת פרויקט קיים

נניח ששמרתם את ה-Landing Page המיוצא בתיקייה ~/projects/my-landing-page/. כך פותחים אותו ב-Claude Code:

cd ~/projects/my-landing-page
claude

Claude Code יטען ויציג prompt. עכשיו אתם יכולים לדבר איתו על הקבצים בתיקייה. הוא כבר "רואה" את כל הקבצים — HTML, CSS, תמונות — ומבין את המבנה שלהם.

מה לצפות מה-HTML המיוצא

HTML שמגיע מ-Claude Design הוא בדרך כלל תקין ונראה טוב, אבל יש לו מגבלות צפויות:

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

איך Claude Code "רואה" את הקבצים

כשאתם מפעילים Claude Code בתיקיית הפרויקט, הוא סורק את כל הקבצים ובונה הבנה של המבנה. הוא יודע שיש index.html עם סקשנים ספציפיים, שיש style.css עם classes מסוימים, ושיש תמונות בתיקייה. כשאתם מבקשים "make it responsive" — הוא לא מנחש. הוא קורא את ה-HTML, מזהה את האלמנטים שצריכים התאמה, ועורך את ה-CSS בהתאם.

זה שונה מהותית מ-Claude Chat רגיל. ב-Chat, Claude יכול לתת לכם קוד — אבל אתם צריכים להעתיק ולהדביק. ב-Claude Code, הוא עורך ישירות את הקבצים שלכם. הוא גם יכול ליצור קבצים חדשים (JavaScript, למשל), לשנות שורות ספציפיות ב-CSS, ולהריץ פקודות בשורת הפקודה. זו הסיבה שהוא כל כך יעיל ל-handoff — אתם נותנים לו HTML, הוא משדרג אותו in-place.

Review the HTML files in this directory. List all issues that need fixing for production — responsiveness, accessibility, SEO, performance, and RTL.

Prompt ל-Claude Code: שדרג את ה-HTML הזה

הכוח האמיתי של Claude Code הוא שאתם מדברים איתו בשפה טבעית — ממש כמו שדיברתם עם Claude Design. אבל יש הבדל: Claude Design עובד על Canvas ויזואלי, ו-Claude Code עובד על קבצים. לכן ה-Prompts צריכים להיות מדויקים יותר לגבי מה לשנות, באיזה קובץ, ולאיזה תוצאה.

ספריית Prompts — 6 Prompts מוכנים

הנה 6 prompts שמכסים את רוב השדרוגים שתצטרכו. שמרו אותם בקובץ prompts.md בתיקיית הפרויקט שלכם — תשתמשו בהם שוב ושוב בכל פרויקט. בדיוק כמו ספריית ה-Prompts שבניתם ב-Claude Design (פרק 3), גם כאן כדאי לבנות ספרייה ולעדכן אותה לאורך הזמן — prompts שעבדו טוב נשארים, prompts שלא — משתנים. העתיקו אותם כמו שהם, או התאימו לפרויקט שלכם:

1. Responsive — Mobile First

Make this landing page fully responsive. Use mobile-first approach.
The page must look great on: mobile (375px), tablet (768px), desktop (1280px).
Use CSS Grid or Flexbox — no fixed pixel widths.
Test: the hero section, navigation, and CTA must be usable on mobile.
Keep the existing design — just make it adapt to smaller screens.

2. JavaScript — אינטראקטיביות

Add interactivity to this landing page:
1. Smooth scroll when clicking navigation links
2. Mobile hamburger menu (the nav should collapse on mobile)
3. Form validation on the contact/lead form — name and phone required, show inline errors in Hebrew
4. Scroll-triggered fade-in animations on sections (use IntersectionObserver, not a library)
Keep it lightweight — no external JS libraries.

3. Forms — טופס לידים פונקציונלי

Make the contact form functional:
1. Validate: name (required), phone (Israeli format: 05X-XXXXXXX), email (optional)
2. On submit: send data to a webhook URL (I'll provide it later — for now use a placeholder)
3. Show success message in Hebrew: "תודה! נחזור אליך תוך 24 שעות"
4. Show error message if submission fails
5. Add loading state to the submit button
6. Store submissions in localStorage as backup

4. RTL — תיקוני עברית

Fix all RTL issues in this page:
1. Ensure dir="rtl" and lang="he" on the html tag
2. Fix any LTR elements that should be RTL (navigation, lists, form labels)
3. Fix mixed content — English words inside Hebrew paragraphs should display correctly
4. Numbers and dates should appear in correct order
5. Icons and arrows should flip for RTL where needed
6. Use CSS logical properties (margin-inline-start instead of margin-left)

5. SEO — אופטימיזציה בסיסית

Add SEO optimization to this landing page:
1. Add proper meta tags: title, description, og:title, og:description, og:image
2. Add structured data (JSON-LD) for a LocalBusiness
3. Make sure all images have alt text in Hebrew
4. Add a canonical URL tag
5. Ensure heading hierarchy is correct (one H1, H2s for sections)
6. Add lang="he" and proper charset

6. Performance — ביצועים

Optimize this page for performance:
1. Add lazy loading to all images below the fold
2. Minify the CSS
3. Add preconnect for Google Fonts
4. Compress images if possible (suggest WebP format)
5. Move non-critical CSS to end of body
6. Aim for 90+ Lighthouse performance score

הוספת אינטראקטיביות — JavaScript, Forms, Animations

HTML שמגיע מ-Claude Design הוא סטטי — הוא נראה יפה אבל לא עושה כלום. אי אפשר ללחוץ על כפתור ולראות תגובה. אי אפשר למלא טופס ולשלוח. אי אפשר לראות אנימציות. Claude Code מוסיף את השכבה הזו — ובגלל שהוא כותב JavaScript, הוא יכול להוסיף כמעט כל אינטראקציה שתרצו.

אם אתם באים מעולם העיצוב (Canva, Figma) — האינטראקטיביות היא מה שמבדיל אתר מקצועי מ-PDF מעוצב. אתר שמגיב ללחיצות, שמציג אנימציות, ושמאפשר למשתמש למלא טופס ולקבל תשובה — זה מה שלקוחות מצפים לו. ב-Claude Design לבד, אתם יכולים לייצר את המראה. עם Claude Code — אתם מוסיפים את ההתנהגות.

4 סוגי אינטראקטיביות שכל Landing Page צריך

1. Navigation — תפריט מובייל

בדסקטופ, תפריט ניווט רגיל עם קישורים אופקיים. במובייל — Hamburger Menu: שלושה קווים שפותחים תפריט. Claude Code יוצר את זה אוטומטית עם ה-prompt ל-responsive. הנקודה החשובה: וודאו שהתפריט נפתח מימין לשמאל (כי RTL) ולא משמאל לימין.

2. Smooth Scroll — גלילה חלקה

כשמישהו לוחץ על "צור קשר" בתפריט, הדף גולל בצורה חלקה לסקשן הטופס — במקום קפיצה חדה. שורה אחת ב-CSS: scroll-behavior: smooth; — אבל Claude Code מוסיף גם offset לגובה ה-header הקבוע.

3. Scroll Animations — אנימציות בגלילה

סקשנים שנכנסים עם fade-in כשגוללים אליהם. האפקט הזה נותן תחושה מקצועית בלי לאט את הדף. Claude Code משתמש ב-IntersectionObserver (טכנולוגיה מובנית בדפדפן) — בלי ספריות חיצוניות, בלי jQuery.

4. Form Validation — אימות טופס

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

דוגמה מלאה: הוספת טופס לידים פונקציונלי

נניח שב-HTML המיוצא יש טופס כזה:

<form class="contact-form">
  <input type="text" placeholder="שם מלא">
  <input type="tel" placeholder="טלפון">
  <button type="submit">שלח</button>
</form>

הטופס נראה יפה אבל לא עושה כלום. ב-Claude Code, שולחים:

Make the contact form functional:
- Validate name (required, min 2 chars) and phone (Israeli mobile: starts with 05, 10 digits)
- Show inline validation errors in Hebrew below each field
- On valid submit: POST to /api/leads (placeholder) as JSON
- Show success message: "תודה! נחזור אליך בהקדם"
- Add loading spinner to button during submit
- Save to localStorage as backup
- All error messages in Hebrew

Claude Code יעדכן את ה-HTML, יוסיף JavaScript, ויתן לכם טופס פונקציונלי תוך דקה. הוא גם יוסיף שדות aria-label לנגישות ויטפל ב-RTL של ה-error messages.

מה לגבי שליחת הנתונים?

טופס עם validation זה חשוב, אבל לאן הנתונים הולכים אחרי שליחה? ב-Landing Page סטטי אין שרת שמקבל את הנתונים. יש כמה פתרונות פשוטים:

• Formspree / Getform — שירותים שמקבלים data מטפסים ושולחים לכם אימייל. חינם עד 50 שליחות בחודש. פשוט מחליפים את ה-action של הטופס ל-URL שלהם
• Google Sheets Integration — בקשו מ-Claude Code: "Send form data to a Google Sheets webhook" — הוא ייצור Apps Script שמכניס כל ליד ישירות ל-Google Sheet
• WhatsApp Link — לעסקים ישראליים קטנים, לפעמים הפתרון הפשוט ביותר: הכפתור שולח הודעת WhatsApp עם הנתונים. https://wa.me/972XXXXXXXXX?text=...
• Webhook ל-CRM — אם יש לכם CRM (Monday.com, HubSpot, Pipedrive) — Claude Code יכול לשלוח את הנתונים ישירות. בקשו: "Send form data as JSON POST to this webhook URL: [URL]"

הבחירה תלויה בגודל העסק ובמספר הלידים. עד 50 לידים בחודש — Formspree. יותר — Google Sheets או CRM. לבעלי עסקים קטנים שעובדים מהטלפון — WhatsApp הוא לפעמים הכי אפקטיבי.

דוגמה ל-prompt שמחבר טופס ל-Google Sheets:

Connect the contact form to Google Sheets using a Google Apps Script webhook.
When the form is submitted:
1. Send the data (name, phone, email) as JSON to the webhook URL
2. The webhook will be added later — for now, log the data to console
3. Show success message in Hebrew
Keep the existing form validation.

Claude Code ייצור את ה-JavaScript שמטפל בשליחה, כולל error handling ו-loading state. כשתהיה לכם URL של Google Apps Script webhook — פשוט תחליפו את ה-placeholder ב-URL האמיתי.

הוספת Responsive — Mobile First

Responsive Design (עיצוב מגיב) הוא לא בונוס — הוא חובה. בישראל ב-2026, כ-72% מהתעבורה לאתרים של עסקים קטנים מגיעה ממובייל (נתון הערכה על בסיס מגמות שוק, ייתכן שינוי לפי ענף). אם ה-Landing Page שלכם נראה טוב רק במחשב — אתם מפסידים שלושה רבעים מהלקוחות הפוטנציאליים.

HTML שמגיע מ-Claude Design לרוב בנוי ל-desktop — עם רוחבים קבועים (fixed widths) וגדלים מוחלטים. Claude Code ממיר את זה ל-responsive באמצעות CSS Flexbox ו-Grid — טכנולוגיות מודרניות שמאפשרות לאלמנטים "לזרום" ולהתאים את עצמם לגודל המסך.

Mobile First — למה להתחיל מהקטן

הגישה המומלצת היא Mobile First (מובייל קודם) — קודם מעצבים למסך הקטן ביותר, ורק אז מרחיבים לטאבלט ולדסקטופ. הסיבה פרקטית: קל יותר להוסיף אלמנטים למסך גדול מאשר לדחוס אלמנטים קיימים למסך קטן. כשמתחילים מדסקטופ ומנסים "לכווץ" — נשברים דברים. כשמתחילים ממובייל ו"מרחיבים" — הכל פשוט יותר.

בפועל, Claude Code מטפל בזה עבורכם. כשאתם שולחים את ה-prompt "Use mobile-first approach" — הוא כותב CSS שמתחיל מ-styles למובייל ומוסיף @media queries לגדלים גדולים יותר. אתם לא צריכים לדעת CSS כדי שזה יעבוד — רק להגיד לו שזו הגישה שאתם רוצים.

3 Breakpoints שחייבים לבדוק

Breakpoint הוא נקודת שבירה — גודל מסך שבו ה-layout משתנה. שלושה breakpoints סטנדרטיים:

• 375px — מובייל (iPhone 14, Samsung Galaxy S-series). זה הגודל שרוב האנשים רואים
• 768px — טאבלט (iPad). פחות נפוץ, אבל חשוב ללקוחות B2B שעובדים על טאבלט
• 1280px — דסקטופ. המסך הרגיל שאתם עובדים עליו

מה לבדוק ב-Responsive

Deploy — מ-Claude Code לאתר חי

Deploy (פריסה / העלאה לאוויר) הוא הרגע שבו הקבצים שלכם עוברים מהמחשב לשרת — ומישהו בקצה השני של העולם יכול לראות את האתר שלכם. זה הרגע הכי מספק ב-pipeline: מ-brief ועד URL חי. ועד לפני כמה שנים, deploy היה תהליך טכני שדרש ידע ב-SSH, שרתים, DNS, ותעודות SSL. היום — זה drag and drop.

יש שלוש דרכים לעשות deploy — שתי פלטפורמות ממשק גרפי (Cloudflare Pages ו-Vercel), ואופציה שלישית ישירות מ-Claude Code. שלושתן חינמיות לפרויקטים קטנים:

אופציה 1: Cloudflare Pages

Cloudflare Pages הוא שירות אחסון אתרים סטטיים, חינמי, מהיר, ועם CDN גלובלי (כלומר: האתר שלכם נטען מהר מכל מקום בעולם). הדרך הפשוטה ביותר:

1. היכנסו ל-dash.cloudflare.com וצרו חשבון חינמי (אם אין)
2. לחצו על "Workers & Pages" בתפריט השמאלי
3. לחצו "Create" → "Pages" → "Upload assets"
4. תנו שם לפרויקט (למשל: my-landing-page)
5. גררו את תיקיית הפרויקט (עם index.html, style.css, images/) לאזור ה-upload
6. לחצו "Deploy"
7. תוך 30 שניות תקבלו URL: my-landing-page.pages.dev

[SCREENSHOT NEEDED — ממשק Upload של Cloudflare Pages]

אופציה 2: Vercel

Vercel מציעה ממשק drag-and-drop עוד יותר פשוט:

1. היכנסו ל-vercel.com וצרו חשבון חינמי
2. לחצו "Add New" → "Project"
3. בחרו "Deploy without a Git Repository"
4. גררו את תיקיית הפרויקט
5. לחצו "Deploy"
6. תקבלו URL: my-landing-page.vercel.app

אופציה 3: Deploy דרך Claude Code

אם אתם כבר ב-Claude Code, אפשר לבקש ממנו לעשות deploy ישירות. פשוט שלחו:

Deploy this site to Cloudflare Pages. The project name should be "my-landing-page". Use Wrangler CLI.

Claude Code יתקין את Wrangler (כלי CLI של Cloudflare), יתחבר לחשבון שלכם, ויעלה את הקבצים. התוצאה זהה — URL חי תוך דקה.

חיבור Custom Domain

ה-URL שמקבלים אחרי deploy — כמו my-landing-page.pages.dev — עובד מצוין לבדיקות ולשיתוף, אבל לפרויקט מקצועי תרצו דומיין אמיתי. לדוגמה: neshima-yoga.co.il במקום neshima-landing.pages.dev.

בשתי הפלטפורמות התהליך פשוט: קונים דומיין (ב-GoDaddy, Cloudflare, או ספק ישראלי כמו אינטרספייס — עלות של 30-80 ש"ח לשנה עבור דומיין .co.il), ואז מצביעים את הדומיין לפלטפורמה. ב-Cloudflare Pages: Settings → Custom domains → הוסיפו את הדומיין. ב-Vercel: Settings → Domains → הוסיפו את הדומיין. שתי הפלטפורמות מנפיקות תעודת SSL אוטומטית (HTTPS) — בלי עלות נוספת.

עדכון אתר קיים

מה קורה כשצריך לעדכן את האתר אחרי ה-deploy הראשון? פשוט מאוד: ערכו את הקבצים במחשב (ב-Claude Code או ידנית), ועשו deploy מחדש. ב-Cloudflare Pages: גררו את התיקייה המעודכנת לאזור ה-upload. ב-Vercel: אותו תהליך. ב-CLI: הריצו שוב את פקודת ה-deploy. האתר מתעדכן תוך שניות.

טיפ חשוב: שמרו גרסאות. לפני כל עדכון, שכפלו את תיקיית הפרויקט עם תאריך (למשל: neshima-lp-2026-04-20). ככה אם עדכון שבר משהו — יש לכם לאן לחזור. ב-Cloudflare Pages יש גם היסטוריית deploys מובנית — אפשר לחזור לגרסה קודמת בלחיצה.

Workflow מלא: Brief → Design → Code → Live

עכשיו שיש לכם את כל החלקים, בואו נרכיב אותם ל-workflow שלם — מהרגע שמגיע brief (מלקוח, ממנהל, או מעצמכם) ועד שהאתר חי. זה ה-workflow שאתם תשתמשו בו שוב ושוב.

דוגמאות מייצגות: workflow מלא לשירות ישראלי

נניח שאתם בונים Landing Page לסטודיו יוגה בתל אביב בשם "נשימה" — קורסי יוגה למתחילים. הנה ה-workflow המלא:

סה"כ: 90 דקות. מ-brief ריק לאתר חי. בלי מעצב, בלי מפתח, בלי hosting בתשלום.

דוגמה נוספת: Event Page לכנס מקצועי

לא רק עסקים קטנים נהנים מה-pipeline. נניח שאתם מארגנים כנס בתעשייה (Tech, שיווק, HR) ואתם צריכים Event Page עם: כותרת וסרטון, סדר יום, רשימת דוברים, הרשמה, ומיקום + מפה. במסלול מסורתי — שבוע עבודה ו-5,000 ש"ח+. ב-pipeline:

1. Brief — "Event page לכנס MarketingTLV 2026. 300 משתתפים. 8 דוברים. מלון דן תל אביב. 15 ליוני. הרשמה מוקדמת 250 ש"ח."
2. Design — Claude Design יוצר דף עם hero, agenda, speaker cards, registration form, map embed
3. Export + Code — Claude Code מוסיף countdown timer לתאריך, responsive, form validation עם שדות שם + טלפון + תפקיד
4. Deploy — marketingtlv.pages.dev — חי

סה"כ: שעה וחצי. עלות: 0 ש"ח (מנוי Claude כבר משולם). התוצאה: Event Page מקצועי שנראה כאילו סוכנות בנתה אותו.

מגבלות — מתי צריך מפתח אמיתי

ה-pipeline של Claude Design + Claude Code הוא כלי עוצמתי, אבל הוא לא מחליף הכל. חשוב לדעת את הגבולות — גם כדי לא להבטיח ללקוח משהו שלא תוכלו לספק, וגם כדי לדעת מתי ההשקעה במפתח מוצדקת.

מה ה-Pipeline עושה מצוין

• Landing Pages — דף אחד, מטרה אחת, טופס לידים. המקרה האידיאלי
• אתרי תדמית — 3-5 עמודים סטטיים: ראשי, אודות, שירותים, צור קשר
• Portfolio — גלריית עבודות עם תמונות וטקסט
• Event Pages — דף אירוע עם פרטים, הרשמה, ומיקום
• Product Pages — דף מוצר בודד עם תמונות, מפרט, ו-CTA
• Micro-sites לקמפיינים — אתר קטן ל-campaign ספציפי

מה דורש מפתח

• חנות אונליין (E-commerce) — עגלת קניות, תשלומים, ניהול מלאי. משתמשים ב-Shopify או WooCommerce
• אפליקציה עם התחברות משתמשים — registration, login, dashboard אישי. צריך backend
• אתר עם מסד נתונים דינמי — תוכן שמתעדכן, חיפוש, סינון, דפים שנוצרים מ-data
• אינטגרציות מורכבות — חיבור ל-CRM, מערכות תשלום (Tranzila, PayPlus), API צד שלישי
• אתר עם SEO אגרסיבי — אלפי עמודים, sitemap דינמי, server-side rendering
• אבטחה רגישה — אתרים פיננסיים, רפואיים, ממשלתיים — צריכים audit אבטחה מקצועי

האזור האפור — פרויקטים שאפשר "למתוח" עם Pipeline

בין "Pipeline מספיק" ל"צריך מפתח" יש אזור אפור — פרויקטים שטכנית אפשר לבנות ב-pipeline, אבל זה ידרוש יותר עבודה ב-Claude Code:

• אתר עם בלוג פשוט — אם התוכן משתנה לעיתים רחוקות, אפשר לבנות כ-static site ולעדכן ידנית. אם צריך לפרסם 3 פוסטים בשבוע — עדיף WordPress
• גלריה עם עשרות תמונות — אפשר, אבל צריך lazy loading אגרסיבי ואופטימיזציית תמונות. Claude Code מטפל בזה, אבל בדקו ביצועים
• אתר עם 10+ עמודים — אפשר, אבל ניהול של 10 קבצי HTML הופך למורכב. שיקלו Static Site Generator (כמו Eleventy) — Claude Code מכיר ויכול להגדיר
• חיבור ל-Google Analytics — בהחלט אפשר. בקשו מ-Claude Code: "Add Google Analytics tracking code with GA4 tag: G-XXXXXXXXXX." זו שורת קוד אחת

כלל אצבע ישראלי: רוב העסקים הקטנים בישראל — מספרות, סטודיואים, קליניקות, חנויות, יועצים — צריכים אתר של 1-5 דפים עם טופס לידים. ה-pipeline מכסה 100% מהצרכים האלה.

שיחה אמיתית עם לקוח: איך להסביר את ה-pipeline

כשלקוח שואל "איך אתם בונים אתרים?" — הנה תשובה ברורה שמבינים גם אנשים לא טכניים:

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

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

הקשר לקורסי Claude Code — מה ללמוד הלאה

הפרק הזה נתן לכם טעימה מ-Claude Code — מספיק כדי לשדרג HTML מיוצא ולעשות deploy. אם אתם רוצים להעמיק — יש סדרת קורסים ייעודית ב-nVision Academy:

אם הפרק הזה הרגיש טבעי — Claude Code Basics הוא הצעד הבא. אם הפרק הזה הרגיש מאתגר — חזרו על התרגילים לפני שממשיכים. אין לחץ — ה-pipeline שלמדתם כאן כבר נותן ערך עצום גם בלי קורסים נוספים.

מה Claude Code יכול לעשות מעבר למה שלמדנו כאן

הפרק הזה נתן לכם את הבסיס — שדרוג HTML מיוצא ו-deploy. אבל Claude Code יכול הרבה יותר:

• בניית אפליקציות מלאות — לא רק Landing Pages, אלא אפליקציות web עם login, database, ו-API. זה מה שנלמד ב-cc-vibe
• עבודה עם frameworks — React, Next.js, Svelte — Claude Code בונה פרויקטים שלמים. הרבה מעבר ל-HTML סטטי
• Debugging וטסטים — מצא ותקן באגים, כתוב tests אוטומטיים. שיפור קוד קיים
• CI/CD Pipelines — אוטומציה של deploy: כל שינוי שאתם עושים מתעדכן באתר אוטומטית. זה מה שנלמד ב-cc-prod

אבל גם בלי כל זה — מה שלמדתם בפרק הזה מספיק כדי לספק שירות מקצועי ללקוחות. Landing Page חי ב-90 דקות — זה מוצר שאפשר למכור.

תרגילים מעשיים

רמות קושי וציפיות

שלושת התרגילים בנויים ברמת קושי עולה. תרגיל 1 הוא הליבה — אם תשלימו אותו, יש לכם את המיומנות המרכזית של הפרק. תרגיל 2 הוא quality assurance — בדיקה שהתוצר באמת עובד. תרגיל 3 הוא אסטרטגי — הכנה לפרק 12 (פרילנסינג). אם יש לכם זמן רק לאחד — עשו את תרגיל 1.

שגרת עבודה

בדוק את עצמך

סיכום הפרק