实现参考设计前先检查样本

以下示例与示意结果由本站编写，用于说明方法，不是模型实测结果。

使用场景

你要实现给定着陆页参考，教学样本可读标题“清楚交接任务”、CTA“查看示例”，左侧文字右侧对照，正文比标题小且留白明显；图片没有悬停、提交或窄屏行为。先提取实际观察，不能看一眼就写熟悉卡片模板。

具体做法

逐项记录可读文字、层级、比例、对齐、间距、颜色和组件关系，标明观察、推断与未知。根据抽取契约实现可见关系；隐藏行为从其他维护材料或必要澄清获得，不靠像素猜。渲染后在对应尺寸对照样本，补清不确定细节，但新生成方案不代替原参考证据。

反例

看一眼上述参考，改成熟悉的三张卡片。猜按钮有提交和悬停效果，字体肯定是某个具体品牌字库，不核对文字。

改进写法

先把教学参考转成观察清单：标题、CTA 原文；两列的文字/对照关系；标题大于正文；明显留白。字体身份、悬停与窄屏未知，分别核对其他资料或说明待定，不声称像素证明。按已确认关系实现，渲染后比较文字、层级与对齐；细节不清用清晰原参考补充，不用新生成图冒充原图。

为什么这样改

明确观察契约让实现偏差有具体对照，不只是“感觉像”。标记推断与未知也防止截图之外的交互被误认为设计已经规定。

如何验证

示意核对逐项比较标题、CTA、两列内容、相对字级与留白；缺文字、换成三卡片或反转视觉重点都应被发现。

看不见的悬停不能写为已匹配；实际字体与尺寸应有材料或明确选择依据。本篇不实现真实着陆页。

适用边界

栅格图只能说明可观察像素，不能证明语义 HTML、隐藏状态或精确字体。参考实现仍受可访问性和业务契约约束；来源的“再生成”适合新设计探索，不保证还原既有证据。