Pour ce 13ème prompt du mardi, nous avons mis l'IA au défi de créer un mini-outil complet pour générer vos propres cartes de visite professionnelles.
Sur Linkeum, nous parlons de finance, d'investissements et d'événements professionnels. Et dans ces univers, le networking est roi. Quoi de plus incontournable qu'une carte de visite ou un badge de conférence ?
Pour ce 13ème prompt du mardi, nous avons mis l'IA au défi de créer un mini-outil complet pour générer vos propres cartes de visite professionnelles. L'objectif est de générer une application web "Single-Page" (HTML, CSS et JS dans un seul fichier) qui permet de personnaliser une carte de visite ou un badge en temps réel. Nous avons demandé à l'IA d'intégrer des thèmes professionnels (Wall Street, Fintech), un effet 3D élégant au survol, et la possibilité d'exporter le résultat en image PNG.
Le prompt
Le prompt a été rédigé en anglais pour maximiser la qualité du code généré, avec une attention particulière sur le design UI/UX et l'utilisation de librairies externes 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.
Notre verdict après test
Nous avons testé ce prompt sur Qwen et le résultat est bluffant pour un "One-Shot". L'interface est générée instantanément, l'effet 3D apporte une vraie touche premium, et les thèmes s'appliquent parfaitement.
En tant que développeur, vous remarquerez qu'il reste quelques petits ajustements à faire manuellement pour atteindre la perfection : le QR code nécessite une vraie librairie pour être fonctionnel, et la capture PNG via html2canvas peut parfois légèrement décaler certains éléments CSS complexes. Cependant, comme base de travail générée en 10 secondes, c'est un gain de temps exceptionnel !
À vous de jouer !
Copiez le code, ajustez les détails, et créez le badge parfait pour votre prochain événement networking ! Si vous aimez ce genre d'astuces de développement et de prompt engineering pour gagner du temps, n'oubliez pas de vous inscrire à notre newsletter pour recevoir directement les prochains outils et analyses dans votre boîte mail.
