模型中心
前端视觉评测
评估模型是否能根据真实浏览器截图修复 UI 问题。
评测目标
前端任务不能只看代码是否通过构建。模型必须能理解截图里的布局、间距、文字溢出、移动端导航和暗色模式问题，并把修改落到正确组件。
任务集
| 任务 | 输入 | 通过标准 |
|---|---|---|
| 首屏复刻 | 参考截图、本地截图 | 布局结构、字号层级和间距接近 |
| 移动端导航 | 390px 截图 | Header 不溢出，菜单可用 |
| Gallery 卡片 | 桌面和移动截图 | 卡片尺寸稳定，标签不挤压 |
| 暗色模式 | dark 截图 | 对比度足够，没有亮色漏底 |
推荐模型配置
前端视觉任务推荐 Deep 路由起步。若页面结构复杂、涉及多个断点或需要长时间迭代，再切到 Max 路由。
验收矩阵
| 页面类型 | 视口和重点检查 |
|---|---|
| 首页 | 桌面 1440x900；移动 390x844；暗色模式需要覆盖。重点检查首屏主标题、CTA、下一段露出 |
| 文档页 | 桌面 1440x900；移动 390x844；暗色模式需要覆盖。重点检查左导航、右 TOC、代码块、长表格 |
| Gallery | 桌面 1440x900；移动 390x844；暗色模式需要覆盖。重点检查卡片网格、标签换行、详情入口 |
| 交互组件 | 桌面 1280x800；移动 390x844；暗色模式视情况。重点检查菜单、搜索、展开项、hover/active 状态 |
失败分类
| 分类 | 例子 | 处理方式 |
|---|---|---|
| 布局错位 | 卡片高度跳动、标题和按钮重叠 | 调整 grid、gap、min/max 尺寸 |
| 文本溢出 | 长英文、路径、模型 slug 挤出容器 | 使用 break-words、缩短列数或改成卡片 |
| 暗色漏底 | 深色模式里出现白色卡片或低对比边框 | 检查 dark: 类和 bg-* token |
| 真实内容缺失 | 只有装饰图，没有任务产出 | 补输入、输出、验收路径 |
记录模板
页面：
视口：
参考截图：
本地截图：
发现问题：
修改文件：
复查截图：
Console 错误：
未覆盖状态：
结论：
当前站点验收
本项目的截图保存在 output/playwright/。每次大改后至少覆盖首页、/codex/model、/models、/gallery 和一个 Skill 详情页。
继续阅读
按当前页面继续跳到相关教程、评测、路线或 Gallery 示例。