בניית דף נחיתה עם AI: מעיצוב מוכן לאתר מהיר ב-Astro

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

במדריך הזה אני מתחיל מתמונת עיצוב והופך אותה לדף נחיתה חי. אני עובד עם Claude Code ו-Astro, משתמש במסלולים החינמיים של Cloudflare Pages ו-Web3Forms, ובודק את התוצאה ב-PageSpeed Insights. בסוף אני מציג את הציונים שקיבל הדף שבניתי, כתוצאה של הבדיקה הזו ולא כהבטחה לכל פרויקט.

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

מי עושה מה כאן

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

מה אנחנו בונים: דף נחיתה ל”בית יוגה”

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

את העיצוב, התמונות וסרטון הרקע יצרתי בעצמי עם AI בתהליך נפרד. כאן מדמים מצב נפוץ: קיבלתם עיצוב מוכן מהמעצבת ועכשיו צריך לבנות אותו. בכוונה לקחתי מקרה מוגבל, קובץ תמונה אחד בשם design.png, בלי מטא-דאטה. בפרויקט אמיתי הייתי מחבר את קובץ Figma דרך MCP, כדי לתת לסוכן הקשר ישיר ומדויק יותר מהעיצוב. כאן בודקים מה אפשר לעשות מתמונה בלבד.

מה צריך

Astro, ולמה דווקא הוא

Astro הוא framework לבניית אתרים, והוא מתאים במיוחד לדף נחיתה משתי סיבות:

• הוא שולח כמעט אפס JavaScript כברירת מחדל. דף נחיתה הוא בעיקר תוכן סטטי, וזה בדיוק מה ש-Astro עושה הכי טוב.
• קומפוננטות וכלי אופטימיזציה לתמונות זמינים כחלק מה-framework. את ה-title, ה-description, המבנה הסמנטי ושאר עבודת ה-SEO עדיין צריך להגדיר ולבדוק.

אפשר לכתוב את הדף ב-HTML ידני, אבל קומפוננטות מקלות על הפירוק והתחזוקה. astro:assets (נפתח בלשונית חדשה) מטפל בתמונות מקומיות בזמן ה-build ויכול לייצר גדלים ופורמטים מתאימים.

שני כלים חינמיים

• ל-Cloudflare Pages (נפתח בלשונית חדשה) יש מסלול חינמי לאירוח ולפריסה של הדף.
• ל-Web3Forms (נפתח בלשונית חדשה) יש מסלול חינמי של 250 הגשות בחודש, לשליחת תוכן הטופס למייל בלי שרת משלכם.

העלות של סוכן ה-AI

אני עובד עם Claude Code (נפתח בלשונית חדשה), אבל התהליך מתאים גם לסוכנים אחרים שיכולים לקרוא קבצים, לכתוב קוד ולהריץ פקודות, כמו Gemini CLI (נפתח בלשונית חדשה), Cursor (נפתח בלשונית חדשה) ו-Codex (נפתח בלשונית חדשה).

Claude Code זמין דרך מנויי Claude בתשלום או בחיוב לפי שימוש. המחירים והמכסות משתנים, לכן כדאי לבדוק את עמוד התמחור של Claude (נפתח בלשונית חדשה) לפני שמתחילים.

GitHub לא נדרש לפריסה עצמה, כי נשתמש ב-Direct Upload, אבל הוא מומלץ לגיבוי ולניהול גרסאות. אם אתם כבר עובדים עם Git, המדריך שלי על Git לפרילנסר וורדפרס רלוונטי גם כאן.

לפני שמתחילים

לפני שמתחילים צריך להכין שני דברים:

• Claude Code, סוכן ה-AI. מתקינים אותו פעם אחת ומתחברים עם חשבון מתאים. אני מריץ אותו מתוך VS Code באמצעות התוסף הרשמי.
• Node.js בגרסת LTS שנתמכת ב-Astro. דרישת הגרסה עשויה להשתנות, לכן בודקים אותה בהוראות ההתקנה הרשמיות של Astro (נפתח בלשונית חדשה) ומתקינים מהאתר הרשמי של Node.js (נפתח בלשונית חדשה).

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

