Вторничен промпт #13: кодиране на генератор на премиум визитки 💼✨

За този 13-ти вторничен промпт предизвикахме AI да създаде пълен мини-инструмент за генериране на ваши собствени професионални визитки.

В Linkeum говорим за финанси, инвестиции и професионални събития. А в тези светове нетуъркингът е всичко. Какво по-важно от визитка или бадж за конференция?

За този 13-ти вторничен промпт предизвикахме AI да създаде пълен мини-инструмент за генериране на ваши собствени професионални визитки. Целта е да се генерира уеб приложение „Single-Page“ (HTML, CSS и JS в един файл), което позволява персонализиране на визитка или бадж в реално време. Помолихме AI да интегрира професионални теми (Wall Street, Fintech), елегантен 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 секунди, това е изключително спестяване на време!

Ваш ред е!

Копирайте кода, коригирайте детайлите и създайте перфектния бадж за следващото ви нетуъркинг събитие! Ако ви харесват този вид трикове за разработка и промпт инженерство за спестяване на време, не забравяйте да се абонирате за нашия бюлетин, за да получавате предстоящи инструменти и анализи директно във входящата си поща.