Tiistain prompti #13: premium-käyntikorttigeneraattorin koodaus 💼✨

Tässä 13. tiistain promptissa haastoimme tekoälyn luomaan täydellisen minityökalun omien ammattikäyntikorttiesi luomiseen.

Linkeumissa puhumme rahoituksesta, sijoituksista ja ammatillisista tapahtumista. Ja näissä maailmoissa verkostoituminen on kaiken a ja o. Mikä onkaan tärkeämpää kuin käyntikortti tai konferenssin nimikyltti?

Tässä 13. tiistain promptissa haastoimme tekoälyn luomaan täydellisen minityökalun omien ammattikäyntikorttiesi luomiseen. Tavoitteena on luoda "Single-Page"-verkkosovellus (HTML, CSS ja JS yhdessä tiedostossa), joka mahdollistaa käyntikortin tai nimikyltin reaaliaikaisen mukauttamisen. Pyysimme tekoälyä integroimaan ammattimaisia teemoja (Wall Street, Fintech), tyylikkään 3D-leijutehosteen ja mahdollisuuden viedä tulos PNG-kuvana.

Prompti

Prompti kirjoitettiin englanniksi luodun koodin laadun maksimoimiseksi, ja siinä keskityttiin erityisesti UI/UX-suunnitteluun ja ulkoisten kirjastojen käyttöön CDN:n kautta.

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.

Tuomiomme testin jälkeen

Testasimme tätä promptia Qwenillä, ja tulos on uskomaton "One-Shot"-yritykseksi. Käyttöliittymä luodaan välittömästi, 3D-tehoste lisää todellisen premium-tuntuman, ja teemat soveltuvat täydellisesti.

Kehittäjänä huomaat, että täydellisyyden saavuttamiseksi tarvitaan muutama pieni manuaalinen säätö: QR-koodi vaatii toimiakseen oikean kirjaston, ja PNG-kaappaus html2canvas:n kautta voi joskus siirtää monimutkaisia CSS-elementtejä hieman. 10 sekunnissa luotuna perustana se on kuitenkin poikkeuksellinen ajansäästäjä!

Sinun vuorosi!

Kopioi koodi, säädä yksityiskohtia ja luo täydellinen nimikyltti seuraavaan verkostoitumistapahtumaasi! Jos pidät tällaisista kehitystemppuista ja prompt-suunnittelusta ajan säästämiseksi, muista tilata uutiskirjeemme saadaksesi tulevat työkalut ja analyysit suoraan sähköpostiisi.