שלב 1: היכרות עם Claude Code

Claude Code הוא סוכן, לא Copilot שמשלים שורות. אתם מגדירים את המשימה ומאשרים שינויים, והוא קורא קבצים, כותב קוד ומריץ פקודות.

אני עובד דרך VS Code בגלל תמיכת ה-RTL הטובה שלו, וזה משנה כשבונים דף בעברית. התיעוד הרשמי של Claude Code ל-VS Code (נפתח בלשונית חדשה) מסביר איך להתקין את התוסף ולעבוד דרכו. טרמינל או desktop app גם בסדר גמור.

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

בסרטון עבדתי עם Opus 4.8 וברמת חשיבה High. אם רשימת המודלים השתנתה, בחרו מודל עדכני שמתאים לכתיבת קוד.

שלב 2: מחברים את Cloudflare

לפני שבונים, מחברים את Wrangler לחשבון Cloudflare. בפריסה מהמחשב הדרך הפשוטה היא להריץ npx wrangler login ולהשלים את ההתחברות בדפדפן. כך לא צריך להדביק API token בצ’אט או לשמור אותו בפרויקט. התהליך המלא מופיע בתיעוד הרשמי של Direct Upload (נפתח בלשונית חדשה).

הפרומפט (בשפה חופשית):

הכן את הפרויקט לפריסה ב-Cloudflare Pages עם Direct Upload. אם Wrangler אינו מותקן בפרויקט, הוסף אותו כתלות פיתוח. כשתגיע לשלב ההתחברות, עצור ובקש ממני להריץ npx wrangler login ולהשלים את האישור בדפדפן. אל תבקש ואל תשמור API token.

שלב 3: בונים את דף הנחיתה מהעיצוב

אני נותן ל-Claude את תמונת העיצוב ואת ה-assets, כלומר התמונות המקוריות, ומבקש תוכנית לפני שנוגעים בקוד.

הפרומפט (בשפה חופשית):

יש לי עיצוב מוכן בקובץ graphic assets/design.png, ובאותה תיקייה גם התמונות המקוריות. נתח את העיצוב ובנה לפיו פרויקט Astro מאפס.

תפרק את הדף לקומפוננטות הגיוניות (Hero, הצעה, FAQ, טופס וכו’). עברית עם RTL, מובייל-first, קוד סמנטי ונגיש. השתמש בתמונות המקוריות שבתיקייה, אל תמציא תמונות. תכין תוכנית ותראה לי אותה לפני שאתה כותב קוד.

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

מה לא היה מדויק בגרסה הראשונה

בגרסה הראשונה היו שני פערים ברורים מהעיצוב, ואני מראה אותם בסרטון:

• תמונה בצד הלא נכון. ב-RTL קל לסוכן להחליף בין ימין לשמאל. פתחתי את design.png לידו, הצבעתי שהתמונה אמורה להיות משמאל, וביקשתי לתקן.
• כוכב שהפך לטקסט. בתמונה המקורית היה כוכב דקורטיבי, ו-Claude שחזר אותו כתו טקסט. אמרתי לו שזה חלק מהתמונה, לא להוסיף אותו בנפרד.

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

שלב 4: משפרים את ביצועי הדף

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

כאן astro:assets עוזר. הוא מעבד תמונות מקומיות בזמן ה-build ומייצר את הקבצים שהגדרתם, בלי תוסף נוסף.

הפרומפט (בשפה חופשית):

עכשיו נדאג לביצועים:

