Tisdagens prompt #13: koda en premium visitkortsgenerator 💼✨

För denna 13:e tisdagsprompt utmanade vi AI att skapa ett komplett miniverktyg för att generera dina egna professionella visitkort.

På Linkeum pratar vi om finans, investeringar och professionella evenemang. Och i dessa världar är nätverkande A och O. Vad är mer oumbärligt än ett visitkort eller en konferensnamnskylt?

För denna 13:e tisdagsprompt utmanade vi AI att skapa ett komplett miniverktyg för att generera dina egna professionella visitkort. Målet är att generera en "Single-Page" webbapplikation (HTML, CSS och JS i en enda fil) som möjliggör realtidsanpassning av ett visitkort eller en namnskylt. Vi bad AI att integrera professionella teman (Wall Street, Fintech), en elegant 3D-hovringseffekt och möjligheten att exportera resultatet som en PNG-bild.

Prompten

Prompten skrevs på engelska för att maximera kvaliteten på den genererade koden, med särskilt fokus på UI/UX-design och användningen av externa bibliotek 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 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.

Vår dom efter testet

Vi testade denna prompt på Qwen och resultatet är fantastiskt för ett "One-Shot"-försök. Gränssnittet genereras direkt, 3D-effekten ger en verklig premiumkänsla och temana appliceras perfekt.

Som utvecklare kommer du att märka att det krävs några mindre manuella justeringar för att uppnå perfektion: QR-koden kräver ett riktigt bibliotek för att fungera, och PNG-fångsten via html2canvas kan ibland förskjuta komplexa CSS-element något. Men som en grund genererad på 10 sekunder är det en exceptionell tidsbesparing!

Din tur!

Kopiera koden, justera detaljerna och skapa den perfekta namnskylten för ditt nästa nätverksevenemang! Om du gillar den här typen av utvecklingstrick och prompt engineering för att spara tid, glöm inte att prenumerera på vårt nyhetsbrev för att få kommande verktyg och analyser direkt i din inkorg.