跳到正文
UIGrammer
EN 中文

主题 · 电商 · 入门

电商商店

电商商店 = 带搜索与购物车的顶栏、分类胶囊、商品卡片网格,以及结尾页脚。

直达修改 Prompt

提示

让购物车数量成为唯一的饱和强调色,把视线引向转化。商品图先用安静的渐变占位,等真图到位再换。

Build a clean e-commerce storefront for a general retailer called "Bazaar". STYLE - White base, hairline #ececf0 borders, #fafbfc page tint - One accent #0071e3 used only for the cart count and links - System sans, tight 8px radii, generous whitespace LAYOUT - Top bar: "Bazaar" wordmark left, a rounded search field in the middle ("Search products…"), and a cart indicator right showing a cart icon and a count badge of 2 - A single row of category pills: All (active, filled dark), Apparel, Home, Tech - A product grid of 3 cards (responsive: 3 across on desktop): each card has an image block, a product name, a price, and a star rating - Merino Tee — $38 — ★ 4.8 - Linen Throw — $64 — ★ 4.6 - Desk Lamp — $89 — ★ 4.9 COMPONENTS - Navbar: wordmark, search input, cart badge - Category pills: one active, three inactive - Product card: image (gradient placeholder), name, price, rating - Footer: copyright line plus Help · Returns · Track order TECHNICAL - React - Tailwind CSS - shadcn/ui