用途:在该 Hydrogen + Weaverse 仓库中,把参考网站或品牌中心页重建为可维护的 Weaverse 页面,重点是可复用 section、准确的 section 匹配和清晰的 schema 边界,而不是一次性的截图克隆。若来源是 Figma 文件,应改用 figma-to-weaverse;其中的 section 匹配、manifest 和预览规则仍然适用。
优先级与冲突规则:.guides/brand-guideline.md 是唯一事实来源。来源网站在视觉上与品牌指南冲突时,必须遵循品牌指南,即使相关方要求照搬线上站点或领导会比较截图也一样。无冲突处匹配来源站点,有冲突处遵循品牌指南,不确定时默认品牌指南。
必要输入:参考 URL 或来源站点、.guides/brand-guideline.md、sections.md、app/weaverse/components.ts。必要输出:克隆预览路由 app/routes/clone-preview.$page.tsx(用户批准后才做 section 拆分)、设计规格、内容清单。
主要流程:先读品牌指南,确认 sections.md 可信;用 Firecrawl 单次抓取 markdown 与 HTML,例如 firecrawl scrape "<url>" --format markdown,html -o .firecrawl/<site>-<page>.json,JS 渲染页面可加 --wait-for 3000,必要时用 crawl 抓取子页面;提取设计 token、页面结构、内容资源与媒体来源,构建内容清单;生成单个 Hydrogen 预览路由并用注释标记各视觉区块;在用户明确回复 approved 或 proceed to sections 前不得继续。随后按 composition、布局机制、交互、内容模型的优先级与 sections.md 匹配,分类为 REUSE_EXISTING、ADAPT_EXISTING 或 CREATE_NEW_REUSABLE_SECTION,并对每个复用或适配做 schema 能力核查(宽高比、响应式图片、分栏比例、子区块类型、动画、文字可读性辅助)。新 section 需注册到 app/weaverse/components.ts,全局 token 放 app/styles/app.css,全站控件放 app/weaverse/schema.server.ts,区块局部内容放 section schema。先验证桌面与移动端,再从落地页扩展到子页面。验证完成后清理预览路由。
内容清单与限制:清单需覆盖每个视觉区块,列有区块编号、名称、媒体类型、真实图片或视频 URL、文案、链接目标、Shopify 引用与备注;URL 必须来自抓取结果,缺失须标 MISSING。预览路由使用真实资源、仓库 Tailwind 与品牌指南覆盖,不导入 Weaverse 组件,每页一个 $page 路由参数。资料未提供收费、价格、平台限制等信息。