V8 设计语言复刻器（v8-design-replicator）

> 数据来源：v8.quantv.com/canvas 真实 CSS（index-Dg20yPkT.css 提取）
> 深色变体来源：V8 原站 playwright 1440×900 实测（computed style 逐值抓取）+ 旗舰交付案例落地验证（已验收）
> 原则来源：anthropic-frontend-design（克制、签名元素、token 系统）
> 用途：所有「V8 风格」页面复刻必须走本 skill，禁止凭印象乱做

〇、双模式选用规则

选用原则：拿不准时用深色；目标页明确要浅色才用浅色。两种模式结构语言相同（胶囊 CTA / 跑马灯 / 编号签名），只换 token 值，不换结构。

一、设计 Token（V8 真实值 · 双模式）

1.1 深色变体（默认 · 实测固化）

> 来源：V8 原站 playwright 1440×900 实测（§2 实测值）+ 旗舰交付落地验证。以下全部值均为实测值，非推测值。

颜色

字体 / 间距 / 圆角 / 阴影 / 动效（深色实测）

1.2 浅色变体（可选 · 非默认）

> 来源：设计值（未做原站实测）。仅当目标页明确要求浅色时使用；结构与深色完全一致，只换 token 值。

品牌映射规则：accent 可替换为品牌强调色（如金色 #d9a400 或任意品牌青），但深色底/白字/胶囊/跑马灯结构必须保持 V8 原值——结构语言不换，只换 accent。浅色变体同理：只换 accent，不换结构。

字体（两模式共用）

• 正文：系统中文栈（-apple-system, PingFang SC, Microsoft YaHei, sans-serif）
• 数字/编号/端口：等宽（ui-monospace, SF Mono, Menlo, Consolas, monospace）
• 字号阶梯：10/11（标签）· 12.5-13（正文弱）· 14（正文）· 15-16（卡片标题）· 18-20（区块标题）· 26-44（Hero 标题，clamp 响应式）

二、组件规范（含内联模板，直接复制）

> 模板均以 CSS 变量引用 §六 :root，复制组件时连同 §六 骨架一起用。深色模板 = 旗舰交付实测实现；浅色变体 = 同一套组件结构 + §1.2 :root 值，不另写 CSS。

1. 导航（Nav）

模板 A · 深色（V8 原站 nav 实测）

<nav class="nav">
  <span class="nav-brand">产品名 <span class="sep">·</span> 一句话定位</span>
  <div class="nav-links">
    <a class="ghost" href="#services">开始使用 →</a>
  </div>
</nav>

.nav{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h,64px);display:flex;align-items:center;justify-content:space-between;padding:0 6vw;background:transparent;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.nav-brand{font-size:16px;font-weight:400;color:var(--text-nav);letter-spacing:.02em;white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:22px}
.ghost{display:inline-flex;align-items:center;height:31.5px;background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-border);border-radius:7px;padding:5px 16px;font-size:13px;font-weight:600;line-height:1;cursor:pointer;font-family:inherit;transition:background .2s var(--ease),border-color .2s var(--ease)}
.ghost:hover{background:rgba(18,216,241,.18);border-color:var(--accent)}

变体 B——logo 渐变块 + 双语 tag，适合品牌/团队主题：

.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;gap:12px;padding:16px 28px;background:linear-gradient(rgba(7,9,15,.7),transparent)}
.nav .logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;font-size:17px}
.nav b{font-size:15px;letter-spacing:.02em}
.nav .tag{font-size:10px;letter-spacing:.24em;color:var(--text-faint)}

2. Hero

深色模板——三层背景：视频 → 四段遮罩 → 双光晕

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

.hero{position:relative;min-height:0;overflow:hidden;background:var(--bg-hero)}
.bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s ease}
.bg-video.active{opacity:.55}
.hero-overlay{position:absolute;inset:0;background:var(--overlay)}
.hero-glow{position:absolute;inset:0;background:radial-gradient(circle at 18% 24%,var(--glow-cyan),transparent 30%),radial-gradient(circle at 82% 18%,var(--glow-purple),transparent 28%)}
.hero-in{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:23.4px;padding:120px 24px 48px}
h1{font-size:clamp(44px,7vw,72px);font-weight:700;letter-spacing:-.03em;line-height:1.04;color:var(--text-1)}
h1 .grad{background:var(--grad-word);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;padding:0 .06em}
.sub{font-size:clamp(20px,2vw,24px);font-weight:400;line-height:1.45;color:var(--text-2)}

