1688 · 阿里巴巴 · 2026.06 · 牛顿 · 多平台 AI 设计系统
1688 AI 设计一致性
从基础参数、架构边界到 AI 行为，三条策略锁定多端共通底座
0
条策略 · 底座 / 骨架 / 肌肉
0
类 AI 承接框架
0×3
A2UI 表达维度
设计负责人 · 体系策略、品牌 → Token 转译、A2UI 规范
从基础参数、架构边界到 AI 行为，三条策略锁定多端共通底座，让统一不依赖人的自觉。交付物：品牌 · 框架 · A2UI。
Design strategy
多端形态可变，核心范式一致
- 01Phase 1 · 底座 Foundation
统一品牌语言
转译品牌规范为 Token 基因，统一 Logo、宣传与界面三类表达，做到一处定义、全端生效。
- 02Phase 2 · 骨架 Skeleton
收敛框架范式
抽象通用容器与排版系统，划清一致与变体的边界，统一三端框架范式。
- 03Phase 3 · 肌肉 Muscle
A2UI 与自检迭代
标准化 AI 行为为 A2UI 组件，配合硅基员工自检与数据回流，驱动体系持续迭代。
Competitor · 设计系统竞品分析
洞察：不再为每个端各写一份规范，而是写一套通用规则，「在哪个端」只是规则里的一个选项
对标 Material Design 3（Google）、OpenAI Brand、Fluent 2（Microsoft）：
01 目录组织 · 共用一份规范
Foundations / Styles / Components 三层结构，设计与工程取同一份资源。洞察：不按「PC-App」进行规范组织划分。
02 窗口断点 · 用窗口尺寸取代具体设备
Material Design 五档断点，规范只针对断点写，不针对机型写。洞察：三档紧凑 / 展开 / 宽屏，统一三端。
03 基础布局 · 基础布局收口
Feed / List-Detail / Supporting Pane 覆盖大多数场景。洞察：归并为 5 类承接画布，新页从模板构建。
04 统一骨架 · 跨端共用同一副骨架
Bars + Rails + Panes 三区恒定，断点切换只换 Pane 形态。洞察：AI Mode 用页面框架 + 对话主区 + 拓展区。
AI 产品承接框架 · 被动 / 主动 × 独立页面 / 局部嵌入
五类承接框架
- 0101 · 覆盖全页 · 范式工具
全页看板型
AI 驱动的全页面数据看板 / 模板化能力承载。整页布局由 AI 渲染，用户被动消费结构化结果。AI Mode 首页 / 经营看板、数字人、跟单汇总。
- 0202 · 覆盖全页 · 范式对话
全页对话型
对话作为主体的全页体验，用户主动发起需求，AI 执行复杂任务，多轮交互连续响应。牛顿主对话 / AI 助理、桌面端主区。
- 0303 · 覆盖局部 · 范式对话
局部推送型
业务流中弹出的局部对话 / 推荐 / 提醒。AI Bot 浮窗、消息推送、购物车商品巡检——不占据全页，但以对话方式交互。
- 0404 · 覆盖局部 · 范式工具
局部工具型
嵌入业务流的局部 AI 工具——智能补全、AI 摘要、智能筛选、一键优化。不打断用户当前任务流，被动响应操作。AI 插件（侧边助手）、AI 议价、找同款。
- 0505 · 覆盖局部 · 范式工具
全页混合型
左侧看板列表 + 右侧对话详情，01 + 02 组合承接。牛顿 AI Mode。
Foundation · 设计系统基础规则定义
先宏观后微观 · 定义间距使用梯度
Spacing 以 4 的倍数递增 · Typography 字阶与倍率定义 · Color 颜色使用。
定义 01 · 基于栅格系统定义最小原子 4px
4X 作为基础倍数。
定义 02 · 核心功能区域间距（8px 递增）
40 M · 模块间（如工作流与商品列表分隔）；32 M · 模块间（具体场景补充）。
定义 03 · 组内模块间距（4px 递增）
24 / 20 S · 组内层级（卡片内主标题一级）；16 / 12 XS · 模块 & 卡片间（卡片内主副标题二级）；8 XXS · 组内层级（同行标签、卡片内主副标题三级）；4 XXXS · 组内层级（图标与文案同行）。
字阶 · 倍率
L1 标题 24px · L2 小标题 18px · L3 小标题 16px · L4 正文 14px · L5 次级 & 辅助 14px · L6 最小字体 12px。倍率 1–1.1 适合信息密度较高的排版（通用均值 1.5）；1.7 偏向可视化卖点提炼类比例。
Current state · 国内 AI Mode 前后修改对比
突出内容，降低框架造成的干扰
01 · 01 · 视觉语言
收敛渐变色块
去除大面积紫色渐变背景，统一为白底卡片，信息纯度与可读性显著提升。
02 · 02 · 图形语言
引入点阵语汇
订单卡片与业务卡片图标采用点阵排列，把品牌基因下沉至界面层。
03 · 03 · 留白节奏
提升呼吸密度
压缩冗余装饰、放大模块间距，卡片以等距留白排列，阅读节奏更稳。
04 · 04 · 色彩基调
统一中性基调
以灰阶中性色作为通用底座，文字与界面色板独立，降低跨场景设计落地与对齐成本。
A2UI · 01 设计表达
同样的商品供货信息，按用户偏好换一种讲法
维度拆解：面向 1688 B 类采购 / 业务员用户，将「采前决策上下文」拆解为「看多少 / 怎么看 / 怎么呈现」，每维 3 个节点。
D1 信息密度 · 看多少
速览：仅核心结论与决策项，30 秒判断。标准：主结论 + 关键支撑数据，平衡呈现。全景：全量明细 + 对比 + 趋势，支持深度分析。
D2 决策侧重 · 怎么看
成本导向：突出单件成本、利润空间、降本。综合权衡：利润 + 市场 + 风险三方均衡。市场导向：突出价格带、竞品分布、行业基准。
D3 表达形式 · 怎么呈现
数据优先：结论句 + 关键数字，弱图形。图文并重：小图表 + 数字 + 文字解读组合。图形优先：主体大图，文字仅作解读补充。
Live demo · 可操作
可操作示意：三个维度切一切
用本站组件实现的 A2UI 最小可运行示意。
同一份供货信息，规范决定「看多少 / 怎么看 / 怎么呈现」。这是 A2UI 的最小可运行示意，用本站的组件实现。
防晒衣 · 冰丝防紫外线 · 义乌 XX 服饰厂
SKU 2026-0917
建议采购：利润 42%、热度 +285%、供应商 4.8 分，三项均高于基准。
Google Trends · 近 12 个月
- 利润空间
- 42%
- Google Trends
- +285%
- 供应商评分
- 4.8
- 单件成本
- ¥18.5
A2UI · 02 业务闭环
从规范到迭代，助力业务不断优化数据效果
- 01业务需求输入经 LLM 进入规范与框架
- 02用户画像数据
- 03规范与框架
- 04产品策略
- 05数据回收
- 06反馈迭代优化数据回流，驱动下一轮组装；规范越用越准，页面越选越优
