多模型接入网关
统一协议适配主流大模型与私有化推理服务，路由策略支持按成本、时延、可用区加权。新模型接入平均 0.5 人日。
时延P95 ≤ 320ms成功率99.95%
创意矩阵 · 便当盒栅格
把 AI 平台拆成可组合的能力卡片一屏读懂全链路
以 12 列栅格承载卡片式设计：模型接入、智能推荐、算力调度、可观测看板各自成卡，任意组合成业务工作台。玻璃拟态面板叠加半调网点，让科技风格在浅色底上保持克制与层次。
矩阵索引
按「数据 → 模型 → 编排 → 观测」四层归档卡片，任意卡片均可被智能推荐引擎重新排序，减少 40% 的查找点击。
6核心能力卡
等宽网格，最小宽度 240px
4响应断点
1600 / 1024 / 640 / 380
12列栅格
栅距 16px，严格对齐
0.9s首屏可交互
卡片懒加载 + 骨架占位
实用指导清单
六条可直接落地的卡片式 AI 平台规范
面向真实交付：每条都给出参数区间与避坑点，可直接写进设计评审与前端验收清单。
栅格先定 12 列，再谈卡片宽度
桌面端以 12 列、栅距 16px 起手，卡片跨列取值只用 3/4/6/12。避免 minmax(320px,1fr) 这类固定像素列，统一写 minmax(0,1fr)，否则长模型名会撑破列宽。
能力卡数量控制在 6±2
一屏超过 8 张等宽卡，用户决策耗时上升约 25%。主区只放 6 张核心能力卡，其余沉到「更多能力」抽屉，配合智能推荐按使用频次排序。
玻璃拟态只用于浮层
backdrop-filter: blur(14px) 建议仅用于 Hero 面板与弹层，且必须补 -webkit-backdrop-filter。正文卡片用实色底，避免低端设备掉帧与文字对比度不足。
强调色占比 ≤10%
中性底约 60%、主色约 30%、强调色约 10%。暖橙只出现在按钮、序号、关键数字与细线高亮上，单屏橙色面积不超过总面积的十分之一。
交互动效统一 150–450ms
hover 位移 translateY(-2~-4px)、时长 250ms、缓动 cubic-bezier(.16,1,.3,1)；标题逐行遮罩上滑 800ms 即可。开启 prefers-reduced-motion 时全部降级为静态。
图片统一 16:10 裁切防抖动
卡片图容器固定 aspect-ratio，图片一律 object-fit:cover;max-width:100% 并加 loading="lazy"。首屏主视觉可设 fetchpriority 提升优先级，避免布局跳动超过 0.1 CLS。
核心能力卡片
六张等宽卡，拼出完整的 AI 服务平台
每张卡只讲一件事，并在底部给出可验收的量化指标，方便对照排期。
智能推荐编排
依据历史调用与业务标签推荐能力卡片顺序，冷启动用规则兜底，7 天后切换为行为权重模型。
点击提升+38%冷启≤ 24h
卡片式设计系统
统一令牌：圆角 20–28px、间距 4/8pt、三级阴影。组件库与设计稿 1:1 对齐，减少还原偏差。
还原偏差< 2px组件48 个
算力与并发调度
按租户配额与优先级排队，峰值自动扩容，闲置 5 分钟回收实例，兼顾成本与稳定性。
扩容≤ 90s成本下降27%
可观测与评测看板
卡片化呈现调用量、Token 消耗、幻觉抽样与人工评分，异常指标自动置顶并联动告警。
指标项32告警延迟≤ 60s
响应式布局适配
同一套卡片在 1600 屏幕 6 列、1024 屏幕 2 列、640 以下单列堆叠，点按区始终 ≥44px。
断点4 个横向溢出0
工作流程步骤
四步把能力卡片接入业务系统
从注册到灰度上线，标准路径可在两个工作日内完成。
注册与配额申请
创建租户、绑定业务标签，提交预估 QPS 与月度 Token 额度，系统给出初始并发上限。
耗时约 30 分钟选择能力卡片
在卡片工作台勾选模型网关、推荐编排、看板等模块，生成专属编排画布与调用密钥。
可视化拖拽联调与压测
使用沙箱环境回放真实流量，重点验证 P95 时延、重试策略与降级开关是否按预期触发。
建议 3 轮压测灰度与观测
先放 5% 流量，观察 24 小时看板指标无异常后逐步放量至全量，并保留一键回滚。
回滚 ≤ 3 分钟
图文混排特写
卡片工作台在真实业务里的两种落法
场景一：智能客服对话编排
将意图识别、知识检索、回复生成拆成三张卡片串联，检索失败自动降级到人工队列。上线后首响中位数由 12 秒降至 4 秒，转人工率下降 18%。
- 4.0s首响中位数
- -18%转人工率
- 3 张能力卡片串联
场景二：内部数据问答看板
把多源数据接入、指标计算、自然语言问答封成卡片，权限随卡片继承。查询平均耗时 1.8 秒，口径争议工单减少约 60%，看板支持 90 天回溯。
- 1.8s平均查询耗时
- -60%口径争议工单
- 90 天数据回溯