用途：把 Figma 画框转换为 Storefront Next 的 Page Designer 区块，使设计成为商家可在 PD 中编辑的组件。每个视觉分区（如 hero、feature strip、product row）生成独立组件，各自拥有文件、typeId 与装饰器。
前提：需在 AI 工具中配置 Figma MCP 服务器（否则只能作为手动清单）；可选配置浏览器 MCP（Playwright 等）用于视觉校验；需有 Storefront Next 项目与 sfnext CLI（pnpm sfnext …）；如需克隆/推送需 gh CLI 已认证；Figma URL 必须含 node-id。
使用方式：以 /figma-to-sfnext-pagedesigner 调用。先读取 PAGE-DESIGNER-SFN.md、figma-design-to-code 技能、src/theme/tokens/brand.css 并扫描 src/components/。Phase 1 识别分区并列出可编辑字段与默认值，同时比对品牌令牌生成 token diff 表，必须等待用户确认后才写代码；Phase 2 添加 PD 装饰器元数据类；Phase 3 注册；Phase 4 提交；Phase 5 可选视觉校验。
字段类型推断：*Url/*Link/*Href→url，Image/Img/Src/Photo→image，is/show/has/enable→boolean，Count/Num/max/min→integer，长文本→markup，商品→product，分类→category，其余→string。image、url、product、category 不设默认值。
商品数据：含商品卡片的分区需标记 needs_server_loader，添加 product 类型属性，loader 必须是可调用函数（export async function loader），多商品用 Promise.all 并行获取，并提供 fallback 骨架。注意导出非可调用对象会导致 loader 静默失效。
限制：不适用于仅需 React/Tailwind 代码（用 figma-design-to-code）或 SFRA/ISML 项目；Figma URL 缺 node-id 时应停止并请用户重新复制链接，不得猜测。