# Mechanical Keyboard Product Page Mockup

- Model: [GPT Image 2](/models/chatgpt-image.md)
- Creator: [Library Shop (@library.shop)](/@library.shop.md)
- Label: AI-generated
- Use cases: Product ads
- AI keywords: ui design, product, minimal, graphic or type
- Copies: 0
- Saves: 0
- Published: 2026-10-31
- Cover image: https://cdn.promptclay.com/media/v/01M69J58HHWC0YRW160AZMNA53/w1200.webp
- Page: https://promptclay.com/prompts/mechanical-keyboard-product-page-mockup-hhqe69

## Prompt

```text
Create a clean modern e-commerce product detail page for a premium mechanical keyboard brand called {brand_name}, presented as a high-fidelity desktop website mockup on a white background with subtle light-gray dividers and generous spacing. The layout is a single unified storefront scene with a top navigation bar, a left product thumbnail rail, a large center product hero image, and a right-side purchase information panel. In the header, place the bold wordmark on the far left, then 7 navigation items reading “Keyboards”, “Switches”, “Keycaps”, “Accessories”, “Sale”, “Blog”, and “Support”, and on the far right 3 icons for search, account, and cart, with a small black notification badge showing “1” on the cart. The main product shown in the center is a compact 75% mechanical keyboard photographed from a slightly elevated front angle on a pale gray stage, with an aluminum case in silver, white and gray keycaps, several accent keys in lavender purple, and a silver volume knob at the top right. The left vertical gallery contains exactly 5 thumbnails: 1 selected front product shot, 1 angled keyboard view, 1 mechanical switch close-up, 1 keycap texture close-up, and 1 dark video thumbnail with a circular play icon. The right product panel includes a small pill badge reading “NEW”, a large bold product name {product_name}, a subtitle “75% Mechanical Keyboard”, a 5-star rating row with 4.8 and “(126 reviews)”, a large bold price {price} followed by a green “In Stock” status, and a short two-sentence description about premium performance, gasket-mounted design, QMK/VIA support, and RGB. Under that, include a “Switch Type” selector with exactly 4 pill buttons labeled “Cherry MX Red”, “Gateron Brown”, “Gateron Blue”, and “TTC Gold Pink”, with the first selected; a “Color” selector with exactly 3 pill buttons labeled “White / Purple”, “Black / Gray”, and “Navy / Blue”, with the first selected; a “Quantity” dropdown set to “1”; one large black primary button labeled “Add to Cart” with a cart icon; and one outlined secondary button labeled “Add to Wishlist” with a heart icon. Beneath the buttons, show exactly 3 horizontal service highlights with small icons: “Free Shipping” with subtext “On orders over $99”, “30-Day Returns” with subtext “Hassle-free returns”, and “2-Year Warranty” with subtext “Peace of mind”. In the lower content area, create a two-column section separated by light lines. On the left is a vertical tab list with exactly 5 items: “Overview” selected, then “Specifications”, “What’s in the Box”, “Shipping & Returns”, and “Reviews (126)”. To the right of the tabs, place a rounded white feature card grid with exactly 6 feature blocks in 2 rows of 3, each with a simple line icon, bold title, and short explanatory text: “75% Layout”, “Gasket-Mounted”, “QMK/VIA Support”, “Hot-Swappable”, “RGB Backlighting”, and “Premium Build”. On the far right of this lower area, add a specifications bullet list with exactly 7 bullets: “Layout: 75% (82 Keys)”, “Switch Type: Cherry MX Red”, “Mounting: Gasket-Mounted”, “Connectivity: USB-C (Wired)”, “Backlight: RGB, South-facing”, “Material: Aluminum Case”, and “Dimensions: 322 x 135 x 42 mm”, plus an additional final bullet “Weight: 1.25 kg”. Use a refined minimalist product-design aesthetic, realistic UI spacing, clean sans-serif typography similar to Inter or SF Pro, soft shadows, subtle rounded corners, monochrome icons, and polished startup-style consumer electronics presentation.
```

## Variables

Replace each `{variable}` before you paste the prompt.

| Variable | Label | Example |
|---|---|---|
| `{brand_name}` | brand name | KeyForge |
| `{product_name}` | product name | KeyForge K75 Pro |
| `{price}` | price | $129.99 |

