Tuesday prompt #13: เขียนโค้ดสร้างนามบัตรระดับพรีเมียม 💼✨

สำหรับ Tuesday prompt ครั้งที่ 13 นี้ เราได้ท้าทายให้ AI สร้างเครื่องมือขนาดเล็กที่สมบูรณ์แบบเพื่อสร้างนามบัตรระดับมืออาชีพของคุณเอง

บน Linkeum เราพูดถึงการเงิน การลงทุน และกิจกรรมระดับมืออาชีพ และในโลกเหล่านี้ การสร้างเครือข่ายคือสิ่งสำคัญที่สุด อะไรจะสำคัญไปกว่านามบัตรหรือป้ายชื่อในงานสัมมนา?

สำหรับ Tuesday prompt ครั้งที่ 13 นี้ เราได้ท้าทายให้ AI สร้างเครื่องมือขนาดเล็กที่สมบูรณ์แบบเพื่อสร้างนามบัตรระดับมืออาชีพของคุณเอง เป้าหมายคือการสร้างเว็บแอปพลิเคชัน "หน้าเดียว" (HTML, CSS และ JS ในไฟล์เดียว) ที่ช่วยให้ปรับแต่งนามบัตรหรือป้ายชื่อได้แบบเรียลไทม์ เราขอให้ AI ผสานรวมธีมระดับมืออาชีพ (Wall Street, Fintech) เอฟเฟกต์ 3D hover ที่สวยงาม และความสามารถในการส่งออกผลลัพธ์เป็นภาพ 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 วินาที มันช่วยประหยัดเวลาได้อย่างยอดเยี่ยม!

ตาคุณแล้ว!

คัดลอกโค้ด ปรับแต่งรายละเอียด และสร้างป้ายชื่อที่สมบูรณ์แบบสำหรับงานสร้างเครือข่ายครั้งต่อไปของคุณ! หากคุณสนุกกับเทคนิคการพัฒนาและวิศวกรรมพรอมต์เพื่อประหยัดเวลาประเภทนี้ อย่าลืมสมัครรับจดหมายข่าวของเรา เพื่อรับเครื่องมือและการวิเคราะห์ที่กำลังจะมีขึ้นส่งตรงถึงกล่องจดหมายของคุณ