用途
visual-page 用于把一份已批准的店面方案（page-plan.md）转化为真实页面源码及其可在浏览器中审阅的预览。它明确不负责准备最终素材、创建 Lexsis 草稿或发布。
主要能力
- 读取已批准的 page-plan.md 及其保存的 store/theme 绑定；若用户明确跳过 /plan-page，则根据简报写一份简短计划并记录跳过，绝不自动运行 /setup 或 /plan-page。
- 加载品牌设计与所选主题 CSS，必要时通过 lexsis_brand 动作刷新完整主题。
- 在自定义组合前搜索页面套件，分批（每批最多三个）获取选定的 section-template 源码。
- 使用 LX 主题 token 承载品牌值，使用 Tailwind 工具类实现响应式布局。
- 编写可读的 lexsis-source.html（带稳定 section 分隔符），这是后续技能唯一可编辑的 HTML 源码；全局 token 与页面级自定义 CSS 写入 page-theme.css，section 专属 CSS 保留在 lexsis-source.html 中对应 section 旁。
- 发现候选 islands，解析每个选定 island 的当前 schema、生命周期、原生变体、必需 props、样式部件与 headless hooks；优先使用原生变体与 schema 支持的数据部件样式，仅当原生变体无法满足已批准设计且所有必需 hooks 已实现时才使用 headless 模式。
- 以 <lx-island> 编写受支持的交互，附带 schema 有效的预览 props 与可读的 [data-lx-island-fallback] 子元素。
- 使用完整源码、page-theme.css、manifest head 与 manifest scripts 对 lexsis_pages 的 compile 动作进行干跑，修复缺失的 Tailwind 候选与所有阻塞性编译错误。
- 保存精确的编译响应及其输入哈希到 compile-artifact.json，然后运行 scripts/build_visual_preview.py <compile-artifact.json> <page-workspace>/visual-preview.html，并传入 page-theme.css 与可选的预览数据文件。
- 将返回的样式清单保存到 design.compiledStyleManifest。
- 在 390px、768px、1280px 下加载预览，确认 window.LEXSIS_PREVIEW_STATUS.state 与 data-lx-hydration-status 报告通过，并将浏览器观察到的 expected 与 hydrated 实例列表、检查时间与 bundle 哈希复制到 visual.hydrationEvidence。
使用方式
- 完成 MCP 预检；MCP 不可用意味着 BLOCKED_LEXSIS_MCP，而不是静默的静态替换。
- 读取 references/visual-layout.md 与 references/island-preview.md；若安装了完整 Lexsis 技能包，另读 storefront-engine/references/lexsis-design-capabilities.md。
- 使用已批准的 page-plan.md 与保存的 store/theme 绑定；优先使用现有 Lexsis 或 Shopify 媒体，图片缺失时从 assets/placeholders/ 复制合适的中性文件到页面工作区（占位符仅用于设计审批）。
- 加载设计系统：读取保存的品牌设计与精确选定的主题 CSS，必要时刷新主题，搜索页面套件，分批获取 section-template 源码，选择一种连贯的样式处理。
- 构建页面源码：编写 lexsis-source.html 与 page-theme.css，静态内容使用普通 HTML，发现并解析 islands，编写 <lx-island> 交互。
- 干跑编译，保存 compile-artifact.json，运行 build_visual_preview.py 生成预览。
- 在三个断点下加载预览并确认水合状态。
- 展示视觉稿路径、store/theme 名称、有序 section 列表、交互预览 islands、静态回退 islands、临时素材列表，等待视觉批准。
- 批准后，将源码、主题 CSS、页面配置、结构与编译 bundle 哈希存入 manifest；预览必须由同一 bundle 生成。
- 返回 source_html_path、page_theme_path、visual_preview_path、compile_artifact_path、已批准的 section 列表、island 预览模式、模板证据、MCP 证据与 VISUAL_APPROVED。下一个常规命令是 /asset-prep。
适用场景
适用于需要将已批准的店面方案落地为响应式、主题感知的视觉稿，并在浏览器中审阅、等待视觉批准的流程。
限制
- 不准备最终素材、不创建 Lexsis 草稿、不发布。
- MCP 不可用时为 BLOCKED_LEXSIS_MCP，不做静默静态替换。
- 预览 shell 加载 Lexsis 导出的 island 运行时但不改变正常浏览器行为；visual-stage props 应聚焦展示，本地加入购物车、结账或导航行为不被视为已认证；预览可演示选择、视频、轮播等客户端交互，但商务行为在托管草稿上测试。
- 对于无法编译或缺少安全预览数据的 island，仅可在迭代期间使用静态回退 HTML，并在 manifest 中记录 previewMode: "fallback"；必需的生产 island 处于回退模式时视觉稿不能获批。
- 绝不虚构 island 名称或 props。
- 变更后需先更新规范源码或页面主题，重新编译并重新生成预览。