เครื่องมือนี้ช่วยสร้างหน้าแสดงรายละเอียดสินค้าอีคอมเมิร์ซบนเดสก์ท็อปที่ดูเป็นมืออาชีพสำหรับคีย์บอร์ดแมคคานิคอลระดับพรีเมียม เหมาะสำหรับการจัดแสดงผลงานการออกแบบผลิตภัณฑ์ แนวคิดหน้าร้าน และ UI ม็อกอัป
สร้างหน้าแสดงรายละเอียดสินค้าอีคอมเมิร์ซที่ดูสะอาดตาและทันสมัยสำหรับแบรนด์คีย์บอร์ดแมคคานิคอลระดับพรีเมียมในชื่อ KeyForge โดยนำเสนอในรูปแบบม็อกอัปเว็บไซต์เดสก์ท็อปความละเอียดสูงบนพื้นหลังสีขาว พร้อมเส้นแบ่งสีเทาอ่อนและระยะห่างที่เหมาะสม เลย์เอาต์เป็นฉากหน้าร้านแบบรวมในหน้าเดียว ประกอบด้วยแถบนำทางด้านบน แถบรูปภาพตัวอย่างสินค้าทางด้านซ้าย รูปภาพสินค้าหลักขนาดใหญ่ตรงกลาง และแผงข้อมูลการสั่งซื้อทางด้านขวา ในส่วนหัว ให้วางโลโก้แบรนด์ไว้ที่ด้านซ้ายสุด ตามด้วยรายการนำทาง 7 รายการ ได้แก่ “Keyboards”, “Switches”, “Keycaps”, “Accessories”, “Sale”, “Blog” และ “Support” และที่ด้านขวาสุดให้มีไอคอน 3 รายการสำหรับค้นหา บัญชีผู้ใช้ และตะกร้าสินค้า โดยมีป้ายแจ้งเตือนสีดำเล็กๆ แสดงเลข “1” บนตะกร้าสินค้า สินค้าหลักที่แสดงตรงกลางคือคีย์บอร์ดแมคคานิคอลขนาด 75% ถ่ายจากมุมด้านหน้าที่ยกสูงขึ้นเล็กน้อยบนแท่นวางสีเทาอ่อน ตัวเคสทำจากอะลูมิเนียมสีเงิน ปุ่มกดสีขาวและเทา พร้อมปุ่มเน้นสีม่วงลาเวนเดอร์ และปุ่มหมุนปรับระดับเสียงสีเงินที่ด้านขวาบน แกลเลอรีแนวตั้งทางด้านซ้ายประกอบด้วยรูปภาพตัวอย่าง 5 รายการ ได้แก่ รูปสินค้าด้านหน้า 1 รูป, มุมมองคีย์บอร์ดแบบเอียง 1 รูป, ภาพระยะใกล้ของสวิตช์แมคคานิคอล 1 รูป, ภาพระยะใกล้ของพื้นผิวปุ่มกด 1 รูป และภาพตัวอย่างวิดีโอโทนเข้มพร้อมไอคอนเล่นวิดีโอวงกลม 1 รูป แผงสินค้าด้านขวาประกอบด้วยป้ายกำกับขนาดเล็กคำว่า “NEW”, ชื่อสินค้าตัวหนาขนาดใหญ่ KeyForge K75 Pro, คำบรรยายใต้ชื่อ “75% Mechanical Keyboard”, แถบแสดงคะแนน 5 ดาวพร้อมตัวเลข 4.8 และ “(126 reviews)”, ราคาตัวหนาขนาดใหญ่ $129.99 ตามด้วยสถานะ “In Stock” สีเขียว และคำอธิบายสั้นๆ สองประโยคเกี่ยวกับประสิทธิภาพระดับพรีเมียม ดีไซน์แบบ Gasket-mounted รองรับ 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 เงาที่นุ่มนวล มุมโค้งมนที่ละเอียดอ่อน ไอคอนแบบโมโนโครม และการนำเสนอสินค้าอิเล็กทรอนิกส์สำหรับผู้บริโภคในสไตล์สตาร์ทอัพที่ดูเป็นมืออาชีพ