从设计稿还原网页，先定网格、尺寸和组件边界

先找重复规律，再写组件

设计稿还原不是把每块都做成绝对定位。先识别全局版心、栅格、间距阶梯、字体层级和重复组件，再处理少数例外。

标对齐线和容器

找左右边界、列宽、沟槽、满宽区域和内容最大宽度，记录在不同画板上的变化。

把涉及的文件、目录、版本、命令和实际输出写进记录；代码变化同时保留 diff 与测试结果。

建立尺寸令牌

从重复间距、圆角、边框、字体和颜色提取有限令牌，保留真实例外，不强行平均。

确认“建立尺寸令牌”已经有可回查结果，再进入“划分组件边界”；依据仍然来自猜测时，把缺口单列并停在当前步骤。

划分组件边界

有重复结构、独立状态或复用价值的区域做组件；纯布局包装保持简单。

确认“划分组件边界”已经有可回查结果，再进入“列组件状态”；依据仍然来自猜测时，把缺口单列并停在当前步骤。

列组件状态

默认、悬停、焦点、禁用、错误、空和长文本都要有稳定尺寸，不让动态内容推挤布局。

确认“列组件状态”已经有可回查结果，再进入“从外到内实现”；依据仍然来自猜测时，把缺口单列并停在当前步骤。

从外到内实现

先版心和主网格，再组件，再细节；每层完成后截图核对，避免末尾同时修全部差异。

需要修改时先限定文件和行为范围，无法说明回滚方式或影响面的动作先不执行。 完成后把证据归入“网格与组件规格表”。

组件规格应能解释所有画板

每个组件写尺寸约束、内容规则、交互状态和响应行为。只能靠页面级覆盖才能还原的部分，重新检查组件边界。