Prompt hari selasa #13: mengodekan pembuat kartu nama premium 💼✨

Untuk prompt hari Selasa ke-13 ini, kami menantang AI untuk membuat alat mini lengkap untuk menghasilkan kartu nama profesional Anda sendiri.

Di Linkeum, kami membahas keuangan, investasi, dan acara profesional. Dan di dunia ini, jaringan adalah segalanya. Apa yang lebih penting daripada kartu nama atau lencana konferensi?

Untuk prompt hari Selasa ke-13 ini, kami menantang AI untuk membuat alat mini lengkap untuk menghasilkan kartu nama profesional Anda sendiri. Tujuannya adalah untuk menghasilkan aplikasi web "Satu Halaman" (HTML, CSS, dan JS dalam satu file) yang memungkinkan penyesuaian kartu nama atau lencana secara real-time. Kami meminta AI untuk mengintegrasikan tema profesional (Wall Street, Fintech), efek hover 3D yang elegan, dan kemampuan untuk mengekspor hasil sebagai gambar PNG.

Prompt

Prompt ditulis dalam bahasa Inggris untuk memaksimalkan kualitas kode yang dihasilkan, dengan fokus khusus pada desain UI/UX dan penggunaan perpustakaan eksternal melalui 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.

Putusan kami setelah pengujian

Kami menguji prompt ini pada Qwen dan hasilnya sangat menakjubkan untuk sebuah "One-Shot". Antarmuka dihasilkan secara instan, efek 3D menambahkan sentuhan premium yang nyata, dan temanya diterapkan dengan sempurna.

Sebagai pengembang, Anda akan menyadari bahwa beberapa penyesuaian manual kecil diperlukan untuk mencapai kesempurnaan: kode QR memerlukan perpustakaan nyata agar berfungsi, dan penangkapan PNG melalui html2canvas terkadang dapat sedikit menggeser elemen CSS yang kompleks. Namun, sebagai dasar yang dihasilkan dalam 10 detik, ini sangat menghemat waktu!

Giliran Anda!

Salin kode, sesuaikan detailnya, dan buat lencana sempurna untuk acara networking Anda berikutnya! Jika Anda menyukai trik pengembangan dan rekayasa prompt untuk menghemat waktu ini, jangan lupa untuk berlangganan buletin kami untuk menerima alat dan analisis mendatang langsung di kotak masuk Anda.