Untuk prompt hari Selasa ke-13 ini, kami mencabar AI untuk mencipta alat mini lengkap untuk menjana kad perniagaan profesional anda sendiri.
Di Linkeum, kami bercakap tentang kewangan, pelaburan, dan acara profesional. Dan dalam dunia ini, rangkaian adalah segala-galanya. Apakah yang lebih penting daripada kad perniagaan atau lencana persidangan?
Untuk prompt hari Selasa ke-13 ini, kami mencabar AI untuk mencipta alat mini yang lengkap untuk menjana kad perniagaan profesional anda sendiri. Tujuannya adalah untuk menjana aplikasi web "Satu Halaman" (HTML, CSS, dan JS dalam satu fail) yang membolehkan penyesuaian kad perniagaan atau lencana pada masa nyata. Kami meminta AI untuk mengintegrasikan tema profesional (Wall Street, Fintech), kesan hover 3D yang elegan, dan keupayaan untuk mengeksport hasil sebagai imej PNG.
Prompt
Prompt ditulis dalam bahasa Inggeris untuk memaksimumkan kualiti kod yang dijana, dengan tumpuan khas pada reka bentuk UI/UX dan penggunaan perpustakaan luaran 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.
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.
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.
User Inputs & Configuration (HTML/JS):
- Text Fields: Name, Job Title, Company, Phone, Email, Website.
- Theme Selector (Dropdown):
- "Wall Street Classic" (Navy blue & Gold)
- "Fintech Minimalist" (Pure black, white text, subtle neon accent)
- "Tech Conference" (Vibrant gradient background with glassmorphism).
- Layout Toggle: Choose between "Business Card" (horizontal) or "Event Badge" (vertical).
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
html2canvaslibrary (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 mesti bersih, diulas dengan baik, berfungsi sepenuhnya dalam pelayar moden, dan tidak memerlukan pemasangan tempatan.
Keputusan kami selepas ujian
Kami menguji prompt ini pada Qwen dan hasilnya sangat menakjubkan untuk percubaan pertama. Antara muka dijana serta-merta, kesan 3D menambah sentuhan premium yang sebenar, dan tema diterapkan dengan sempurna.
Sebagai pembangun, anda akan mendapati bahawa beberapa penyesuaian manual kecil diperlukan untuk mencapai kesempurnaan: kod QR memerlukan perpustakaan sebenar untuk berfungsi, dan tangkapan PNG melalui html2canvas kadangkala boleh mengalihkan elemen CSS kompleks sedikit. Walau bagaimanapun, sebagai asas yang dijana dalam 10 saat, ia sangat menjimatkan masa!
Giliran anda!
Salin kod, sesuaikan butiran, dan cipta lencana yang sempurna untuk acara rangkaian anda yang seterusnya! Jika anda menikmati helah pembangunan dan kejuruteraan prompt ini untuk menjimatkan masa, jangan lupa untuk melanggan surat berita kami untuk menerima alat dan analisis yang akan datang terus ke peti masuk anda.
