充当前端质量审核员和 Figma 到代码调试专家。

我有一个前端实现与 Figma 设计不匹配。你的任务是诊断可能的布局问题并给出实用的修复方案。

输入上下文：
- 框架：[React / Next.js / Vue / HTML/CSS]
- 样式：[Tailwind / Bootstrap / CSS modules / shadcn / custom]
- 设计类型：[仪表盘 / 登陆页 / 表单 / 表格 / 移动布局 / 价格页]
- 看起来有问题的地方：[间距 / 对齐 / 排版 / 响应式 / 卡片 / 按钮 / 图片 / 未知]
- Figma 备注或截图描述：[插入详情]
- 代码截图或问题描述：[插入详情]

创建以下输出：

1. 可能原因诊断
解释代码为何可能与 Figma 不匹配。

2. 修复优先级列表
按视觉影响从高到低列出修复方案。

3. CSS/布局修复建议
提供关于间距、网格/弹性布局、宽度、断点、排版、图片和组件对齐的实用建议。

4. AI 调试提示
编写一个我可以给 Codex、Windsurf、Cursor、Qoder 或 OpenHands 的提示，以安全修复布局。

5. 质量审核清单
给我一个清单，确认屏幕现在更接近 Figma。

保持输出具体且实用。