Вівторковий промпт #13: кодування генератора преміальних візиток 💼✨

Для цього 13-го вівторкового промпту ми кинули виклик ШІ створити повноцінний міні-інструмент для генерації власних професійних візиток.

На Linkeum ми говоримо про фінанси, інвестиції та професійні заходи. А в цих світах нетворкінг – це все. Що є більш необхідним, ніж візитна картка чи бейдж конференції?

Для цього 13-го вівторкового промпту ми кинули виклик ШІ створити повноцінний міні-інструмент для генерації власних професійних візиток. Мета полягає в тому, щоб створити веб-додаток "Одна сторінка" (HTML, CSS та JS в одному файлі), який дозволяє налаштовувати візитку або бейдж у реальному часі. Ми попросили ШІ інтегрувати професійні теми (Волл-стріт, фінтех), елегантний 3D-ефект при наведенні курсору та можливість експортувати результат як PNG-зображення.

Промпт

Промпт було написано англійською мовою, щоб максимізувати якість згенерованого коду, з особливою увагою до 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.

Наш вердикт після тестування

Ми протестували цей промпт на Qwen, і результат приголомшливий для "One-Shot". Інтерфейс створюється миттєво, 3D-ефект додає справжнього преміального вигляду, а теми застосовуються ідеально.

Як розробник, ви помітите, що для досягнення ідеалу потрібні кілька незначних ручних налаштувань: QR-коду потрібна справжня бібліотека, щоб бути функціональним, а захоплення PNG через html2canvas іноді може трохи змістити складні CSS-елементи. Однак як базова версія, згенерована за 10 секунд, це надзвичайна економія часу!

Ваша черга!

Скопіюйте код, налаштуйте деталі та створіть ідеальний бейдж для свого наступного заходу з нетворкінгу! Якщо вам подобаються подібні хитрощі розробки та інженерія промптів для економії часу, не забудьте підписатися на нашу розсилку, щоб отримувати майбутні інструменти та аналітику прямо на свою поштову скриньку.