前端视觉专项工作流

顺序

设计输入 → 信息层级 → 设计令牌 → 页面骨架 → 真实数据 → 全状态 → 响应式 → 浏览器截图 → 差异修正 → QA验收。

历史针对性修正

历史中视觉不满意表达很多，因此首次提示必须给：参考、第一焦点、色彩/字体/间距、禁用项、桌面/手机尺寸和截图验收。

最终门

• 真实浏览器而非静态代码。
• 可见操作都有效。
• loading/empty/error/permission齐全。
• 桌面和手机截图。
• 构建、类型、E2E通过。

实际执行模板

当前页面：【入口】
核心用户任务：【动作与结果】
参考：【截图/Figma/品牌规范】
第一视觉焦点：【内容】
必须保持：【业务逻辑、接口、已有品牌资产】
禁止：【过度渐变、无意义发光、过多卡片、emoji代替图标等】
目标尺寸：【桌面和手机】

先启动并截图当前页面，再拆解层级、网格、字体、颜色、间距、素材和交互。实现后用同一尺寸截图对比，逐项修正。不能只看代码。

差异检查顺序

1. 结构：区域顺序、容器、网格和主次比例。
2. 层级：首屏焦点、标题、关键数字和主要操作。
3. 令牌：字号、行高、颜色、间距、圆角、边框。
4. 素材：比例、裁切、主体位置、图标体系。
5. 状态：加载、空、错、权限、禁用和反馈。
6. 响应式：折行、堆叠、导航、触控和溢出。
7. 可访问性：键盘、焦点、标签和对比度。

功能正确但视觉不佳时，应保留数据和业务逻辑，仅用差距清单修正视觉；不要整体推翻后重新制造功能缺陷。