用途:本技能是 design-qa 升级阶梯的 R4a,由 orchestrator 派发,用于在 R1(主题/CSS)、R2(按规范重建区块标记)、R3(重新提取规范)之后仍不一致的单个栏目。任务是用比 R2 更丰富的输入(源 HTML、渲染截图、规范)编写原生 WordPress 核心区块,忠实复现该栏目的布局与内容。不得用于发明内容、重新设计或“改进”栏目;无法达标时应如实说明并返回最佳尝试,orchestrator 会进入 R4b(确定性的样式化孤岛兜底)。
输入:SectionParity 记录(指出触发的信号,如 section-dropped、bg-color、column-flatten、media-dropped、unstyled-island 及证据样本);该栏目的源 HTML 与 styledHtml(内联计算样式快照);源与副本截图;SectionSpec(标题、正文、单元格、图片、columnCount、backgroundColor);design-foundation.json 令牌(颜色/字体/间距角色);studioSitePath 与 themeSlug,用于列出主题的 styles/blocks/*.json 变体清单。
产出:原生 WordPress 区块标记,如 core/columns + core/column 处理多列、core/group 处理背景与间距、core/heading、core/paragraph、core/image、core/buttons/core/button、core/list 等。硬约束:尺寸与样式必须能通过 @wordpress/blocks 的 serialize→parse 无损往返;使用核心区块属性和类名(align、width、style.spacing、backgroundColor/textColor 令牌 slug、layout),不得在区块包装上用内联 <figure style="..."> 或临时内联样式;映射到设计令牌时引用令牌 slug 而非原始 hex/px。样式决策遵循 skills/replicate-with-blocks/styling-priority.md 的层叠与禁用规则,仅用原生区块(core/html 孤岛除外)。
样式变体先盘点:列出 <studioSitePath>/wp-content/themes/<themeSlug>/styles/blocks/.json,若已有匹配变体则通过 is-style-<slug> 复用;不得重复声明已有 slug,也不得发明无对应文件的 is-style- 类。新变体仅限重复且可命名的场景,写入新 JSON 文件(slug 加 lib- 前缀)并在各区块加类。
内容保留:源栏目中每个标题、段落、列表项、按钮文本与图片都必须出现,不得截断、去重或丢弃。
验收门(由 orchestrator 执行,不可自评):区块解析器校验通过;序列化往返无属性/类丢失;重装重拍后五个稳健信号全部通过(栏目存在、bgDeltaE ≤ 10、列数匹配、媒体存在、非未样式化孤岛);内容覆盖率无损失。任一不通过则本次失败并回退 R4b,不得将失败重建强行判为通过。
方法:先读差异原因,再读 styledHtml 与源 HTML,将布局映射到核心区块并精确匹配列数,将颜色/字体/间距解析为设计令牌 slug,返回区块标记。保持通用,全部从本节输入推导,不得硬编码站点颜色、文件名、文案或栏目顺序。