咱们的 UI 风格组件库
把之前收集的 UI / 交互风格都实现一遍放在这里：同一组核心组件（按钮、输入、开关、徽章、数据卡、计数页签、表格、通知、迷你仪表盘），换上不同风格的设计语言渲染，方便横向对比、挑了就能往项目里套。每区都标了来源与风格要点，全部是 CSS/JS 风格复刻，不是原库代码搬运。
FlowAI 浅色 SaaS 风
浅灰底 + 白卡大圆角，轻阴影配 1px 浅灰边；正文全灰阶，彩色只给状态点、胶囊标签和图标底（浅底深字）。主角是右侧通知面板：计数页签、搜索、Mark all read 都是真交互。
Welcome Back, Jane!
Automate tasks using AI in minutes. No code required.
| Run ID | Workflow | Trigger | Runs | Success |
|---|---|---|---|---|
| #8421 | ✉ Email Support Router | Webhook | 3,204 | 99.1% |
| #8420 | ◎ Lead Scoring Pipeline | Schedule | 1,876 | 97.4% |
| #8419 | 💬 Slack Digest Reporter | Schedule | 942 | 88.0% |
| #8418 | 🐦 Twitter Brand Monitor | Stream | 5,411 | 98.8% |
CloseCRM 数据表格
与 FlowAI 同属浅色 SaaS 家族，差别在侧栏选中态：这里是黑色高亮（FlowAI 区是浅灰选中），正好对照。表格的 Probability 按高低着色、Status 用胶囊、顶部紫色 Create 主按钮。
| Company | Deal Value | Deals Created | Deals Won | Probability | Status | Owner |
|---|
审批流 · B2B SaaS
同属浅色 SaaS 家族，但更 B2B 企业级：信息更密、蓝色主按钮。核心是一套「审批」组合组件——请求列表（计数页签随数据变）+ 详情面板（倒计时真在走、权限变更清单、风险信号、审批人进度），Approve / Deny 点了立刻改状态。
Looseleaf · 纸上笔记本
纸张纹理 + 手绘钢笔线条 + 胶带贴纸，像把界面画在活页纸上：边框是不规则的手绘抖动线，卡片微微旋转，重点用荧光笔和胶带「贴」出来。
Sketchbook UI · 草图线框
同是手绘，和 Looseleaf 的区别在气质：那边是「贴在笔记本上的成品」，这边是「铅笔打草稿的线框」——方格纸底、石墨灰单色、双线描边、斜线阴影，像产品经理白板上的 wireframe 活了过来。
ExpoKit · 液态玻璃
液态玻璃：毛玻璃透光、高光描边、轻微 3D 悬浮感，移动端气质。玻璃必须放在有颜色的背景上才成立——注意卡片边缘那道高光和背景透过来的色。
goopUI · 液体物理
液体物理：滴落、拉伸、融合。下面的开关、加载点和按钮都用了 SVG gooey 滤镜——两个圆靠近时会像水滴一样「黏」成一团，而不是生硬地重叠。
Rare UI · 稀有动画单品
卖点是「别处没有的动画单品」：渐变流光描边、磁吸光泽、形态变换。组件本身克制，把惊艳留给动效那一瞬。
描边是一圈流动的极光渐变，一直在转。
圆 → 方 → 三角，border-radius 形变循环。
beUI · 弹性动画组件
和 Rare 的区别：Rare 是「单品奇观」，beUI 是「全员弹跳」——每个组件都带弹簧物理的入场、悬停和状态切换，整个界面像有心跳。点一点下面的东西感受回弹。
AffectUI · AI 产品风
专为 AI 产品：Agent 状态可观测是主角——运行状态脉冲、Token 用量、实时日志流、对话气泡。深色控制台气质，和前面所有浅色风格拉开距离。
Detent · shadcn 系高级风
「让产品看起来贵」：克制到近乎吝啬的用色、精密的 1px 边框、多层微阴影、小圆角。没有一处多余装饰，完成度全在毫米级的间距与对齐上。
Astryx · Meta 设计系统风
正统设计系统气质：规范的 4/8 间距、清晰的类型层级、组件状态一应俱全（默认/悬停/按下/禁用都定义过）。不炫技，可预测——大厂系统的价值就在这份无聊里。
| Design tokens | Active | v3.2 |
| Component audit | Active | v1.8 |
| Legacy theme | Archived | v0.9 |
| Old icon set | Archived | v0.4 |
交互动效区 · Motion
风格之外，动效是另一套语言：Motion Prompt 管「效果叫什么、长什么样」，Emil 的规矩管「该不该动、参数怎么定」。下面每个格子都标了编号，挑中了报编号就能复刻到项目里。
首屏加载从 3.2s 压到 1s 以内，靠的是离线包。
transform-origin 对准按钮