Website HTML Prototyper

把已确认的视觉设计包与 Motion Contract 转化为可浏览、可审查、可交给下游的交互 HTML 设计稿。本 Skill 实现设计，不重新决定设计或动效目的。

输入门禁

• 完整页面必须具有已确认的 Page Content、Design System、Page UI Architecture Map，以及覆盖全部 Section 的 Structure Approved Segment Set；受影响 Section 可由已确认 Section Correction 覆盖。AI Overview 或 Composite Preview 均不是门禁。方向未确认时返回 website-ui-architect。
• 单模块必须有完整 Module Design Solution，以及已确认方向图或无歧义的强参考。仅有截图/Figma 但内容任务不清时返回 website-page-content-architect；任务清楚但方向未确认时返回 website-ui-architect。
• Design System 缺失或冲突时返回 website-design-system-architect。
• New Site / Rebuild 继承 Motion Foundation；只有用户确认采用显式 Layer 2/3 时 Map 才需要 Page Motion Budget 与对应 Section Motion Intent。没有 Motion 字段不阻塞，默认只实现基础 Hover、Focus 和必要状态。
• Canonical Module Slug 由 website-ui-architect 在视觉确认后生成，本 Skill 原样继承，不擅自重命名。

输入权威

决策	权威来源
业务事实与文案	Page Content
颜色、字体、间距、组件基线	Design System
结构、主次、证据归属、媒体和响应式叙事	Architecture Map
明确的实现修正	visual-direction-notes.md
当前 Section 的已确认局部修正	Section Correction
局部构图、密度和视觉重量	Segment
整页 Surface、顺序和节奏	Architecture Map + 相邻 Segment
跨页面 Motion Level 与 Token	Design System Motion Foundation
页面 Motion Budget 与 Section 动效目的	Architecture Map Motion Intent

• Section Correction 只在标明的 Section 范围内优先于基础 Segment；不得扩散到相邻模块。
• 方向图与 Architecture Map 冲突时以 Map 为准；只有明确 Correction Notes 可覆盖方向图中的已知偏差。可选 Composite Preview 只用于浏览，不作为实现权威。
• 可访问性与硬约束高于所有视觉参考。
• 不直接读取或研究原始品牌案例、第三方 DESIGN.md 或 Visual Reference Brief 来新增设计决策。参考原则必须先由 Page Content、Design System 或 UI Architecture 吸收并经过各自门禁，之后本 Skill 才按上表实现。

唯一流程

1. 执行输入门禁，确认整页或单模块路径、最终源文件、Section 边界和 Canonical Module Slug。
2. 按输入权威顺序编写真实内容的 HTML First Draft。默认使用原生 HTML/CSS/按需 JS，CSS/JS 内嵌在单一 HTML 文件；用户明确指定技术时才调整。有 Motion Intent 时读取 Motion Implementation Standard，无已确认意图不临时添加 Reveal 或 Signature。确认的 Layer 3 需要第三方运行库时，再按条件读取 GSAP Layer 3 Runtime。
3. 读取 HTML Design Review 和 Visual QA Standard，在真实渲染中依次检查 Full Page、Section + Neighbors、Section，并自动修正一轮明确的实现层问题。视觉判断必须给出可观察证据，不得只使用“高级感”“不好看”等结论。
4. 读取 Browser / Implementation QA，验证桌面/移动断点、溢出、真实长内容、资源、键盘与 Focus、交互、Motion/静态 fallback、reduced motion 和基础兼容。
5. 用户确认 HTML 后，交付最终实现源、Section 边界、Slug 和简短 QA 结论。原始目标包含 Elementor Widget 时，在同一任务中继续采用 elementor-widget-pipeline。

问题边界

• A 类：Section Job、信息主次、证据归属、核心构图、媒体契约、Motion Purpose、Layer、Signature 或移动端动态叙事需要变更。停止重新设计，返回 website-ui-architect。
• B 类：真实文案适配、尺寸、间距、换行、对齐、精确裁切、断点、timing、位移、Observer、视频暂停、Focus 或性能实现。在 HTML 内修正。
• C 类：不影响任务、可读性、交互或响应式的轻微差异。不阻塞交付。
• D 类：颜色角色、Surface、排版、间距尺度或共享组件规则在真实页面中系统性失效。保留渲染证据并返回 website-design-system-architect 受控更新 Active Baseline；更新后重新验证受影响页面。单页例外不得升级为 D 类。

路径与 References

• 整页优先或逐模块拼接时读取 整页拼接。
• 实现任何 Layer 2 / Layer 3、自动媒体或复杂状态交互时读取 Motion Implementation Standard。
• 只有确认的 Layer 3 明确选择 GSAP 后才读取 GSAP Layer 3 Runtime；普通页面和原生动效不加载该 Reference，也不产生 Runtime 字段。
• 默认只维护 设计稿/pages/<page-slug>.html 或当前 设计稿/modules/<module-slug>.html，不同时制造多个真相源。
• 只有用户明确要求、需跨会话交接或 DOM/交互必须锁定时，才读取 可选原型交接。
• 需验证路由、输入权威或质量行为时读取 行为用例。

交付与排除

• 默认不生成独立 QA 报告或平台交付契约；只报告阻塞问题、已修正的主要问题和最终验证结果。
• 不重新规划内容、Design System、Module Design Solution 或视觉方向。
• 不规划 Elementor Controls，不编写 WordPress/PHP、React 组件、Shopify Section 或 CMS 模板；这些交给对应实现 Skill。