• העבר את התמונות המקומיות לקומפוננטת <Image> של astro:assets. הגדר layout וגדלים שמתאימים לרוחב שבו כל תמונה מוצגת, ואל תשלח אותו קובץ גדול לכל המסכים.
• הגדר לסרטון הרקע studio-ambient.mp4 את המאפיינים poster, preload="none", muted, autoplay, loop ו-playsinline. אם הוא אינו מופיע מיד בכניסה לדף, דחה את הגדרת ה-src עד שהוא מתקרב ל-viewport. אל תשתמש ב-loading="lazy" על <video>.
• בדוק בפועל איזה אלמנט מזוהה כ-LCP ותקן לפי המדידה.
• היעד הוא ציון Lighthouse טוב ויציב, לא 100 בכל מחיר.

שלב 5: מחברים את הטופס ל-Web3Forms

בעיצוב הטופס היה מדומה. ב-production שם וטלפון שממלאים בדף צריכים להגיע למייל. בשביל זה Web3Forms.

נרשמים, יוצרים access key ומוסיפים אותו לטופס כשדה נסתר. לפי התיעוד של Web3Forms (נפתח בלשונית חדשה), המפתח הזה אינו סוד והוא מיועד להופיע בקוד בצד הלקוח. כדאי להוסיף גם הגנת ספאם ולבדוק את הטופס מקומית ובדומיין האמיתי.

הפרומפט (בשפה חופשית):

בנה טופס שם וטלפון ששולח ב-POST ל-https://api.web3forms.com/submit. הוסף את ה-access_key כשדה נסתר, ולידציה בסיסית, הגנת ספאם והודעת הצלחה ברורה. אחרי הבנייה עצור כדי שאוכל לשלוח ליד בדיקה ולוודא שהוא הגיע למייל.

בודקים את זה בעצמכם

פה לא סומכים על “Claude אמר שזה עובד”. מילאתי את הטופס בעצמי עם שם וטלפון, ובדקתי שהמייל הגיע. אם הליד לא מגיע, הטופס עדיין לא מוכן לפרסום.

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

שלב 6: ליטוש בשפה חופשית

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

שלב 7: מעלים את דף הנחיתה לאוויר עם Direct Upload

החיבור ל-Cloudflare כבר הושלם בשלב 2. עכשיו משתמשים ב-Direct Upload עם Wrangler, בלי GitHub.

הפרומפט (בשפה חופשית):

הרץ npm run build, ודא שה-build הסתיים בלי שגיאות, ואז פרוס את dist/ ל-Cloudflare Pages באמצעות npx wrangler pages deploy dist. כשתסיים, החזר לי את כתובת הפריסה.

אחרי הפריסה ממלאים שוב את הטופס בדף החי ומוודאים שהליד מגיע למייל.

דומיין מותאם אישית: אם יש לכם דומיין שעובר דרך Cloudflare, אפשר לחבר אותו או לפתוח subdomain כמו landing.example.com. המדריך לא נכנס להגדרה הזו, כדי להישאר ממוקד בבנייה ובפריסה.

שלב 8: בודקים ב-PageSpeed Insights

לוקחים את כתובת הדף החי ומריצים עליה PageSpeed Insights (נפתח בלשונית חדשה).

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

• Performance: 100
• Accessibility: 100
• Best Practices: 100
• SEO: 100

זו דוגמה ללולאת עבודה עם סוכן AI: הסוכן מציע ומיישם, ואתם בודקים את התוצאה בכל סבב.

שתי הערות שלא לדלג עליהן:

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

ציון SEO של 100 אומר שהדף עבר את הבדיקות האוטומטיות של Lighthouse. הוא לא מבטיח אינדוקס או דירוג. Astro מספק בסיס טוב של HTML, אבל עדיין צריך להגדיר title, description, מבנה כותרות, קישורים, תוכן ואפשרות סריקה. גם Google מבהירה שציונים טובים אינם מבטיחים דירוג (נפתח בלשונית חדשה).

עלות הכלים

לכלים שבהם השתמשתי יש מסלולים חינמיים שמתאימים לניסוי ולתנועה נמוכה:

• Astro, קוד פתוח.
• Cloudflare Pages, בכפוף למגבלות המסלול החינמי.
• Web3Forms, עד 250 הגשות בחודש במסלול החינמי.

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

סיכום

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

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