用途:针对网站复刻流水线中的某一个区块(section),让复刻版的该区块与源站对应区块达到视觉一致。确定性代码已生成大致结构,本技能负责补齐其无法闭合的视觉差距。工作方式不是一次生成,而是“应用→渲染→对比两张图→列出差异→修复→再渲染→再看”的目视循环。
输入:编排器给出 outputDir、studioSitePath、themeSlug、页面 slug 与 sourceUrl、以及区块索引 i 和预览 URL。其余数据自行读取:sections/<slug>.json 的 SectionSpec(背景色/渐变、内边距、gap、容器宽度、列数、fullBleed、标题与正文字号/行高/字体、按钮、图片、textAlign、mediaLayout、styledHtml 等)、design-foundation.json 语义令牌、theme.json 注册的字体与调色板、源区块截图、asset-triage.json(装饰项需以结构化方式还原,不重新加图也不视为差异)。styledHtml 是保真判据,缺失值从其中读取,不要猜。
用法:把采集值映射到核心区块属性,如 fontSize、lineHeight、padding、blockGap、backgroundColor、align:full(fullBleed)等;封面图焦点写在 img 的 object-position 内联样式上。需维护一个精修报告文件 <outputDir>/refine/<slug>/<sectionIndex>.json,原子写入,分三阶段:诊断(只记录不修改)、修复(目视循环)、记账(每个发现只能落入 applied 或 skipped)。改完后更新 post_content 并镜像到主题 patterns 与已安装副本,再刷新缓存。
对比要求:先读源整页截图的真实宽度(常为约 1008px 而非 1440),据 spec 的 top+height 裁剪出该区块;把浏览器视口设为同一宽度后截图并裁剪,两张图一起查看。
限制:仅用核心区块属性,避免被规范化剥离的内联样式;优先复用已有区块样式变体,不得重声明或虚构 is-style 类;不得隐藏源站可见内容来优化差异分;某修复若让编辑器端或其它区块退化则回退;修复顺序为内容→语义→宏观布局→响应式→编辑器漂移→尺寸→细节;最终状态区分 MATCHED 与 RESIDUAL,未在最后一轮目视两图不得报 MATCHED。所有值须来自该区块采集数据,不得硬编码具体站点的颜色、字体、文件名或区块顺序。资料未提供具体站点或数据示例。