Anker

Anker 首页以克制的黑白灰电商界面搭配沉浸式产品宣传影像。页面从紧凑的双层导航进入品牌主视觉，再延伸至分类入口、商品卡片、会员优惠和信息密集的深色页脚。

North star · Keep the interface quiet and high-contrast, using large campaign imagery to make products—not decoration—the focal point.

Anker’s visual system keeps the storefront chrome quiet so campaign imagery can carry the page. The pale #f5f5f7 canvas alternates with white and light-gray product surfaces, while black and near-black navigation, CTA buttons, and the footer establish contrast. Signal blue #00befa is used sparingly as a brand accent rather than a dominant fill. MontForAnker is used throughout in bold weights, with tight tracking on large headings and compact, readable labels. Full-bleed campaign images anchor the top of the page; lower sections shift to aligned grids of category tiles, product cards, and editorial panels. Generous section separation gives each merchandising story room, while repeated card patterns make browsing predictable. Borders are understated, corners are nearly square, and elevation is restrained, keeping attention on product photography and clear shopping actions.

配色

点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。

字体

字号阶梯：Major Third（比例约 1.257，正文 16px）。示例用免费替代字体渲染，数值为实测。

间距与布局

基准单位 4px · 密度：适中

The measured content max width is 1312px, with a comfortable density and a 12-column merchandise area. The page alternates full-bleed, single-column campaign panels with contained feature grids, category tiles, product cards, and supporting content. Hero headings are centered, while merchandising titles and card content generally align left. Sections have a measured 64px rhythm; smaller element gaps are 8px. Keep the navigation compact and allow image-led panels to span the available width.

圆角与层次

The interface is mostly flat: light surfaces, square-edged cards, and discreet hairlines do the structural work. Measured card shadows are soft and restrained rather than a pervasive effect. Dark and light campaign images create depth through their own lighting and composition; avoid adding heavy shadows or ornamental borders to reproduce that richness.

组件

下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。

Imagery · Use polished product photography and campaign scenes as the primary visual feature: chargers and power banks appear in lifestyle settings, close-up product compositions, and clean category tiles. Hero imagery spans the full content width, with concise centered copy and CTAs layered over it. Lower-page editorial panels and product cards mix lifestyle images with isolated product shots. Some imagery is dark or cinematic, but it belongs to the photography rather than defining the site-wide palette.

页面版块

共 15 个版块，按页面从上到下排列，每个都标了类型、布局和交互套路。

首页

首屏秋季优惠主视觉

Full-bleed campaign image with centered headline and supporting copy.

首屏无线充电新品

Full-width dark campaign image with centered product message.

图文交替新品与联名

Two campaign panels shown side by side.

功能网格品牌与产品亮点

Two-column feature stories with varied image-led content.

分类导航产品分类入口

Heading above a horizontal seven-column category row.

图文交替旗舰系列

Two side-by-side series panels with image, title, and link.

功能网格多场景充电

Four-column mixed-size lifestyle and product image grid.

商品网格精选热销商品

Tabbed heading above a dense horizontal product-card grid.

图文交替创新产品专题

Single full-bleed promotional image panel.

其他安心购物保障

Three-column confidence and service content area.

功能网格配送与售后服务

Three-column grid of service promises with icons.

行动号召会员招募

Wide dark image panel with copy and two actions.

图集会员专属优惠

Offer-focused horizontal visual content area.

用户评价用户评价

Horizontal review cards with customer names and product references.

内容列表博客与页脚

Editorial cards above a dense, full-width dark footer.

该做与不该做

给 AI 的提示词

想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。