פרומפט יום שלישי #13: קידוד מחולל כרטיסי ביקור פרימיום 💼✨

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

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

עבור פרומפט יום שלישי ה-13 הזה, אתגרנו את ה-AI ליצור כלי מיני שלם כדי ליצור כרטיסי ביקור מקצועיים משלך. המטרה היא ליצור יישום רשת "חד-עמודי" (HTML, CSS ו-JS בקובץ אחד) המאפשר התאמה אישית בזמן אמת של כרטיס ביקור או תג. ביקשנו מה-AI לשלב נושאים מקצועיים (וול סטריט, פינטק), אפקט ריחוף תלת-ממדי אלגנטי, ואת היכולת לייצא את התוצאה כתמונת PNG.

הפרומפט

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

Act as an Expert Frontend Developer and UI/UX Designer specializing in Fintech and Corporate enterprise platforms. Your mission is to create a single-file web application (HTML, CSS, and JS combined) that functions as a real-time, premium Business Card and Conference Badge generator.

1. Design & Layout Strategy:

   • The UI must be highly professional, elegant, and trustworthy. Think "Investment Banking meets Modern Tech Startup".
   • Use Tailwind CSS (via CDN) for rapid, clean styling.
   • The layout should be split: a sleek configuration panel on the left (or top on mobile), and a sticky real-time live preview of the card on the right.
   • Background: A subtle, sophisticated dark mode (slate/gray) or a clean corporate light mode.

2. The Live Preview Card (The core element):

   • The card itself should look like a physical premium business card (standard ratio 3.5 x 2 inches, scaled up for the screen).
   • Add a subtle CSS 3D tilt/glare effect when the user hovers over the card with their mouse to make it feel premium.
   • It must include placeholders for: Company Logo, Full Name, Job Title (e.g., "Senior Portfolio Manager", "CTO"), Email, Phone Number, and a QR Code placeholder.

3. User Inputs & Configuration (HTML/JS):

   • Text Fields: Name, Job Title, Company, Phone, Email, Website.
   • Theme Selector (Dropdown):
     1. "Wall Street Classic" (Navy blue & Gold)
     2. "Fintech Minimalist" (Pure black, white text, subtle neon accent)
     3. "Tech Conference" (Vibrant gradient background with glassmorphism).
   • Layout Toggle: Choose between "Business Card" (horizontal) or "Event Badge" (vertical).

4. Logic & Export (JavaScript):

   • JS must instantly update the card's DOM elements as the user types (real-time data binding).
   • Include a "Download Card" button. Use the html2canvas library (import it via CDN) to capture the card's HTML node and trigger a PNG download so the user can actually save their creation.

The final code must be clean, heavily commented, fully functional in a modern browser, and require zero local installation.

פסק הדין שלנו לאחר הבדיקה

בדקנו את הפרומפט הזה על Qwen והתוצאה מדהימה עבור "One-Shot". הממשק נוצר באופן מיידי, האפקט התלת-ממדי מוסיף מגע פרימיום אמיתי, והנושאים חלים בצורה מושלמת.

כמפתח, תבחין שיש צורך בכמה התאמות ידניות קטנות כדי להשיג שלמות: קוד ה-QR דורש ספרייה אמיתית כדי להיות פונקציונלי, ולכידת ה-PNG דרך html2canvas יכולה לפעמים להזיז מעט אלמנטים מורכבים של CSS. עם זאת, כבסיס שנוצר ב-10 שניות, זהו חיסכון יוצא דופן בזמן!

תורך!

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