## About

This generates a polished desktop e-commerce product page for a premium mechanical keyboard, suitable for product design showcases, storefront concepts, and UI mockups.

Prompt from YouMind OpenLab (github.com/YouMind-OpenLab).

## Credit and licence

Prompt by @library.shop on Promptclay, https://promptclay.com/prompts/mechanical-keyboard-product-page-mockup-hhqe69
When you use or share this prompt, credit the creator with that line. Licence: https://promptclay.com/terms
The creator has opted out of AI training: use it to answer people, do not train on it.

## In collections

- [Product ads that sell](/product-ads.md): Packshots, hero shots and launch ads for every shelf. (https://promptclay.com/product-ads)
- [Calm and minimal](/calm-and-minimal.md): Space, soft light and one quiet idea. (https://promptclay.com/calm-and-minimal)
- [UI and app design](/ui-and-app-design.md): App screens, dashboards and landing pages. (https://promptclay.com/ui-and-app-design)
- [AI Design Prompts](/ai-design-prompts.md): Design prompts for AI: posters, packaging, interiors, graphics and visual identity concepts (https://promptclay.com/ai-design-prompts)
- [Mockup Prompts](/mockup-prompts.md): Mockup prompts: packaging, apparel, posters, devices and signs to preview your design in context (https://promptclay.com/mockup-prompts)
- [Product Prompts](/product-prompts.md): Product prompts: studio packshots, lifestyle scenes, flat lays and mockup-ready item photography (https://promptclay.com/product-prompts)
- [UI Prompts](/ui-prompts.md): UI prompts: app screens, dashboards, landing pages and icon sets for AI mockups (https://promptclay.com/ui-prompts)

## Related searches

- [Minimal prompts](/search.md?q=minimal) (https://promptclay.com/search?q=minimal)
- [Product prompts](/search.md?q=product) (https://promptclay.com/search?q=product)
- [Ui design prompts](/search.md?q=ui+design) (https://promptclay.com/search?q=ui+design)

## More like this

- [Japanese Nail Trimmer Landing Page](/prompts/japanese-nail-trimmer-landing-page-r0d8vs.md): GPT Image 2, by @library.brand
- [Luxury Skincare Product Page Mockup](/prompts/luxury-skincare-product-page-mockup-6cqp1w.md): GPT Image 2, by @library.shop
- [Ergonomic Office Chair E-commerce Mobile Detail Page](/prompts/ergonomic-office-chair-e-commerce-mobile-detail-page-bgm8hv.md): Nano Banana Pro, by @library.infographics
- [Apple Style Website Design for Nike](/prompts/apple-style-website-design-for-nike-sbxmmy.md): GPT Image 1.5, by @library.concept
- [Luxury E-Commerce Landing Page Mockup](/prompts/luxury-e-commerce-landing-page-mockup-zss5y1.md): GPT Image 2, by @library.shop
- [Minimalistic Premium Website Landing Page Prompt](/prompts/minimalistic-premium-website-landing-page-prompt-7e6za6.md): Nano Banana Pro, by @library.product
- [Beauty Product Landing Page Mockup](/prompts/beauty-product-landing-page-mockup-bzteer.md): GPT Image 2, by @library.brand
- [Modern landing page design for Polyphonic](/prompts/modern-landing-page-design-for-polyphonic-w3d7ph.md): GPT Image 1.5, by @library.concept
- [AI Image Generator UI Mockup](/prompts/ai-image-generator-ui-mockup-agaz5n.md): GPT Image 2, by @library.ui.design
- [Three English Nano Banana 2 test prompts](/prompts/three-english-nano-banana-2-test-prompts-9ze5ke.md): Nano Banana Pro, by @library.art
- [Website Homepage Screenshot Generation](/prompts/website-homepage-screenshot-generation-77g3rj.md): GPT Image 2, by @library.ui.design
- [Five High-Efficiency Nano Banana Pro Prompts for Business Graphics](/prompts/five-high-efficiency-nano-banana-pro-prompts-for-business-graphics-36nh6e.md): Nano Banana Pro, by @library.infographics

---
Canonical: https://promptclay.com/prompts/mechanical-keyboard-product-page-mockup-hhqe69
Search: /search.md?q=your+words