Extract Storefront Island 是一个维护者专用工具，用于从实时网页中提取单个组件，并生成与 Lexsis 渲染器兼容的已编译布局 JSON。
用途
该技能主要用于维护者场景，包括：逆向分析竞品的 hero 区块、导航或商品卡；为已有 island 创建新的布局变体（例如新的 BuyBox 排列）；从任意网站捕捉设计灵感并转化为可复用模板；以及通过 PR 向 storefront-skills 仓库贡献新布局。
主要能力
输出格式必须严格匹配 storefront-engine/references/islands/{name}/layouts/.json 的结构，包含 id、html、css、js 四个字段。渲染器兼容规则为强制要求：所有可主题化的颜色、字体、间距必须使用 --lx- CSS 变量；已编译的 data-island 标记必须引用 47-island 目录中真实存在的 island（需读取 schema 目录，不能从文字中复制硬编码名称列表）；已编译的 data-props 必须匹配对应 island 的 schema（读取该 island 的 schema.json 获取有效属性、类型和必填字段，不得虚构属性）；动态内容使用双花括号占位符（如 {{PRODUCT_ID}}、{{HEADLINE}}、{{CTA_TEXT}}、{{IMAGE_SRC}}）；所有结构性布局使用 Tailwind CSS；响应式采用移动优先并使用 sm:、md:、lg: 断点；不引入外部 JS，交互行为仅由 island 提供。
使用方式
工作流程分五步。第一步，导航并捕获：执行 browser_navigate 到目标 URL，进行全页浏览器截图，并获取无障碍树快照。第二步，识别目标组件：根据用户指定的组件（如 hero、FAQ 区、粘性购物车栏）在 DOM 快照中定位。第三步，深度分析：分析结构（语义 HTML 元素、嵌套深度、grid/flex 布局）、样式（颜色、排版、间距、边框、阴影、动画）、响应式（移动端如何折叠堆叠）、交互部分（手风琴、轮播、弹出层、加入购物车等映射为 island）、内容槽位（区分动态与装饰性内容）。第四步，映射到 Lexsis island：对每个交互元素，从目录中找到最匹配的 island，读取其 schema.json 获取有效属性，仅使用有文档记录的属性构造有效的 data-props JSON；若无匹配 island，则使用纯 HTML 静态渲染。第五步，输出布局 JSON：id 为描述性 slug，html 为完整 section HTML（使用 --lx-* 变量、Tailwind 和 data-island 标记），css 与 js 均为空字符串。
贡献方式
提取完成后，用户可将布局作为 PR 提交至仓库路径 skills/storefront-engine/references/islands/{island-name}/layouts/{variant-slug}.json，文件名即成为生成技能使用的布局标识符。可选后续步骤是将布局提交维护者审查和 schema 验证，被接受到参考目录后，visual-page 与 generate 可以选择它；此维护者专用的已编译输出不得作为页面源使用。
适用场景与限制
适用于为 storefront-skills 仓库贡献布局、创建 island 变体、捕捉设计灵感等维护者工作。限制包括：这是维护者专用的已编译格式，代理创作页面时必须先将该标记转换为 <lx-island> 源格式再调用 lexsis_pages 的 compile 操作；html 字段包含已编译的运行时标记；必须遵守上述渲染器兼容规则，否则会产生损坏的输出。