防晒衣 · 冰丝防紫外线 · 义乌 XX 服饰厂
SKU 2026-0917
建议采购：利润 42%、热度 +285%、供应商 4.8 分，三项均高于基准。
Google Trends · 近 12 个月
- 利润空间
- 42%
- Google Trends
- +285%
- 供应商评分
- 4.8
- 单件成本
- ¥18.5
Design System
规范和实现，是同一份代码。
01
一处定义
颜色、玻璃、字阶、圆角、曲线都在 tokens.css
02
玻璃不做滤镜的子元素
否则背后的视频会被隔断
03
内容即数据
案例是 zod 校验的数据，组件只负责呈现
Color & Glass
tokens.css · 半透明语义色，叠在视频上
- --bg
- --solid
- --surface
- --surface-2
- --surface-3
- --ink
- --ink-2
- --ink-3
- --ink-4
- --line
- --line-2
- --accent
- --glass-tint
- --glass-edge
- --glass-sheen
- --glass-glow
- --scrim
- --accent-ink
Typography
Instrument Sans + HarmonyOS Sans SC · Instrument Serif + Noto Serif SC · DM Mono
- --text-display为 AI 时代设计
- --text-3xl可信的产品，可生长的系统
- --text-2xl设计系统 & AI 设计系统
- --text-xl把一致性做成可复用的底座
- --text-lg14 年体验设计，8 年团队管理
- --text-base规范不只给人读，也给 AI 读。
- --text-smFoundations / Styles / Components
- --text-xsMONO LABEL · 0.14EM TRACKING
Spacing
4px 原子 · 与 1688 AI 体系同一逻辑
- 4
- 8
- 12
- 16
- 24
- 32
- 48
- 64
- 96
Radius & Motion
四级圆角 · 三条曲线 · 三档时长
- --radius-sm ·
- --radius ·
- --radius-lg ·
- --radius-xl ·
- ease-out · reveals
- ease-out-expo · headlines
- ease-in-out · light sweep
A2UI · 同一份信息，三种讲法
D1 信息密度看多少
D2 决策侧重怎么看
D3 表达形式怎么呈现
同一份供货信息，规范决定「看多少 / 怎么看 / 怎么呈现」。这是 A2UI 的最小可运行示意，用本站的组件实现。
AI 推荐