Voor deze 13e dinsdagprompt hebben we de AI uitgedaagd om een complete minitool te maken om je eigen professionele visitekaartjes te genereren.
Op Linkeum hebben we het over financiën, investeringen en professionele evenementen. En in deze werelden is netwerken koning. Wat is er onmisbaarder dan een visitekaartje of een conferentiebadge?
Voor deze 13e dinsdagprompt hebben we de AI uitgedaagd om een complete minitool te maken om je eigen professionele visitekaartjes te genereren. Het doel is om een "Single-Page" webapplicatie te genereren (HTML, CSS en JS in één bestand) waarmee een visitekaartje of badge in realtime kan worden aangepast. We hebben de AI gevraagd om professionele thema's (Wall Street, Fintech), een elegant 3D-hovereffect en de mogelijkheid om het resultaat als PNG-afbeelding te exporteren, te integreren.
De prompt
De prompt is in het Engels geschreven om de kwaliteit van de gegenereerde code te maximaliseren, met speciale aandacht voor UI/UX-design en het gebruik van externe bibliotheken 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.
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 must be clean, heavily commented, fully functional in a modern browser, and require zero local installation.
Ons oordeel na de test
We hebben deze prompt op Qwen getest en het resultaat is verbluffend voor een "One-Shot". De interface wordt direct gegenereerd, het 3D-effect voegt een echte premium touch toe en de thema's worden perfect toegepast.
Als ontwikkelaar zul je merken dat er enkele kleine handmatige aanpassingen nodig zijn om perfectie te bereiken: de QR-code vereist een echte bibliotheek om functioneel te zijn, en de PNG-opname via html2canvas kan soms complexe CSS-elementen iets verschuiven. Maar als basis die in 10 seconden is gegenereerd, is het een uitzonderlijke tijdsbesparing!
Jouw beurt!
Kopieer de code, pas de details aan en maak de perfecte badge voor je volgende netwerkevenement! Als je van dit soort ontwikkelingstrucs en prompt engineering houdt om tijd te besparen, vergeet dan niet om je in te schrijven voor onze nieuwsbrief om de volgende tools en analyses direct in je inbox te ontvangen.
