Úterní prompt #13: kódování prémiového generátoru vizitek 💼✨

Pro tento 13. úterní prompt jsme vyzvali AI, aby vytvořila kompletní mininástroj pro generování vašich vlastních profesionálních vizitek.

Na Linkeum mluvíme o financích, investicích a profesionálních událostech. A v těchto světech je networking vším. Co je nepostradatelnějšího než vizitka nebo konferenční jmenovka?

Pro tento 13. úterní prompt jsme vyzvali AI, aby vytvořila kompletní mininástroj pro generování vašich vlastních profesionálních vizitek. Cílem je vygenerovat „Single-Page“ webovou aplikaci (HTML, CSS a JS v jednom souboru), která umožňuje přizpůsobení vizitky nebo jmenovky v reálném čase. Požádali jsme AI, aby integrovala profesionální motivy (Wall Street, Fintech), elegantní 3D efekt při přejetí myší a možnost exportovat výsledek jako obrázek PNG.

Prompt

Prompt byl napsán v angličtině, aby se maximalizovala kvalita generovaného kódu, se zvláštním zaměřením na design UI/UX a použití externích knihoven přes 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.

Náš verdikt po testování

Tento prompt jsme otestovali na Qwenu a výsledek je na „One-Shot“ pokus ohromující. Rozhraní se vygeneruje okamžitě, 3D efekt dodává skutečný prémiový nádech a motivy se aplikují perfektně.

Jako vývojář si všimnete, že k dosažení dokonalosti je zapotřebí několik drobných ručních úprav: QR kód vyžaduje ke své funkčnosti skutečnou knihovnu a zachycení PNG přes html2canvas může někdy mírně posunout složité prvky CSS. Nicméně jako základ vygenerovaný za 10 sekund je to výjimečná úspora času!

Jste na řadě!

Zkopírujte kód, vylaďte detaily a vytvořte dokonalou jmenovku pro vaši další networkingovou událost! Pokud vás baví tyto druhy vývojářských triků a prompt engineeringu pro úsporu času, nezapomeňte se přihlásit k odběru našeho newsletteru, abyste dostávali nadcházející nástroje a analýzy přímo do vaší schránky.