选号虾 · 原型组件库
所有高保真原型的起点。tokens.css 复刻 variables.scss 全集 Design Token，
components.css 封装通用控件（按钮/弹窗/Banner/进度条/Avatar/Popover…），
base.js 提供 Popover/Modal/Toast 交互底座。
<!-- 任何新原型头部按顺序引入即可 -->
<link rel="stylesheet" href="../_shared/tokens.css">
<link rel="stylesheet" href="../_shared/components.css">
<script src="../_shared/base.js"></script>
色板
OKLCH 感知均匀色阶 · 粉色 primary 仅作点缀 · Berry action 承担所有 CTA。
字体 · 字号
Inter（英文/数字）+ MiSans（中文）自动按 unicode-range 路由。
间距
4/8/12/16/24/48 六档 · 所有组件内外间距只能引用 token。
圆角
macOS 26 圆角梯度 · 小件 → 控件 → 面板 → 表面 → 胶囊。
阴影 · 材质
Liquid Glass 三层材料（轻/中/重）+ 阴影层级。
rgba(.5) + blur(12)
rgba(.72) + blur(20) + sat
rgba(.85) + blur(16)
按钮
主 CTA 用 Berry --ql-action，绝不使用粉色 primary 当 CTA。
<button class="ql-btn ql-btn--primary">联系商务</button> <button class="ql-btn ql-btn--secondary">取消</button> <button class="ql-btn ql-btn--ghost ql-btn--sm">查看详情</button>
徽章 / 身份标识
身份用 Badge，状态用颜色。VIP 自带渐变 + 白点。
<span class="ql-badge ql-badge--vip">VIP</span>
头像
两种风格：达人卡片头像（粉+灰渐变 + 粉色首字 + 抖音角标）、用户 LeftFooter 头像（粉底 + 白字）。
/* 达人头像 · 1:1 复刻 CandidateRow .cr-avatar */ <div class="cand-avatar">林</div> /* ::after 自动渲染抖音角标 */
进度条
四档状态：默认（粉） · warning（橙） · danger（红） · unlimited（VIP Berry shimmer）。
Banner
info / warning / error / success 四种语义 · 右侧可带 CTA 按钮和关闭。
卡片
默认卡片（白底 + 边框 + 阴影）· glass 变体（玻璃态）。
普通卡片适合主内容区。白底 + 1px 边框 + 24px 圆角 + 轻阴影。
Liquid Glass 变体 · 适合浮在彩色背景上的面板（sidebar/popover）。
Popover · 下拉面板
玻璃 + 重模糊 · 上下任何方向弹出都适用。通过 QL.Popover.bind() 驱动。
QL.Popover.bind( document.getElementById('trigger'), document.getElementById('popover'), { placement: 'bottom-end', offset: 8 } );
Modal · 居中弹窗
遮罩 + 玻璃弱模糊 + 弹性入场 · QL.Modal.bind() 驱动。
QL.Modal.bind(trigger, overlayEl); QL.Toast.show('成功 · 已添加', { type: 'success' });
Tag / Label
内联小标签 · 用于达人分类、条件 chip 等。
新建原型
把底座 copy 进去就行。三步完事。
# 1. 新建原型目录 mkdir docs/prototypes/my-feature cd docs/prototypes/my-feature # 2. 创建三文件（HTML + CSS + JS） touch index.html my-feature.css my-feature.js # 3. 在 index.html 头部引入底座 <link rel="stylesheet" href="../_shared/tokens.css"> <link rel="stylesheet" href="../_shared/components.css"> <link rel="stylesheet" href="./my-feature.css"> <!-- body 末尾 --> <script src="../_shared/base.js"></script> <script src="./my-feature.js"></script>