پرامپت سه‌شنبه #13: برنامه‌نویسی یک تولیدکننده کارت ویزیت پرمیوم 💼✨

برای این سیزدهمین پرامپت سه‌شنبه، ما هوش مصنوعی را به چالش کشیدیم تا یک ابزار کوچک کامل برای تولید کارت‌های ویزیت حرفه‌ای خودتان ایجاد کند.

در Linkeum، ما در مورد امور مالی، سرمایه‌گذاری‌ها و رویدادهای حرفه‌ای صحبت می‌کنیم. و در این دنیاها، شبکه‌سازی حرف اول را می‌زند. چه چیزی ضروری‌تر از یک کارت ویزیت یا نشان کنفرانس است؟

برای این سیزدهمین پرامپت سه‌شنبه، ما هوش مصنوعی را به چالش کشیدیم تا یک ابزار کوچک کامل برای تولید کارت‌های ویزیت حرفه‌ای خودتان ایجاد کند. هدف، تولید یک برنامه وب "تک‌صفحه‌ای" (HTML، CSS و JS در یک فایل) است که امکان سفارشی‌سازی بلادرنگ یک کارت ویزیت یا نشان را فراهم می‌کند. ما از هوش مصنوعی خواستیم تا تم‌های حرفه‌ای (وال استریت، فین‌تک)، یک افکت هاور سه‌بعدی زیبا و قابلیت استخراج نتیجه به عنوان تصویر 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 ثانیه ایجاد شده است، صرفه‌جویی در زمان فوق‌العاده‌ای است!

نوبت شماست!

کد را کپی کنید، جزئیات را تغییر دهید و یک نشان عالی برای رویداد شبکه‌سازی بعدی خود ایجاد کنید! اگر از این نوع ترفندهای توسعه و مهندسی پرامپت برای صرفه‌جویی در زمان لذت می‌برید، فراموش نکنید که در خبرنامه ما مشترک شوید تا ابزارها و تحلیل‌های آینده را مستقیماً در صندوق ورودی خود دریافت کنید.