# 直播饰品选品系统 UI/UX Pro Max 设计系统

## Product DNA

本系统不是通用后台，而是直播饰品买手的 SaaS 工作台。核心任务是把淘宝、小红书竞品线索和 1688 货源放到同一张决策画布里，帮助内部或付费买手快速判断“能不能直播卖、值不值得拿样、供应商是否可靠、利润是否可跑”。

产品气质：精明、明亮、带一点东方饰品感、信息密度高、操作直接。界面要像买手工作室的选品台，而不是灰暗开发后台。

## Reference Match

- Airtable：结构化表格、批量选择、视图切换。
- Shopify Admin：商品和订单式运营节奏，操作清楚。
- Notion Database：轻量数据卡片、筛选和状态管理。
- Linear：清晰任务流、紧凑列表和高对比状态。
- Apple Store Online：克制的高级感、图片优先、留白有节奏。

## Tokens

### Color

- `bg`: 纸白到浅玉绿，承载长时间工作。
- `surface`: 温润白、浅米白，用于面板和卡片。
- `primary`: 翡翠绿，用于主操作、当前状态、关键路径。
- `accent`: 黄铜金，用于利润、跑量、积分和高价值提示。
- `danger`: 朱砂红，用于风险、删除、停用。
- `info`: 松石青，用于采集、插件、链接状态。
- `text`: 墨黑棕，避免冷灰后台感。
- `muted`: 低饱和绿灰，用于辅助文字。

### Typography

- 标题：系统中文宋体序列，形成饰品/买手感。
- 正文：系统中文黑体序列，保证密集数据可读。
- 数字：衬线数字，用于价格、积分、评分和 KPI。
- 字号：12 / 13 / 14 / 16 / 20 / 28 / 36，按钮和表单最低 14。

### Layout

- 桌面：左侧固定业务流程导航，右侧为顶部任务状态、KPI、工作台、筛选台、数据列表。
- 移动端：顶部轻量搜索和操作，底部 6 个一级入口，筛选进入底部弹层。
- 页面宽度：桌面内容保持可扫描，不做满屏灰表格；列表卡片使用稳定网格。
- 间距：4/8px 节奏，核心面板 12-20px，触控目标不小于 44px。

## Components

- Sidebar：以业务流程分组，不以技术模块分组。当前项要有清楚指示。
- Topbar：展示当前账号、导出、刷新和产品定位，不抢主任务。
- Module Hero：每个核心模块第一屏说明此页的决策用途和主动作。
- Filter Bench：筛选状态必须可见，包括当前结果数量和已启用筛选。
- Item Card：图片优先，价格、利润、风险、赛道和状态必须同屏可见。
- Bulk Toolbar：只在已选中时出现，批量清理和改状态要比普通操作更醒目。
- Admin Center：管理员统计、兑换码、用户管理分区清楚，危险动作空间隔离。
- Plugin Settings：服务地址、Token 列表、复制配置和积分说明统一放在插件页。

## Motion And States

- Hover/pressed：轻微上移或色层变化，150-220ms。
- Focus：保留 3px 高可见 focus ring。
- Disabled：降低透明度并禁用鼠标手势。
- Dialog：使用强遮罩和清晰关闭入口。
- Reduced motion：禁用非必要动画和 transform。

## Anti Patterns

- 不做灰暗后台模板。
- 不用一整套单色绿色。
- 不用大面积紫蓝渐变。
- 不让首页第一屏空旷。
- 不用 emoji 作为结构图标。
- 不让登录和注册同时出现。
- 不把插件 Token 和系统地址长期暴露在插件外层。
- 不让移动端出现横向滚动或底部栏遮挡内容。