Bu 13. Salı komutu için yapay zekaya, kendi profesyonel kartvizitlerinizi oluşturmanız için eksiksiz bir mini araç yaratması konusunda meydan okuduk.
Linkeum'da finans, yatırım ve profesyonel etkinliklerden bahsediyoruz. Ve bu dünyalarda ağ oluşturmak her şeydir. Bir kartvizit veya konferans yaka kartından daha vazgeçilmez ne olabilir?
Bu 13. Salı komutu için yapay zekaya, kendi profesyonel kartvizitlerinizi oluşturmanız için eksiksiz bir mini araç yaratması konusunda meydan okuduk. Amaç, bir kartviziti veya yaka kartını gerçek zamanlı olarak özelleştirmenize olanak tanıyan "Tek Sayfalık" bir web uygulaması (HTML, CSS ve JS tek bir dosyada) oluşturmaktır. Yapay zekadan profesyonel temalar (Wall Street, Fintech), üzerine gelindiğinde şık bir 3D efekti ve sonucu PNG görüntüsü olarak dışa aktarma yeteneği entegre etmesini istedik.
Komut
Komut, oluşturulan kodun kalitesini en üst düzeye çıkarmak için İngilizce olarak yazılmış olup, UI/UX tasarımına ve CDN aracılığıyla harici kütüphanelerin kullanımına özel olarak odaklanılmıştır.
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.
Test sonrası kararımız
Bu komutu Qwen üzerinde test ettik ve sonuç bir "Tek Seferlik" (One-Shot) işlem için gerçekten şaşırtıcı. Arayüz anında oluşturuluyor, 3D efekti gerçek bir premium dokunuş katıyor ve temalar mükemmel bir şekilde uygulanıyor.
Bir geliştirici olarak, mükemmelliğe ulaşmak için birkaç küçük manuel ayarın yapılması gerektiğini fark edeceksiniz: QR kodunun işlevsel olması için gerçek bir kütüphaneye ihtiyacı var ve html2canvas aracılığıyla PNG yakalama işlemi bazen karmaşık CSS öğelerini hafifçe kaydırabilir. Ancak, 10 saniyede oluşturulan bir temel olarak bu olağanüstü bir zaman tasarrufu!
Sıra sizde!
Kodu kopyalayın, ayrıntıları ayarlayın ve bir sonraki ağ oluşturma etkinliğiniz için mükemmel yaka kartını oluşturun! Zamandan tasarruf etmek için bu tür geliştirme püf noktalarından ve komut mühendisliğinden hoşlanıyorsanız, yaklaşan araçları ve analizleri doğrudan gelen kutunuza almak için bültenimize abone olmayı unutmayın.
