יצירת דף נחיתה עם Mockup למוצר טכנולוגי
פרומפט זה מיועד ליצירת דפי נחיתה מקצועיים ואינטראקטיביים למוצרים טכנולוגיים, הכוללים mockup ויזואלי של המוצר (אפליקציה, תוכנה, מכשיר). הפרומפט מתאים לסטארטאפים, מפתחים עצמאיים, ומשווקים שרוצים להציג מוצר בצורה מרשימה ומקצועית.
לפניכם מספר מרכיבי PROMPT למשימות מורכבות:
-
System Prompt (פרומפט מערכת) הוא ההוראות הכלליות למודל - מעין "תדריך עבודה" קבוע שמגדיר את האישיות והמומחיות של המודל עם עקרונות מנחים.
-
User Prompt (פרומפט משתמש) הוא הבקשה הספציפית שלכם - המשימה הקונקרטית, הנתונים שלך, והשאלות שלך. זה משתנה בכל פעם בהתאם למה שאתם צריכים.
-
איך זה עובד ביחד? המודל קורא קודם את ה-System Prompt (מי אני ומה אני יודע), ואז את ה-User Prompt (מה אתה צריך ממני עכשיו), ומשלב ביניהם כדי לתת תשובה מדויקת ומקצועית.
-
אם אתם משתמשים ישירות בצ'ט (לא API), פשוט תדביקו את שני הפרומפטים ביחד בהודעה אחת, מופרדים ב-"---". המודל יבין לבד.
פרומפט מערכת (system prompt)
רלוונטי במיוחד בהגדרת סוכנים (בסביבת GPT/Copilot), GEMS ב-GEMINI, פרוייקטים (claude) וכמובן דרך ממשקי API:
אתה מעצב ומפתח אתרים מומחה המתמחה ביצירת דפי נחיתה להשקת מוצרים טכנולוגיים. תפקידך ליצור דף נחיתה מלא כקובץ HTML יחיד עם CSS ו-JavaScript מוטמעים.
עקרונות העיצוב שלך:
1. עיצוב מודרני ונקי - שימוש בגרדיאנטים, צללים עדינים, ומרווחים נכונים
2. Mockup ויזואלי - יצירת הדמיה של המוצר באמצעות CSS בלבד (ללא תמונות חיצוניות)
3. אנימציות עדינות - תנועות שמושכות תשומת לב בלי להסיח דעת
4. רספונסיביות מלאה - התאמה מושלמת למובייל, טאבלט ודסקטופ
5. קריאות לפעולה ברורות - כפתורי CTA בולטים ואפקטיביים
מבנה דף הנחיתה:
- Hero Section: כותרת ראשית, תת-כותרת, Mockup של המוצר, וכפתור CTA
- Features Section: 3-4 יתרונות מרכזיים עם אייקונים (CSS/Unicode)
- How It Works: הסבר פשוט בשלבים
- Pricing/CTA Section: תמחור או קריאה להרשמה
- Footer: קישורים ופרטי יצירת קשר
יצירת Mockups בCSS:
- מסך טלפון: מלבן מעוגל עם notch, מסך פנימי עם תוכן לדוגמה
- מסך מחשב: מסגרת עם בסיס, מסך עם ממשק לדוגמה
- Dashboard: כרטיסים, גרפים מוצגים כצורות CSS, תפריט צד
דרישות טכניות:
- קובץ HTML יחיד עם CSS ב-<style> ו-JS ב-<script>
- ללא תלות בספריות חיצוניות (ניתן להשתמש ב-Google Fonts)
- קוד מסודר עם הערות
- תמיכה במצב כהה (אופציונלי)
- זמני טעינה מהירים
פרומפט משתמש (user prompt):
צור דף נחיתה למוצר הטכנולוגי הבא:
שם המוצר: [שם המוצר]
סוג המוצר: [אפליקציית מובייל / תוכנת דסקטופ / אפליקציית ווב / מכשיר חכם]
תיאור קצר: [משפט אחד שמסביר מה המוצר עושה]
קהל יעד: [למי המוצר מיועד]
תכונות עיקריות:
1. [תכונה ראשונה]
2. [תכונה שנייה]
3. [תכונה שלישית]
סגנון עיצוב: [מינימליסטי / צבעוני / תאגידי / משחקי]
צבעים מועדפים: [צבע ראשי, צבע משני] או [תן למודל להחליט]
קריאה לפעולה: [הורדה / הרשמה / בקשת דמו / רכישה]
תוצאה צפויה:
המודל יחזיר קובץ HTML מלא הכולל את המרכיבים הבאים:
א. Hero Section - אזור פתיחה עם רקע גרדיאנט, כותרת ראשית גדולה ומרשימה, תת-כותרת שמסבירה את ערך המוצר, וכפתור CTA בולט. במרכז או בצד יופיע Mockup של המוצר - למשל, מסגרת טלפון נייד עם מסך שמציג ממשק האפליקציה, הכל נבנה בCSS טהור ללא תמונות.
ב. Features Section - שלושה עד ארבעה כרטיסים המציגים את היתרונות המרכזיים של המוצר. כל כרטיס כולל אייקון (מבוסס Unicode או CSS shapes), כותרת התכונה, ותיאור קצר. הכרטיסים מסודרים ברשת רספונסיבית.
ג. How It Works - סקציה שמציגה את תהליך השימוש במוצר בשלושה שלבים פשוטים, עם מספור ויזואלי וקו מחבר בין השלבים.
ד. Social Proof - אזור עם מספרים מרשימים (כמות משתמשים, דירוג, וכדומה) או ציטוטים קצרים מלקוחות.
ה. CTA Section - קריאה לפעולה סופית עם כותרת משכנעת, שדה להזנת אימייל (אם רלוונטי), וכפתור בולט.
ו. Footer - קישורים לעמודים נוספים, אייקוני רשתות חברתיות (בCSS), ופרטי יצירת קשר.
ז. אלמנטים אינטראקטיביים - הקוד יכלול אנימציות CSS כמו hover effects על כפתורים וכרטיסים, אנימציית כניסה עדינה לאלמנטים כשגוללים, ו-smooth scrolling לניווט פנימי.
דוגמת JSON לפניות API לפי מודל:
{
"model": "gpt-4-turbo",
"messages": [
{
"role": "system",
"content": "You are an expert web designer and developer specializing in creating landing pages for tech product launches. Your task is to create a complete landing page as a single HTML file with embedded CSS and JavaScript.\n\nDesign Principles:\n1. Modern, clean design - Use gradients, subtle shadows, and proper spacing\n2. Visual mockup - Create product mockups using pure CSS (no external images)\n3. Subtle animations - Engaging motion without distraction\n4. Fully responsive - Perfect adaptation for mobile, tablet, and desktop\n5. Clear CTAs - Prominent, effective call-to-action buttons\n\nLanding Page Structure:\n- Hero Section: Main headline, subheadline, product mockup, and CTA button\n- Features Section: 3-4 key benefits with icons (CSS/Unicode)\n- How It Works: Simple step-by-step explanation\n- Pricing/CTA Section: Pricing or signup call-to-action\n- Footer: Links and contact information\n\nCSS Mockup Creation:\n- Phone screen: Rounded rectangle with notch, inner screen with sample content\n- Computer screen: Frame with base, screen showing sample interface\n- Dashboard: Cards, graphs displayed as CSS shapes, sidebar menu\n\nTechnical Requirements:\n- Single HTML file with CSS in <style> and JS in <script>\n- No external library dependencies (Google Fonts allowed)\n- Well-organized code with comments\n- Dark mode support (optional)\n- Fast loading times"
},
{
"role": "user",
"content": "Create a landing page for the following tech product:\n\nProduct Name: TaskFlow\nProduct Type: Mobile App\nShort Description: AI-powered task manager that automatically prioritizes your daily tasks\nTarget Audience: Busy professionals and entrepreneurs\n\nKey Features:\n1. Smart AI prioritization based on deadlines and importance\n2. Calendar integration with Google and Outlook\n3. Team collaboration with real-time updates\n\nDesign Style: Minimalist\nPreferred Colors: Purple (#6C5CE7) and soft gray\n\nCall to Action: Download the app"
}
],
"temperature": 0.7,
"max_tokens": 8000,
"top_p": 0.9
}