Tuesday prompt #13: προγραμματισμός μιας premium γεννήτριας επαγγελματικών καρτών 💼✨

Για αυτό το 13ο Tuesday prompt, προκαλέσαμε την τεχνητή νοημοσύνη να δημιουργήσει ένα πλήρες μίνι-εργαλείο για να παράγετε τις δικές σας επαγγελματικές κάρτες.

Στο Linkeum, μιλάμε για χρηματοοικονομικά, επενδύσεις και επαγγελματικές εκδηλώσεις. Και σε αυτούς τους κόσμους, η δικτύωση είναι το παν. Τι είναι πιο απαραίτητο από μια επαγγελματική κάρτα ή ένα σήμα συνεδρίου;

Για αυτό το 13ο Tuesday prompt, προκαλέσαμε την τεχνητή νοημοσύνη να δημιουργήσει ένα πλήρες μίνι-εργαλείο για να παράγετε τις δικές σας επαγγελματικές κάρτες. Ο στόχος είναι να δημιουργηθεί μια διαδικτυακή εφαρμογή "Μονής σελίδας" (HTML, CSS και JS σε ένα αρχείο) που επιτρέπει την προσαρμογή μιας επαγγελματικής κάρτας ή σήματος σε πραγματικό χρόνο. Ζητήσαμε από την τεχνητή νοημοσύνη να ενσωματώσει επαγγελματικά θέματα (Wall Street, Fintech), ένα κομψό 3D εφέ κατά την αιώρηση του ποντικιού και τη δυνατότητα εξαγωγής του αποτελέσματος ως εικόνας PNG.

Το prompt

Το prompt γράφτηκε στα αγγλικά για να μεγιστοποιηθεί η ποιότητα του παραγόμενου κώδικα, με ιδιαίτερη έμφαση στον σχεδιασμό UI/UX και στη χρήση εξωτερικών βιβλιοθηκών μέσω 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.

Η ετυμηγορία μας μετά τη δοκιμή

Δοκιμάσαμε αυτό το prompt στην Qwen και το αποτέλεσμα είναι εκπληκτικό για μια προσπάθεια "One-Shot". Η διεπαφή δημιουργείται αμέσως, το 3D εφέ προσθέτει μια πραγματική πινελιά premium και τα θέματα εφαρμόζονται τέλεια.

Ως προγραμματιστής, θα παρατηρήσετε ότι χρειάζονται μερικές μικρές χειροκίνητες προσαρμογές για να επιτευχθεί η τελειότητα: ο κωδικός QR απαιτεί μια πραγματική βιβλιοθήκη για να είναι λειτουργικός και η λήψη PNG μέσω του html2canvas μπορεί μερικές φορές να μετατοπίσει ελαφρώς πολύπλοκα στοιχεία CSS. Ωστόσο, ως μια βάση που δημιουργείται σε 10 δευτερόλεπτα, πρόκειται για εξαιρετική εξοικονόμηση χρόνου!

Σειρά σας!

Αντιγράψτε τον κώδικα, προσαρμόστε τις λεπτομέρειες και δημιουργήστε το τέλειο σήμα για την επόμενη εκδήλωση δικτύωσής σας! Εάν απολαμβάνετε τέτοιου είδους κόλπα ανάπτυξης και μηχανικής προτροπών για εξοικονόμηση χρόνου, μην ξεχάσετε να εγγραφείτε στο ενημερωτικό μας δελτίο για να λαμβάνετε επερχόμενα εργαλεία και αναλύσεις απευθείας στα εισερχόμενά σας.