website-html-prototyper git:20260910.9f0b4b5A

Immutable. This exact content is served forever at /api/v1/blob/7f62327bc6e327d2.

---
name: website-html-prototyper
description: Build, review, and browser-test interactive website page or module HTML from a confirmed UI Architecture Map and visual direction. Use for HTML First Drafts, restrained motion implementation, full-page or module-first prototypes, rendered design review, responsive and interaction QA, page composition, and implementation handoff. Do not use for design exploration, unconfirmed visual or motion direction, content strategy, Design Systems, Elementor controls, CMS templates, or framework components.
---

# 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](references/motion-implementation-standard.md)，无已确认意图不临时添加 Reveal 或 Signature。确认的 Layer 3 需要第三方运行库时，再按条件读取 [GSAP Layer 3 Runtime](references/gsap-layer3-runtime.md)。
3. 读取 [HTML Design Review](references/html-design-review.md) 和 [Visual QA Standard](references/visual-qa-standard.md)，在真实渲染中依次检查 Full Page、Section + Neighbors、Section，并自动修正一轮明确的实现层问题。视觉判断必须给出可观察证据，不得只使用“高级感”“不好看”等结论。
4. 读取 [Browser / Implementation QA](references/browser-implementation-qa.md)，验证桌面/移动断点、溢出、真实长内容、资源、键盘与 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

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

## 交付与排除

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