电商零售

Neo-Brutal Market

新粗野主义 × 糖果色块的独立品牌电商

3px 黑色描边、零模糊硬投影、糖果色平涂色块：每个按钮按下时都会“压进”阴影里。旋转贴纸、倾斜标签、可筛选商品网格与会弹跳的购物车计数器，让小众品牌店铺有态度又好用。适合潮牌、文创、独立设计品牌与活动页。

Pro 会员可用 · 单独购买 ¥19 · 更新于 · Live demo

签名细节

  • 按下即“压进”阴影的按钮
  • 旋转贴纸与倾斜标签
  • 弹跳的购物车计数

页面区块

  1. 跑马灯
  2. 导航
  3. Hero 色块组
  4. 商品网格 + 筛选
  5. 宣言
  6. 订阅
  7. 页脚

色板

  • Paper #FFF4D6 — background
  • Ink #0E0E0E — text / border / shadow
  • Yellow #FFD23F — block
  • Pink #FF5FA2 — accent
  • Blue #3D6BFF — block
  • Green #2BD97C — success
  • Orange #FF8A3D — block

字体

  • Archivo Black — display
  • Space Grotesk — body
  • Space Mono — labels / prices

提示词目录

  1. Design Intent
  2. Design Tokens
  3. Typography
  4. Color & Material
  5. Layout & Grid
  6. Page Blueprint
  7. Components
  8. Motion & Interaction
  9. Responsive Behavior
  10. Accessibility
  11. Do / Don't
  12. Output Requirements

如何使用这套风格

复制提示词全文粘贴给任意 AI；或下载 Agent 技能 / Cursor 规则 / AGENTS.md；或在接入 MCP 的工具里说：“用 ui-atlas 的 neo-brutal-commerce 风格做这个页面”。

免费预览

# Neo-Brutal Market — Indie E-commerce Storefront

You are a senior designer with a punk-zine sensibility and a front-end engineer who sweats interaction details. Build the
storefront homepage for a fictional independent goods shop called **"KIOSK CLUB"** in the **Neo-Brutal Market** style
described below. Every value is a specification, not a suggestion.

## 1. Design Intent

Loud, tactile, funny — like a sticker-covered market stall printed on a risograph. Thick 3px ink outlines, flat
candy colors, and **hard offset shadows with zero blur** make every element look like a physical cut-out you can press.
The layout is bold but disciplined: a clear grid, generous gaps, and consistent 14px corners keep the chaos legible.
Products are represented by playful flat geometric "objects" built in CSS, not photos.