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