用途
browser-analyze 用于在生成或优化店铺页面之前，对网页进行深度分析。它适合以下场景：用户提出“remix this”“build like this”“analyze this page”等需求；用户提供竞品 URL 或参考站点；用户希望对自有页面做 CRO（转化率优化）审计；用户希望从线上站点提取设计令牌。
主要能力
该技能借助 Codex Browser 完成以下工作：
-
导航与截图：打开目标 URL，截取桌面视口整页截图，再调整为移动端（375px 宽）重新截图，并记录页面标题、meta description 及结构化数据。
-
DOM 检查：运行只读 JavaScript 提取结构数据，包括标题（h1/h2/h3）、CTA 按钮（文本、链接、类名）、图片（src、alt、宽度）、body 背景色与字体、区块数量。据此识别区块数量与标题层级、CTA 按钮（文本、颜色、相对首屏位置）、配色、字体、图片来源与 alt 文本质量、交互元素（轮播、标签页、手风琴、视频播放器）。
-
转化分析（12 项审计）：对每个维度按 0-10 评分，维度包括：首屏（CTA 是否无需滚动可见、Hero 是否吸引人）、信息匹配（标题是否与流量来源一致）、CTA 质量（是否利益驱动、对比度是否足够、是否单一主 CTA）、社会证明（星级/评价/logo 是否存在且位置合理）、信任信号（配送/退货/保证是否可见）、紧迫感/稀缺性（真实还是人为、是否适合该行业）、价格心理（锚定、分期付款、捆绑拆分）、产品定位（是否利益导向、生活方式场景、差异化）、移动 UX（48px 点击目标、16px 字体、粘性 CTA）、区块顺序（是否符合 AIDA、FAQ 是否在 CTA 之前）、页面速度（图片格式、LCP 候选、渲染阻塞）、反模式（自动播放、轮播 Hero、落地页导航、竞争性 CTA）。
-
设计令牌提取：结合视觉检查与计算样式，汇总主色、辅助色、背景色、表面色、文字色、标题字体、正文字体、圆角、间距单位。
-
输出 PAGE_ANALYSIS：输出结构化数据块，包含 source_url、page_type（pdp/landing/collection/homepage/editorial）、vertical（beauty/supplements/fashion/food/luxury/home/tech）、sections_found、design_tokens、conversion_score、strengths、weaknesses（含维度、问题、影响等级）、recommended_remix（推荐区块、策略、应避免项）。该技能只返回 PAGE_ANALYSIS_INPUT，不生成源 HTML 或页面资源。
使用方式
当任务提供参考或店铺 URL 时触发。工作流为：先导航并截图，再进行 DOM 检查，接着执行 12 项转化审计，然后提取设计令牌，最后输出 PAGE_ANALYSIS 数据块。
适用场景
- 竞品研究与参考站点分析
- 自有页面的 CRO 审计
- 从线上站点提取设计令牌
- 为后续的 analyze-page、remix 或 optimize 提供证据输入
限制
若 @Browser 不可用或未启用，需向用户索取截图或使用用户提供的视觉参考，并注明限制：无法访问 DOM、无法进行移动视口测试、无法检测交互。此时将可用证据交给 analyze-page 或 remix 处理。该技能本身不生成 HTML 或页面资源。
参考数据
资料中提供了转化基准（如 Shopify 平均 1.4%、前 20% >3.2%、前 10% >4.7%；移动端平均 1.2%、前 10% >3.9%；落地页 2026 年 3.5-5.2%）、关键乘数（粘性 CTA + 首屏 CTA +12% CVR、真实署名评价 +22% CVR、自动播放视频 -7% CVR、个性化 CTA 相比默认 +202%、速度提升 1 秒 +2% CVR）以及需检测的反模式（自动播放视频、旋转轮播、落地页导航链接、每个视口多个竞争 CTA、通用图库照片、移动端 CTA 在首屏下方且无粘性替代）。