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

สร้างหน้ารายละเอียดสินค้าอีคอมเมิร์ซที่สะอาดตาและทันสมัยเพื่อแสดงสินค้าชื่อ {argument name="brand name" default="KeyForge"} ซึ่งเป็นแบรนด์คีย์บอร์ดเชิงกลระดับไฮเอนด์ หน้าเว็บนำเสนอโมเดลเว็บไซต์บนเดสก์ท็อปที่มีความละเอียดสูง โดยมีพื้นหลังสีขาว เส้นแบ่งสีเทาอ่อน และพื้นที่ว่างสีขาวมากมาย เลย์เอาต์เป็นฉากร้านค้าที่รวมเป็นหนึ่งเดียว ประกอบด้วยแถบนำทางด้านบน แถบภาพขนาดย่อของสินค้าทางด้านซ้าย ภาพสินค้าขนาดใหญ่ตรงกลาง และแผงข้อมูลการซื้อทางด้านขวา ด้านบนซ้ายของส่วนหัวเป็นโลโก้แบรนด์ตัวหนา ตามด้วยรายการนำทางเจ็ดรายการ ได้แก่ "คีย์บอร์ด" "สวิตช์" "ปุ่มกด" "อุปกรณ์เสริม" "ลดราคา" "บล็อก" และ "การสนับสนุน" ทางด้านขวาสุดมีไอคอนสามไอคอน ได้แก่ ค้นหา บัญชี และตะกร้าสินค้า ไอคอนตะกร้าสินค้ามีป้ายแจ้งเตือนสีดำขนาดเล็กแสดงเลข "1" สินค้าหลักที่แสดงอยู่ตรงกลางคือคีย์บอร์ดเชิงกลขนาดกะทัดรัดแบบ 75% ถ่ายภาพจากมุมด้านหน้าเอียงลงเล็กน้อย วางอยู่บนขาตั้งแสดงสินค้าสีเทาอ่อน คีย์บอร์ดนี้มีตัวเรือนทำจากโลหะผสมอะลูมิเนียมสีเงิน ปุ่มกดสีขาวและสีเทา ปุ่มฟังก์ชันสีม่วงอ่อนบางปุ่ม และปุ่มปรับระดับเสียงสีเงินอยู่ที่มุมบนขวา แถบแสดงภาพด้านซ้ายประกอบด้วยภาพขนาดย่อห้าภาพ ได้แก่ ภาพด้านหน้าของผลิตภัณฑ์ที่เลือกมา ภาพด้านข้างของคีย์บอร์ด ภาพระยะใกล้ของสวิตช์เชิงกล ภาพระยะใกล้ของพื้นผิวปุ่มกด และภาพขนาดย่อของวิดีโอสีเข้มพร้อมไอคอนเล่นวงกลม แผงผลิตภัณฑ์ด้านขวามีป้ายกำกับขนาดเล็กที่เขียนว่า "ใหม่" และชื่อผลิตภัณฑ์เป็นตัวหนา คำบรรยายย่อยคือ "คีย์บอร์ดเชิงกล 75%" ตามด้วยคะแนน 5 ดาว 4.8 ดาว และ "(126 รีวิว)" และราคาเป็นตัวหนา สถานะสีเขียว "มีสินค้าในสต็อก" ตามมาด้วยคำอธิบายสั้น ๆ เกี่ยวกับประสิทธิภาพที่เหนือกว่า การออกแบบปะเก็น การรองรับ QMK/VIA และเอฟเฟกต์แสง RGB ด้านล่างนี้คือตัวเลือก "ประเภทสวิตช์" ที่มีปุ่มแคปซูลสี่ปุ่ม ได้แก่ "Cherry MX Red," "Gateron Brown," "Gateron Blue," และ "TTC Gold Pink" โดยปุ่มแรกถูกเลือกไว้เป็นค่าเริ่มต้น ตัวเลือก "สี" ที่มีปุ่มแคปซูลสามปุ่ม ได้แก่ "ขาว/ม่วง," "ดำ/เทา," และ "น้ำเงินเข้ม/น้ำเงิน" โดยปุ่มแรกถูกเลือกไว้เป็นค่าเริ่มต้น เมนูแบบดรอปดาวน์ "จำนวน" ตั้งค่าเป็น "1" ปุ่มหลักสีดำขนาดใหญ่ที่มีไอคอนตะกร้าสินค้าและข้อความ "เพิ่มลงในตะกร้า" และปุ่มรองที่มีกรอบรูปหัวใจและข้อความ "เพิ่มลงในรายการที่ต้องการ" ด้านล่างปุ่ม จะมีไฮไลท์บริการแนวนอนสามรายการแสดงด้วยไอคอนขนาดเล็ก ได้แก่ "จัดส่งฟรี" พร้อมคำบรรยายย่อย "สำหรับการสั่งซื้อมากกว่า 99 ดอลลาร์" "คืนสินค้าภายใน 30 วัน" พร้อมคำบรรยายย่อย "คืนสินค้าได้ง่าย" และ "รับประกัน 2 ปี" พร้อมคำบรรยายย่อย "สบายใจได้" ด้านล่างพื้นที่เนื้อหานี้ จะมีการจัดวางแบบสองคอลัมน์ โดยคั่นด้วยเส้นบางๆ ด้านซ้ายมีรายการป้ายกำกับแนวตั้งซึ่งประกอบด้วยห้ารายการ ได้แก่ "ภาพรวม" (เลือกแล้ว), "ข้อมูลจำเพาะ", "สิ่งที่มีอยู่ในกล่อง", "การจัดส่งและการคืนสินค้า" และ "รีวิว (126)" ด้านขวาของป้ายกำกับ มีตารางสีขาวโค้งมนวางการ์ดฟังก์ชัน ซึ่งประกอบด้วยบล็อกฟังก์ชันหกบล็อกในสองแถวและสามคอลัมน์ บล็อกฟังก์ชันแต่ละบล็อกมีไอคอนเส้นง่ายๆ ชื่อเรื่องตัวหนา และคำอธิบายสั้นๆ ได้แก่ "เค้าโครง 75%", "ติดตั้งด้วยปะเก็น", "รองรับ QMK/VIA", "ถอดเปลี่ยนได้ขณะทำงาน", "ไฟแบ็คไลท์ RGB" และ "โครงสร้างระดับพรีเมียม" ทางด้านขวาสุดของบริเวณนี้ มีรายการข้อมูลจำเพาะที่ประกอบด้วยประเด็นสำคัญเจ็ดประการ ได้แก่ “เค้าโครง: 75% (82 ปุ่ม)”, “ประเภทสวิตช์: Cherry MX Red”, “การติดตั้ง: แบบมีปะเก็น”, “การเชื่อมต่อ: USB-C (แบบมีสาย)”, “ไฟแบ็คไลท์: RGB หันไปทางทิศใต้”, “วัสดุ: ตัวเรือนอะลูมิเนียม” และ “ขนาด: 322 x 135 x 42 มม.” โดยมีประเด็นสุดท้ายคือ “น้ำหนัก: 1.25 กก.” ดีไซน์ของผลิตภัณฑ์เน้นความเรียบง่ายและประณีต มีระยะห่างระหว่างปุ่ม UI ที่สมจริง ตัวอักษรแบบไม่มีเชิงที่สะอาดตาคล้ายกับ Intel หรือ SF Pro เงาที่นุ่มนวล มุมโค้งมนเล็กน้อย ไอคอนสีขาวดำ และการนำเสนอแบบอิเล็กทรอนิกส์สำหรับผู้บริโภคในสไตล์สตาร์ทอัพที่ดูดีมีระดับ