V8 设计语言复刻器（免费版）

> 基于 v8.quantv.com/canvas 原站真实 CSS token（playwright 1440×900 computed style 实测）。
> 本免费版：核心深色 token + 基础复刻流程 + 3 个核心组件示例。
> 需要完整能力（双模式 / 15 组件模板直接复制 / fallback 协议 / 代码骨架 / 品牌适配）→ 升级全能版。

一、核心 Token（深色 · 实测值）

二、基础复刻流程

1. 提取目标页 token（底/accent/灰阶/边框）——不凭印象；提取失败：重试 1 次（换 UA/等待 5s），仍失败则用上表内置值并在交付标注「内置回退值 · 未实测」
2. 输出 [REVIEW]：token 表 + 复刻方案（模式 / accent / 布局要点）→ 等用户批复（「确认 / 继续 / 执行 / OK」）→ 才进入实施。禁止提取完直接开写
3. token 系统先行：CSS 变量定义全部设计值，组件只用变量
4. 签名元素：每页一个记住的点（编号徽章 / 跑马灯 / 大数字），其余克制
5. 构建后自检：桌面+手机（390px）无横向溢出 · 0 JS 错误 · prefers-reduced-motion 生效 · 焦点可见 · 中文无乱码 · 演示内容标注不冒充

三、核心组件示例

导航

.nav{position:fixed;top:0;left:0;right:0;z-index:100;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 6vw;background:transparent;backdrop-filter:blur(10px)}
.ghost{display:inline-flex;align-items:center;height:31.5px;background:rgba(18,216,241,.1);color:#12d8f1;border:1px solid rgba(18,216,241,.4);border-radius:7px;padding:5px 16px;font-size:13px;font-weight:600;cursor:pointer}

Hero（三层背景：视频→遮罩→双光晕）

<section class="hero">
  <video class="bg-video" autoplay muted loop playsinline src="bg.mp4"></video>
  <div class="hero-overlay"></div>
  <div class="hero-glow"></div>
  <h1>主标题 <span class="grad">渐变词</span></h1>
  <p class="sub">一句话副标题。</p>
  <a class="cta-pill" href="#services">开始使用</a>
</section>

.hero{position:relative;min-height:0;overflow:hidden;background:linear-gradient(135deg,#07111d 0%,#05060b 52%,#10101f 100%)}
.bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.38) 0%,rgba(0,0,0,.12) 38%,rgba(0,0,0,.55) 78%,rgba(0,0,0,.72) 100%)}
.hero-glow{position:absolute;inset:0;background:radial-gradient(circle at 18% 24%,rgba(18,216,241,.22),transparent 30%),radial-gradient(circle at 82% 18%,rgba(167,139,250,.24),transparent 28%)}
h1{font-size:clamp(44px,7vw,72px);font-weight:700;letter-spacing:-.03em;color:#fff;position:relative}
h1 .grad{background:linear-gradient(90deg,#fcd34d,#fb7185,#a78bfa);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cta-pill{display:inline-block;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.65);color:#fff;border-radius:9999px;padding:11px 54px;font-size:19.6px;font-weight:600;backdrop-filter:blur(4px);cursor:pointer}

跑马灯带

.mq-mask{overflow:hidden;mask-image:linear-gradient(90deg,transparent 0%,#000 3%,#000 97%,transparent 100%)}
.mq-track{display:flex;gap:20px;width:max-content;animation:mq 118.4s linear infinite}
.mq-track:hover{animation-play-state:paused}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mcell{width:240px;flex-shrink:0;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.14);border-radius:22px;backdrop-filter:blur(24px);box-shadow:0 12px 40px rgba(0,0,0,.22)}

JS：内容渲染两份（DATA.map(card).join("") ×2）实现无缝循环。

四、升级全能版（Pro）

全能版在免费版基础上增加：
1. 浅色变体完整 token + 双模式选用规则
2. 15 个组件模板（nav 双变体 / hero / CTA / 跑马灯 / 编号卡 / 服务卡网格 / 编号徽章 / 按钮 / 表单 / 状态点 / 标签）HTML+CSS+JS 直接复制
3. token 提取失败 fallback 协议完整版（三选一决策 + 禁止项）
4. 代码骨架（深色 + 浅色两套 :root 直接复用）
5. 品牌化适配原则（accent 映射 / 签名元素 / 状态点 / 验收标准）

修订记录