Đối với prompt thứ Ba lần thứ 13 này, chúng tôi đã thách thức AI tạo ra một công cụ mini hoàn chỉnh để tạo danh thiếp chuyên nghiệp của riêng bạn.
Trên Linkeum, chúng tôi nói về tài chính, đầu tư và các sự kiện chuyên nghiệp. Và trong những thế giới này, kết nối mạng lưới là trên hết. Còn điều gì cần thiết hơn một tấm danh thiếp hay một chiếc huy hiệu hội nghị?
Đối với prompt thứ Ba lần thứ 13 này, chúng tôi đã thách thức AI tạo ra một công cụ mini hoàn chỉnh để tạo danh thiếp chuyên nghiệp của riêng bạn. Mục tiêu là tạo ra một ứng dụng web "Trang đơn" (HTML, CSS và JS trong một tệp duy nhất) cho phép tùy chỉnh danh thiếp hoặc huy hiệu theo thời gian thực. Chúng tôi đã yêu cầu AI tích hợp các chủ đề chuyên nghiệp (Phố Wall, Fintech), hiệu ứng di chuột 3D thanh lịch và khả năng xuất kết quả dưới dạng hình ảnh PNG.
Prompt
Prompt được viết bằng tiếng Anh để tối đa hóa chất lượng của mã được tạo ra, đặc biệt chú trọng vào thiết kế UI/UX và việc sử dụng các thư viện bên ngoài thông qua 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.
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.
Nhận định của chúng tôi sau khi thử nghiệm
Chúng tôi đã thử nghiệm prompt này trên Qwen và kết quả thật đáng kinh ngạc cho một "One-Shot". Giao diện được tạo ngay lập tức, hiệu ứng 3D tạo thêm điểm nhấn thực sự cao cấp và các chủ đề áp dụng một cách hoàn hảo.
Là một nhà phát triển, bạn sẽ nhận thấy rằng cần có một vài điều chỉnh thủ công nhỏ để đạt được sự hoàn hảo: mã QR cần một thư viện thực sự để hoạt động và chụp ảnh PNG qua html2canvas đôi khi có thể làm thay đổi nhẹ các phần tử CSS phức tạp. Tuy nhiên, với tư cách là cơ sở được tạo trong 10 giây, đó là một sự tiết kiệm thời gian đặc biệt!
Đến lượt bạn!
Sao chép mã, điều chỉnh các chi tiết và tạo huy hiệu hoàn hảo cho sự kiện kết nối tiếp theo của bạn! Nếu bạn thích các thủ thuật phát triển và kỹ thuật prompt này để tiết kiệm thời gian, đừng quên đăng ký bản tin của chúng tôi để nhận trực tiếp các công cụ và phân tích sắp tới vào hộp thư đến của bạn.
