בונים דף נחיתה עם Claude, שלב אחר שלב

שלב 1: בריף של פסקה אחת

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

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

שלב 2: מתכננים את המקטעים

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

1. 01הירו: ההבטחה בשורה אחת, כפתור ראשי והוכחה (המוצר, מספר או פנים).
2. 02הוכחה חברתית: לוגואים, מספר לקוחות או ציטוט חזק אחד.
3. 03איך זה עובד או יתרונות: שלושה עד שישה יתרונות קונקרטיים, לכל אחד ויזואל.
4. 04מחיר או הצעה: ההחלטה, בקלות.
5. 05שאלות נפוצות: ההתנגדויות שאנשים באמת מעלים.
6. 06קריאה לפעולה אחרונה ופוטר.

כותבים כבר עכשיו את הטקסט האמיתי לכל מקטע. הוא לא חייב להיות מושלם, אבל הוא חייב להיות אמיתי.

שלב 3: הופכים את הבריף לפרומפט

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

Build a "Studio Mila Pilates Landing Page" React component.

CONCEPT: A small pilates studio in Florentin, Tel Aviv. Visitors should book a free trial class. It should feel calm and exact, like a timetable printed on good paper.

LANGUAGE: All copy in Hebrew, dir="rtl", lang="he". Gender-neutral Hebrew (plural present tense). IBM Plex Sans Hebrew 600 for headings, no letter-spacing, no uppercase, no italics on Hebrew.

LAYOUT & CONTENT:
- Nav: 'סטודיו מילה', links מערכת שעות / מחירים / הסטודיו, button 'שיעור ניסיון בחינם'.
- Hero: headline 'זזים לאט. מתחזקים באמת.' and the weekly timetable as a 7-column grid with real class times.
- Proof: '6 שנים בפלורנטין · 4.9 בגוגל · עד 8 בקבוצה'.
- Classes: 3 class types with level and length.
- Prices: single class 90₪, 10-class card 750₪, monthly 520₪.
- FAQ: 4 questions. Final CTA. Footer with address and hours.

DESIGN SYSTEM:
- Paper #F6F2EA, ink #1A1A1A, sage #6F7F5E as the only accent (buttons and today's column).
- 1px hairlines between sections, hard 3px 3px 0 shadow on buttons, no gradients, no glassmorphism.

OUTPUT: one self-contained React component (Tailwind CSS, framer-motion, lucide-react), default export, no external images, semantic HTML, keyboard accessible, responsive down to 360px.

רוצים לראות פרומפט מלא של דף נחיתה? Ledgerly וVitals הם דפי נחיתה שלמים מהספרייה, עם הפרומפט המלא.

שלב 4: משפרים ב-Artifact

באפליקציות של Claude, קומפוננטת React כזו נפתחת בדרך כלל כ-Artifact: תצוגה חיה ליד הצ'אט. זה המקום הכי זול לשפר בו, כי כל שינוי נראה תוך שניות. עובדים מלמעלה למטה ומבקשים שינוי אחד בכל הודעה.

הכותרת בהירו נשברת רע ברוחב של טאבלט. להגדיר clamp(2.5rem, 6vw, 5.5rem) ולשמור על שתי שורות.

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

לבדוק את העמוד ברוחב 375px: מערכת השעות עוברת לרשימה לפי ימים, והתפריט הופך לכפתור.

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

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

שלב 5: מעבירים את הקוד לפרויקט אמיתי

כשה-Artifact נראה נכון, מעתיקים את הקוד לפרויקט שבשליטתכם. Next.js היא ברירת מחדל טובה, וגם האתר הזה בנוי עליה. במחשב, עם Node.js מותקן:

npx create-next-app@latest my-landing --js --tailwind --app
cd my-landing
npm install framer-motion lucide-react

שומרים את הקומפוננטה כ־app/Landing.jsx, מוסיפים "use client"; בשורה הראשונה, ומציגים אותה מתוך app/page.js. באתר בעברית מגדירים גם lang="he" ו־dir="rtl" על תגית ה־html בקובץ app/layout.js.

import Landing from "./Landing";

export const metadata = {
  title: "סטודיו מילה: פילאטיס בקבוצות קטנות בפלורנטין",
  description: "שיעורי פילאטיס בקבוצות של עד 8. שיעור ניסיון ראשון בחינם.",
};

export default function Page() {
  return <Landing />;
}

מריצים npm run dev ופותחים את הכתובת המקומית שמופיעה. אם משהו נשבר, מדביקים את השגיאה המדויקת בחזרה ל-Claude. רוב התקלות בהרצה הראשונה הן חבילה חסרה או ייבוא של גופן.

שלב 6: הופכים את זה לאתר אמיתי

Artifact הוא הדגמה. לאתר צריך כמה דברים שהתצוגה המקדימה אף פעם לא ביקשה:

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

על כל אחד מאלה אפשר לבקש עזרה מ-Claude. למשל: „להוסיף טופס פנייה ששולח ל־/api/contact, ו־route handler שמעביר את הפנייה למייל שלי”.

שלב 7: מעלים לאוויר

דוחפים את הפרויקט ל-GitHub ומייבאים אותו לשירות אחסון כמו Vercel או Netlify. שניהם מזהים Next.js ונותנים כתובת ציבורית תוך דקות, וכל push אחר כך מעדכן את האתר. בסוף מחברים דומיין משלכם בהגדרות האחסון.

איפה נתקעים

• ליטוש אינסופי ב-Artifact. כשהעמוד נכון ב־90%, מעבירים אותו לפרויקט. את ה־10% האחרונים קל יותר לסגור עם תוכן ותמונות אמיתיים.
• קובץ אחד ענק. בסדר לגרסה הראשונה. כשמוסיפים עמודים, מבקשים מ-Claude לפצל לקומפוננטות.
• לדלג על הבריף. אם העמוד מרגיש לא ממוקד, כנראה שגם הבריף היה כזה.

רוצים לחסוך את ההתחלה? כל אתר מלא בספרייה הוא דף נחיתה עובד עם הפרומפט שלו. בוחרים אחד, משנים את הבריף, ומתחילים ישר משלב 4.