ภาพจำลองหน้าผลิตภัณฑ์คีย์บอร์ดเชิงกล

สร้างหน้ารายละเอียดผลิตภัณฑ์อีคอมเมิร์ซที่สะอาดและทันสมัยสำหรับแบรนด์คีย์บอร์ดกลไกพรีเมียมที่เรียกว่า {argument name="brand name" default="KeyForge"} นำเสนอเป็นภาพจำลองเว็บไซต์เดสก์ท็อปความละเอียดสูงบนพื้นหลังสีขาวพร้อมตัวแบ่งสีเทาอ่อนๆ และระยะห่างที่กว้างขวาง เลย์เอาต์เป็นฉากร้านค้าแบบรวมเป็นหนึ่งเดียว โดยมีแถบนำทางด้านบน ราวภาพขนาดย่อผลิตภัณฑ์ทางด้านซ้าย รูปภาพหลักผลิตภัณฑ์ขนาดใหญ่ตรงกลาง และแผงข้อมูลการซื้อทางด้านขวา ในส่วนหัว ให้วางเครื่องหมายการค้าตัวหนาไว้ทางด้านซ้ายสุด จากนั้นตามด้วยรายการนำทาง 7 รายการ ได้แก่ “Keyboards”, “Switches”, “Keycaps”, “Accessories”, “Sale”, “Blog” และ “Support” และทางด้านขวาสุดมีไอคอน 3 ไอคอนสำหรับการค้นหา บัญชี และรถเข็นสินค้า โดยมีป้ายแจ้งเตือนสีดำขนาดเล็กแสดง “1” บนรถเข็นสินค้า ผลิตภัณฑ์หลักที่แสดงตรงกลางคือคีย์บอร์ดกลไกขนาดกะทัดรัด 75% ที่ถ่ายจากมุมมองด้านหน้าเล็กน้อยบนเวทีสีเทาอ่อนๆ พร้อมเคสอะลูมิเนียมในสีเงิน คีย์แคปสีขาวและสีเทา คีย์เน้นสีม่วงลาเวนเดอร์ และปุ่มปรับระดับเสียงสีเงินที่ด้านขวาบน แกลเลอรีแนวตั้งทางด้านซ้ายมีภาพขนาดย่อ 5 ภาพ: ภาพผลิตภัณฑ์ด้านหน้าแบบเลือก 1 ภาพ มุมมองคีย์บอร์ดแบบเอียง 1 ภาพ ภาพระยะใกล้ของสวิตช์กลไก 1 ภาพ ภาพระยะใกล้ของพื้นผิวคีย์แคป 1 ภาพ และภาพตัวอย่างวิดีโอสีเข้ม 1 ภาพที่มีไอคอนเล่นแบบวงกลม แผงผลิตภัณฑ์ทางด้านขวาประกอบด้วยป้ายยาขนาดเล็กที่อ่านว่า “NEW”, ชื่อผลิตภัณฑ์ตัวหนาขนาดใหญ่ {argument name="product name" default="KeyForge K75 Pro"}, คำอธิบาย “75% Mechanical Keyboard”, แถบการให้คะแนน 5 ดาว พร้อม 4.8 และ “(126 reviews)”, ราคาตัวหนาขนาดใหญ่ {argument name="price" default="$129.99"} ตามด้วยสถานะ “In Stock” สีเขียว และคำอธิบายสั้นๆ สองประโยคเกี่ยวกับประสิทธิภาพระดับพรีเมียม การออกแบบแบบติดตั้งด้วยแก๊สเก็ต การรองรับ QMK/VIA และ RGB ภายใต้สิ่งนั้น ให้รวมตัวเลือก “Switch Type” ที่มีปุ่มยา 4 ปุ่มที่ระบุว่า “Cherry MX Red”, “Gateron Brown”, “Gateron Blue” และ “TTC Gold Pink” โดยปุ่มแรกถูกเลือกไว้ และตัวเลือก “Color” ที่มีปุ่มยา 3 ปุ่มที่ระบุว่า “White / Purple”, “Black / Gray” และ “Navy / Blue” โดยปุ่มแรกถูกเลือกไว้ และเมนูแบบเลื่อนลง “Quantity” ที่ตั้งค่าเป็น “1” ปุ่มหลักสีดำขนาดใหญ่ที่ระบุว่า “Add to Cart” พร้อมไอคอนรถเข็นสินค้า และปุ่มรองแบบมีเส้นขอบที่ระบุว่า “Add to Wishlist” พร้อมไอคอนรูปหัวใจ ใต้ปุ่ม ให้แสดงจุดเด่นของบริการแนวนอน 3 จุดที่มีไอคอนขนาดเล็ก: “Free Shipping” พร้อมข้อความ “On orders over $99”, “30-Day Returns” พร้อมข้อความ “Hassle-free returns” และ “2-Year Warranty” พร้อมข้อความ “Peace of mind” ในส่วนเนื้อหาด้านล่าง ให้สร้างส่วนสองคอลัมน์ที่คั่นด้วยเส้นสีอ่อนๆ ทางด้านซ้ายคือรายการแท็บแนวตั้งที่มี 5 รายการ: “Overview” ที่เลือกไว้ จากนั้น “Specifications”, “What’s in the Box”, “Shipping & Returns” และ “Reviews (126)” ทางด้านขวาของแท็บ ให้วางการ์ดคุณสมบัติสีขาวแบบโค้งมนที่มีบล็อกคุณสมบัติ 6 บล็อกใน 2 แถวของ 3 บล็อก แต่ละบล็อกมีไอคอนเส้นง่าย ชื่อตัวหนา และข้อความอธิบายสั้นๆ: “75% Layout”, “Gasket-Mounted”, “QMK/VIA Support”, “Hot-Swappable”, “RGB Backlighting” และ “Premium Build” ทางด้านขวาสุดของพื้นที่ด้านล่าง ให้เพิ่มรายการสเปคแบบมีจุดที่มี 7 จุด: “Layout: 75% (82 Keys)”, “Switch Type: Cherry MX Red”, “Mounting: Gasket-Mounted”, “Connectivity: USB-C (Wired)”, “Backlight: RGB, South-facing”, “Material: Aluminum Case” และ “Dimensions: 322 x 135 x 42 mm” พร้อมจุดสุดท้ายเพิ่มเติม “Weight: 1.25 kg” ใช้ความสวยงามในการออกแบบผลิตภัณฑ์ที่เรียบง่ายและประณีต ระยะห่างของ UI ที่สมจริง ตัวอักษร sans-serif ที่สะอาดตาคล้าย Inter หรือ SF Pro เงาที่นุ่ม มุมมนเล็กน้อย ไอคอนขาวดำ และการนำเสนออุปกรณ์อิเล็กทรอนิกส์สำหรับผู้บริโภคในรูปแบบสตาร์ทอัพที่ขัดเกลา