用途
该技能用于把实时网站或已保存的 HTML 快照转换为有据可依的 Next.js App Router 构建。核心原则是把源站当作证据而非灵感：源站可访问时先捕获，构建前先提取，最后用视觉 QA 产物证明重建页面与源站匹配。
适用与不适用
适用场景：输入为实时 URL、保存的快照（.html 加配套资源）、SingleFile 导出或解包的离线站点抓取；用户希望重建、重制、转换、克隆、恢复或提取站点到 Next.js；保真度比速度或创意重设计更重要；源仓库部分或完全丢失，但生产页面或浏览器产物仍存在。
不适用场景：唯一来源是单张截图、PDF 导出、Figma 设计稿或没有可访问实时路由或可解析 HTML/CSS 产物的松散设计想法；任务是一般性 Next.js UI 编码，没有重建或有据提取要求；目标是重设计、简化或同风格重写而非忠实重建。
主要能力
- 浏览器捕获：对实时源站进行桌面、平板、移动端截图及滚动切片，保留最终 DOM、脚本 URL、运行时元数据、镜像样式表和暴露的资源 URL。
- 路由清点与页面族分组：先清点路由，按页面族分组，选择规范范例，再逐族完成。
- 样式与资源提取：提取 CSS 自定义属性、@font-face、@media、@keyframes 和过渡值；字体、图片、图标等资源自托管到本地。
- 分波流水线：Capture Wave（捕获）→ Wave 0（逐页探索与去混淆）→ Wave 1（按页面族统一设计灵魂）→ Wave 2（自包含页面构建简报）→ Wave 3（Next.js 脚手架与设计系统基础）→ Wave 4（页面构建与视觉 QA 循环）。
- 验证与验收：通过 TypeScript 类型检查、生产构建、UNVERIFIED 检查、外部 URL 泄漏检查，以及 1280px、768px、375px 的整页与滚动分段视觉对比。
使用方式
根据输入情况选择起点：仅有实时 URL 时先运行 Capture Wave；存在 .html 加 _files/ 文件夹时跳过 Capture Wave，从 Wave 0 开始；仅有相邻本地 .css 时使用相邻资源快照模式；仅有内联 <style> 时使用 SingleFile 回退模式；仅有 package.json 加源码仓库时使用回退模式。若用户只要求提取、文档、设计系统或令牌，则在相应阶段停止，不强行构建。若要求重建、克隆或像素级还原，则运行完整流水线。
输出位置为 nextjs-project/ 以及捕获或快照工作根目录旁的 .design-soul/。命名规则：路由文件夹、捕获标识符、清单、资源文件夹、CSS 类和令牌名使用 kebab-case；React 组件文件和导出的组件符号使用 PascalCase。
适用场景
适合需要从现有站点或快照忠实恢复 Next.js 页面的工程任务，尤其是源仓库丢失但生产页面仍可访问的情况。也适合需要提取设计令牌、文档化设计系统，或对多路由站点进行结构化重建的场景。
限制
- 无法从像素推导精确令牌值：当存在 CSS/HTML 证据时，不应从截图推导精确令牌值。
- 无法凭空发明：每个值必须可追溯到捕获的 CSS、HTML、运行时元数据或已记录行为；无法落地的值标记为 UNVERIFIED。
- 捕获不完整时不能声称像素级还原：若核心布局、字体、资源或首屏以下证据缺失，应如实说明。
- 外部 JS（分析、聊天组件）不应盲目嵌入，需单独记录，仅在用户明确要求时重新添加。
- 字体无法恢复时需明确标记替代。
- 构建依赖集需限制在脚手架规则内，不应为便利添加 UI、图标、动画或字体包。
- 具体收费、价格、平台支持等信息暂未提供。