Für diesen 13. Dienstag-prompt haben wir die KI herausgefordert, ein komplettes Mini-Tool zur Erstellung Ihrer eigenen professionellen Visitenkarten zu entwickeln.
Auf Linkeum sprechen wir über Finanzen, Investitionen und professionelle Veranstaltungen. In diesen Welten ist Networking das A und O. Was ist unverzichtbarer als eine Visitenkarte oder ein Konferenzausweis?
Für diesen 13. Dienstag-prompt haben wir die KI herausgefordert, ein komplettes Mini-Tool zur Erstellung Ihrer eigenen professionellen Visitenkarten zu entwickeln. Das Ziel ist die Erstellung einer "Single-Page" Webanwendung (HTML, CSS und JS in einer einzigen Datei), die die Echtzeit-Anpassung einer Visitenkarte oder eines Ausweises ermöglicht. Wir haben die KI gebeten, professionelle Themes (Wall Street, Fintech), einen eleganten 3D-Hover-Effekt und die Möglichkeit zum Export des Ergebnisses als PNG-Bild zu integrieren.
Der Prompt
Der Prompt wurde auf Englisch verfasst, um die Qualität des generierten Codes zu maximieren, mit besonderem Augenmerk auf das UI/UX-Design und die Verwendung externer Bibliotheken über 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.
Unser Urteil nach dem Test
Wir haben diesen Prompt auf Qwen getestet und das Ergebnis ist für einen "One-Shot" verblüffend. Die Benutzeroberfläche wird sofort generiert, der 3D-Effekt verleiht einen echten Premium-Touch, und die Themes werden perfekt angewendet.
Als Entwickler werden Sie feststellen, dass ein paar kleine manuelle Anpassungen nötig sind, um Perfektion zu erreichen: Der QR-Code benötigt eine echte Bibliothek, um zu funktionieren, und die PNG-Erfassung über html2canvas kann manchmal komplexe CSS-Elemente leicht verschieben. Als Grundlage, die in 10 Sekunden generiert wurde, ist es jedoch eine außergewöhnliche Zeitersparnis!
Jetzt sind Sie dran!
Kopieren Sie den Code, passen Sie die Details an und erstellen Sie den perfekten Ausweis für Ihr nächstes Networking-Event! Wenn Ihnen solche Entwicklungstricks und Prompt-Engineering zur Zeitersparnis gefallen, vergessen Sie nicht, unseren Newsletter zu abonnieren, um die nächsten Tools und Analysen direkt in Ihren Posteingang zu erhalten.
