工作方式
智能体先从实际图像入手:尺寸、可见文案、层级、比例和素材。它也会阅读目标项目,使实现贴合现有框架和页面。裁剪过的截图只界定可见区域,不代表可以随意臆造页面的其余部分。
实现时使用真实的布局、文本和控件。匹配参考视口后,智能体会检查其他要求的尺寸。最后一步是按参考图尺寸渲染,等待字体和图片加载完成,对比结果并修正可见差异。缺失的素材和未经验证的渲染情况必须明确说明。
预期交付物
- 使用目标项目技术栈、并合理复用组件的可编辑界面代码
- 将所需控件接入现有行为,而不虚构后端功能
- 简要说明实际进行的视觉对比、剩余差异和缺失的素材
从参考图到对比
- 01检查实际图像
阅读图像本身,而不只是文件名或提取的文本。在修改代码之前,先确定其尺寸、可见区域、对齐方式、字体排印和素材。
- 02按参考尺寸构建
在现有技术栈中匹配层级、换行、间距和裁剪。组件能够还原参考图时就复用它们,不要强行套用不相关的默认样式。
- 03渲染并修正
在相同视口下截取运行中的页面。先对比整体布局和比例差异,再对比字体排印、颜色和细节;修改后再次渲染。
- 04检查所需的变体
确定参考尺寸后,测试所要求的响应式尺寸和可用控件。如实报告剩余差异,而不是承诺像素级完美还原。