---
name: lab-vibe-page
description: 按一篇讲 Vibe 知识视频的文章（含提示词长图与皮肤模板总览）复刻出网页版分幕动画；可换指定配色，并把成品上架到 /lab/#skills。触发词：按这篇文章复刻出来 / 用这个配色换掉刚那个页面。
---

# lab-vibe-page

一条页面从「看到别人的成片方法」到「按指定配色复刻并上架」的固定流程。本条产出：`/lab/skills/hy4/`（Vibe 复刻 · 用 Hy4 做一条知识视频）。

## 触发词

- 「按他说的来给我做一条」「按这篇文章复刻出来」
- 「用 <截图> 的配色来做」「给我换了刚那个页面」
- 「形成一个页面，介绍 <模型> 以及这篇里的 skills，链接到 /lab#skills」

## 输入

| 项 | 要求 |
|---|---|
| 文章 URL | 抓正文 + 全部配图；长图要裁切放大读提示词与表格，不能只靠正文转述 |
| 配色截图 | 用取色工具读主色 / 底色 / 强调色 HEX，不要凭肉眼猜 |
| 上架位置 | /lab 首页 skills 面板卡片 + /lab/skills 实验索引条目 |
| 旧版 | 覆盖前先备份，保证能回滚 |

## 执行逻辑

1. 抓文章正文与配图，识别出可复刻的**结构化资产**（提示词模板的变量表、规格、约束；皮肤总览的名称与分类）。
2. 从配色截图取样 HEX，作为默认皮肤；原模板配色保留为可切换皮肤之一。
3. 生成**全内联单文件 HTML**：16:9 舞台、分幕自动播放、纯字幕底部安全带、每幕一个持续演化的 SVG 信息图形、缓入缓出、全片仅 1 次白闪、皮肤切换、可选节拍（默认关）。
4. 页面同时给出可复制的提示词、变量表、关键约束、模型与 skills 介绍、来源与边界说明；每条标「原文 / 复刻改写 / 本页推断」。
5. 本地校验：抽内联 JS `node --check`；起本地 HTTP，用无头浏览器点一遍播放、跳幕、皮肤切换、复制，要求零 console 错误、零外部请求。
6. **替换**（不是新增）已有的 /lab 卡片与索引条目文案，页面顶部与页脚保留 `/lab/#skills` 回链。
7. SSH 先备份再原子替换，chown/chmod，线上验证 200、锚点、首卡与交互。

## 数据规模（本条实测）

- 9 幕演示分镜（原文 133 秒 / 约 27 单元）、12 个提示词变量、10 套皮肤 A–J + 1 套指定配色 W
- 9 个 SVG 信息图形、4 步操作路径、2 个上游 skill、5 条 FAQ、1 个单文件
- 配色取样：#0CC8A4 主 / #0078D4 强调 / #141C1A 信息 / #F1FBF7 底色 / #FAF9F5 页面底

## 验收清单

- [ ] 默认皮肤确实用了指定截图配色，原模板配色仍可切换查看
- [ ] 每条事实标清是原文、复刻改写还是推断；流量与跑分数据标「文章转述，未核实」
- [ ] 无音频自动播放；节拍开关默认关
- [ ] 页面零外部请求；只有点外链才跳出去
- [ ] `/lab/#skills` 首卡指向本页，本页能走回去
- [ ] 卡片与索引文案跟新版内容一致，不残留上一版描述

## 端到端测试结果

本条：内联 JS `node --check` 通过；本地 9 幕播放 / 跳幕 / 皮肤切换 / 提示词复制零错误零外链请求；线上 4 个 URL 200，`/lab/#skills` 锚点生效、首卡 href 正确，线上交互零 console 错误。

## 边界

不复刻成片文件、不臆造文章里以图片给出的安装命令、不把文章转述的流量与跑分当已核实事实；参考文章只借方法与结构，文案独立整理并注明出处。