可选元素——eyebrow 眉题 + 大数字统计行：

.eyebrow{font-size:11px;letter-spacing:.34em;color:var(--text-faint);font-weight:600;margin-bottom:26px}
.stats{display:flex;gap:44px;margin-top:32px}
.stats b{display:block;font-size:30px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stats span{font-size:12px;color:var(--text-faint);letter-spacing:.1em}

3. 胶囊 CTA

深色模板

.cta-pill{display:inline-block;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.65);color:var(--text-1);border-radius:9999px;padding:11px 54px;font-size:19.6px;font-weight:600;font-family:inherit;cursor:pointer;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:background .2s var(--ease),transform .2s var(--ease)}
.cta-pill:hover{background:rgba(255,255,255,.24);transform:translateY(-3px)}

4. 跑马灯 + 跑马灯卡

深色模板——mask 3%/97% · gap 20px · 118.4s · 双份无缝

<div class="mq-mask"><div class="mq-track" id="mq"></div></div>
<div class="mq-mask" style="margin-top:14px"><div class="mq-track rev" id="mq2"></div></div>

.mq-mask{overflow:hidden;mask-image:linear-gradient(90deg,transparent 0%,#000 3%,#000 97%,transparent 100%);-webkit-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;will-change:transform}
.mq-track:hover{animation-play-state:paused}
.mq-track.rev{animation-direction:reverse;animation-duration:calc(118.4s*1.25)}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mcell{width:240px;flex-shrink:0;background:var(--glass-card);border:1px solid var(--glass-border);border-radius:22px;overflow:hidden;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 12px 40px rgba(0,0,0,.22);transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.mcell:hover{transform:translateY(-3px);box-shadow:0 14px 44px rgba(0,0,0,.34);border-color:rgba(255,255,255,.28)}
.mcover{height:148px;display:flex;align-items:center;justify-content:center;font-size:56px;border-radius:21px 21px 0 0}
.minfo{display:flex;align-items:baseline;gap:10px;padding:14px 16px 16px}
.mport{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.16em;color:var(--accent)}
.mname{font-size:13px;font-weight:500;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

JS（内容双份实现无缝循环）：

function mcellHTML(s){return '<a class="mcell" href="'+s.url+'" target="_blank" rel="noopener"><div class="mcover"><span>'+s.icon+'</span></div><div class="minfo"><span class="mport">'+s.port+'</span><span class="mname">'+s.name+'</span></div></a>';}
document.getElementById("mq").innerHTML = DATA.map(mcellHTML).join("") + DATA.map(mcellHTML).join("");

编号卡变体——NO. 编号签名，适合编号体系（工号/产品编号/端口编号）：

.mcell{width:238px;flex-shrink:0;background:rgba(19,20,26,.85);border:1px solid var(--border);border-radius:16px;padding:16px;backdrop-filter:blur(8px);transition:border-color .2s,transform .2s}
.mcell:hover{border-color:rgba(18,216,241,.5);transform:translateY(-3px)}
.mcell .no{font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:10.5px;letter-spacing:.16em;color:var(--accent);font-weight:700}
.mcell .id{font-size:34px;font-weight:800;margin-top:6px;line-height:1}
.mcell .nm{font-size:15px;font-weight:700;margin-top:8px;display:flex;align-items:center;gap:8px}
.mcell .nm .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.mcell .fn{font-size:11.5px;color:var(--text-faint);margin-top:6px;line-height:1.6}
.mcell .dept{font-size:10px;letter-spacing:.14em;color:var(--text-2);margin-top:8px}

5. 服务卡网格 + 编号幽灵徽章（签名元素）

深色模板——编号徽章 = 全页唯一签名记忆点

<a class="gcard" href="#target-url" target="_blank" rel="noopener">
  <span class="badge">NO.001</span>
  <div class="gname"><span class="gic">🚀</span><b>产品名称</b></div>
  <p class="gdesc">一句话描述。</p>
  <div class="gtags"><span class="gtag">标签1</span><span class="gtag">标签2</span></div>
</a>

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.gcard{display:flex;flex-direction:column;gap:10px;background:var(--glass-card);border:1px solid var(--glass-border);border-radius:22px;padding:18px 20px;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 12px 40px rgba(0,0,0,.22);transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.gcard:hover{transform:translateY(-3px);box-shadow:0 14px 44px rgba(0,0,0,.34);border-color:rgba(255,255,255,.28)}
.badge{align-self:flex-start;display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-border);border-radius:7px;padding:3px 12px;line-height:1.5;transition:background .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease)}
.gcard:hover .badge,.badge:hover{background:rgba(18,216,241,.18);border-color:var(--accent);box-shadow:0 0 0 3px rgba(217,164,0,.18)}
.gname{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600;color:var(--text-1)}
.gname .gic{font-size:18px;line-height:1}
.gdesc{font-size:12.5px;line-height:1.65;color:var(--text-3)}
.gtags{display:flex;flex-wrap:wrap;gap:6px}
.gtag{font-size:11.5px;line-height:1.4;color:var(--text-3);border:1px solid var(--glass-border);border-radius:20px;padding:2px 9px}

6. 按钮（通用）

• 主按钮：实心 --text（深色）白字 / 或 accent；圆角 10-12px；hover 上浮 1px + 阴影
• 次按钮：透明底 + 1.5px 边框，hover 边框变深
• 文案用动词：「开始使用」「立即购买」「提交订单」

7. 表单

• 输入框：--surface 底 + 1.5px 边框 + 12px 圆角；focus 边框 accent
• 错误/空态：给方向不给情绪（「请填写称呼和联系方式」）

8. 状态点 / 标签

• 状态点：8px 圆点 + 3px 同色光晕（box-shadow: 0 0 0 3px rgba(色,.15)）
• 标签：10.5px + 强调色文字 + 强调色 9% 底 + 22% 描边 + 圆角 20px

三、布局规范

• 容器：max-width 1080px（内容密集页 920px）
• 栅格：网格卡片 2 列→1 列；信息层级用「eyebrow → 标题 → 描述 → 标签」固定序
• 留白：区块间 30-44px；Hero 下 24-30px
• 焦点可见：:focus-visible { outline: 2px solid accent }

四、动效规范（克制）

1. 最多两个动效系统（如：跑马灯 + hover 过渡），不堆
2. 过渡 transform .2s, box-shadow .2s，缓动 cubic-bezier(.2,.8,.3,1)
3. @media (prefers-reduced-motion: reduce) 关闭全部动画
4. 动画是签名不是装饰——每个动效要回答「为什么」
5. 深色默认动效参数：跑马灯 118.4s linear infinite（反向 1.25 倍速）、hover 暂停（§1.1）

五、复刻协议（构建前必读）

5.1 决策确认门（开工前）

• 构建前必须向用户确认 2 个决策：①深色 or 浅色变体（默认深色，见 §〇）②accent 用 V8 青 #12d8f1 or 品牌色——未经确认不得开工
• 用户未回复时，默认深色 + 品牌 accent，并在交付时标注「默认值，可调」

5.2 token 提取确认门（提取后 · 防自动执行）

token 提取完成后，禁止直接进入实施。 必须：

1. 输出 [REVIEW]：提取到的 token 表（含来源标注）+ 复刻方案（模式 / accent / 签名元素 / 布局要点）
2. 等用户批复（确认词：「确认 / 继续 / 执行 / 就这样 / OK」）
3. 收到批复 → 才进入实施；用户修改/否决 → 按批复调整后重新输出 [REVIEW]

> 违规示例：提取完 token 直接开写页面 = 把中间步骤当最终交付。中间产物必须经用户批复才能进入下一步。

5.3 执行流程

1. 先提取目标页 token（底/accent/灰阶/边框），再动手——不凭印象；提取失败走 §5.4 fallback
2. token 系统先行：CSS 变量定义全部设计值，组件只用变量
3. 签名元素：每页一个记住的点（编号墙/跑马灯/大数字/编号徽章），其余克制
4. 不套 AI 模板三件套：奶油底+衬线+陶土色 / 近黑底+荧光绿 / 报纸密排——V8 语言本身就是对模板的背离
5. 构建后自检清单：
   - [ ] 桌面+手机（390px）截图，无横向溢出
   - [ ] 0 JS 错误
   - [ ] prefers-reduced-motion 生效
   - [ ] 焦点可见
   - [ ] 中文无乱码/截断
   - [ ] 数据真实性：演示内容标注，不冒充

5.4 token 提取失败 fallback 协议

触发条件：目标页不可访问 / 反爬拦截 / 超时 / 渲染失败（抓不到真实 CSS）。

降级流程：
1. 重试 1 次（换 UA / 等待 5s / 换无头参数）；仍失败 → 进入降级
2. 回退使用本 skill 内置实测 token：深色用 §1.1（已实测），浅色用 §1.2
3. 交付报告必须显式标注：「token 为内置回退值 · 未实测验证」
4. 输出 [REVIEW] 等用户拍板，三选一：
- ① 接受内置回退值继续（标注保留）
- ② 用户提供原站截图 / HTML / CSS 文件 → 基于材料重提 token
- ③ 放弃复刻

禁止：凭印象编造新 token；把回退值混入实测值不标注；跳过 §5.2 [REVIEW] 直接实施。

六、代码骨架（直接复用 · 深色默认）

> 深色 :root 值全部来自 §1.1（实测值）。组件 CSS 见 §二 内联模板。

<style>
:root{
  /* —— 颜色（§1.1）—— */
  --bg-base:#07090f;
  --bg-hero:linear-gradient(135deg,#07111d 0%,#05060b 52%,#10101f 100%);
  --accent:#12d8f1; --accent-soft:rgba(18,216,241,.1); --accent-border:rgba(18,216,241,.4);
  --glow-cyan:rgba(18,216,241,.22); --glow-purple:rgba(167,139,250,.24);
  --grad-word:linear-gradient(90deg,#fcd34d,#fb7185,#a78bfa);
  --text-1:#fff; --text-2:rgba(255,255,255,.9); --text-3:rgba(255,255,255,.88); --text-nav:#e2e8f0; --text-faint:rgba(255,255,255,.5);
  --glass-card:rgba(0,0,0,.18); --glass-border:rgba(255,255,255,.14);
  --surface:#13141a; --border:rgba(255,255,255,.1); --border-strong:rgba(255,255,255,.18);
  --overlay: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%);
  --brand-gold:#d9a400;
  /* —— 字体 —— */
  --font:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,monospace;
  /* —— 间距/圆角/阴影/动效 —— */
  --nav-h:64px; --mq-gap:20px; --gap:14px; --container:1080px; --grid-min:300px;
  --radius-card:22px; --shadow-card:0 12px 40px rgba(0,0,0,.22); --pad-y:44px;
  --ease:cubic-bezier(.2,.8,.3,1); --mq-duration:118.4s;
}
/* 组件 CSS：见 §二 内联模板（.nav/.ghost/.hero/.cta-pill/.mq-*/.mcell/.grid/.gcard/.badge） */
</style>

浅色骨架（仅当目标页明确要求浅色时，整体替换 :root 值，组件结构不变）：

:root{
  --bg-base:#f7f7f6; --surface:#ffffff; --glass-card:rgba(255,255,255,.85);
  --accent:#00cae0; --accent-soft:rgba(0,202,224,.13); --accent-border:rgba(0,202,224,.4);
  --grad-word:linear-gradient(90deg,#fcd34d,#fb7185,#a78bfa);
  --text-1:#111827; --text-2:#374151; --text-3:#6b7280; --text-faint:#9ca3af; --text-nav:#111827;
  --glass-border:rgba(0,0,0,.08); --border:rgba(0,0,0,.08); --border-strong:rgba(0,0,0,.12);
  --radius-card:14px; --pad:18px 20px; --gap:14px;
  --shadow-card:0 12px 30px rgba(0,0,0,.08);
  --ease:cubic-bezier(.2,.8,.3,1);
}

七、品牌化适配原则

验收标准：桌面 + 手机双端实测 0 报错、无横向溢出；视觉与 V8 同语言、但一看就是你的品牌。

修订记录