Pentru acest al 13-lea prompt de marți, am provocat AI-ul să creeze un mini-instrument complet pentru a vă genera propriile cărți de vizită profesionale.
Pe Linkeum vorbim despre finanțe, investiții și evenimente profesionale. Și în aceste lumi, networking-ul este rege. Ce este mai esențial decât o carte de vizită sau un ecuson de conferință?
Pentru acest al 13-lea prompt de marți, am provocat AI-ul să creeze un mini-instrument complet pentru a vă genera propriile cărți de vizită profesionale. Scopul este de a genera o aplicație web „Single-Page” (HTML, CSS și JS într-un singur fișier) care permite personalizarea în timp real a unei cărți de vizită sau a unui ecuson. Am cerut AI-ului să integreze teme profesionale (Wall Street, Fintech), un efect elegant 3D la trecerea mouse-ului și capacitatea de a exporta rezultatul ca imagine PNG.
Promptul
Promptul a fost scris în limba engleză pentru a maximiza calitatea codului generat, cu un accent deosebit pe designul UI/UX și utilizarea bibliotecilor externe prin 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.
Verdictul nostru după testare
Am testat acest prompt pe Qwen și rezultatul este uimitor pentru o încercare „One-Shot”. Interfața este generată instantaneu, efectul 3D adaugă o notă cu adevărat premium, iar temele se aplică perfect.
În calitate de dezvoltator, veți observa că sunt necesare câteva ajustări manuale minore pentru a obține perfecțiunea: codul QR necesită o bibliotecă reală pentru a fi funcțional, iar captura PNG prin html2canvas poate uneori schimba ușor elementele CSS complexe. Cu toate acestea, ca bază generată în 10 secunde, este o economie de timp excepțională!
Este rândul dumneavoastră!
Copiați codul, ajustați detaliile și creați ecusonul perfect pentru următorul eveniment de networking! Dacă vă bucurați de aceste tipuri de trucuri de dezvoltare și prompt engineering pentru a economisi timp, nu uitați să vă abonați la newsletter-ul nostru pentru a primi viitoarele instrumente și analize direct în căsuța de e-mail.
