Tirsdagens prompt #13: kodning af en premium visitkortgenerator 💼✨

Til denne 13. tirsdags-prompt udfordrede vi AI til at skabe et komplet miniværktøj til at generere dine egne professionelle visitkort.

På Linkeum taler vi om finans, investeringer og professionelle begivenheder. Og i disse verdener er netværk altafgørende. Hvad er mere uundværligt end et visitkort eller et konferencebadge?

Til denne 13. tirsdags-prompt udfordrede vi AI til at skabe et komplet miniværktøj til at generere dine egne professionelle visitkort. Målet er at generere en "Single-Page" webapplikation (HTML, CSS og JS i en enkelt fil), der tillader realtidstilpasning af et visitkort eller badge. Vi bad AI om at integrere professionelle temaer (Wall Street, Fintech), en elegant 3D hover-effekt og muligheden for at eksportere resultatet som et PNG-billede.

Prompten

Prompten blev skrevet på engelsk for at maksimere kvaliteten af den genererede kode med særligt fokus på UI/UX-design og brugen af eksterne biblioteker via 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 så 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.

Vores dom efter testen

Vi testede denne prompt på Qwen, og resultatet er forbløffende for et "One-Shot"-forsøg. Grænsefladen genereres øjeblikkeligt, 3D-effekten tilføjer et ægte premium-touch, og temaerne anvendes perfekt.

Som udvikler vil du bemærke, at der kræves nogle få mindre manuelle justeringer for at opnå perfektion: QR-koden kræver et rigtigt bibliotek for at fungere, og PNG-optagelsen via html2canvas kan nogle gange forskyde komplekse CSS-elementer en smule. Men som en base genereret på 10 sekunder er det en enestående tidsbesparelse!

Din tur!

Kopier koden, finjuster detaljerne, og skab det perfekte badge til dit næste netværksevent! Hvis du kan lide denne type udviklingstricks og prompt engineering for at spare tid, så glem ikke at tilmelde dig vores nyhedsbrev for at modtage kommende værktøjer og analyser direkte i din indbakke.