UI和前端

工作流：参考 → 选方向 → 做一页 → 看图修改

层次	你看到的现象	真正需要处理的事情
页面结构不好	功能都有，但很乱，不知道先看哪里	确定信息优先级，重排布局，而不只是换颜色
视觉表现不好	结构还行，但粗糙、像半成品	调整字体层级、间距、比例、色彩和组件一致性
实现没有到位	设计想法不错，实际页面却挤压、错位、手机端崩坏	在真实浏览器中检查和修复

原来的说法	更有用的说法
太乱了	第一眼找不到最重要的事项。保留现有配色，先调整信息优先级。
太空了	标题区占得太多，我希望不滚动就能看到更多内容，但不要直接缩小所有文字。
太花了	多个区域都在抢注意力。保留一个主要强调区域，其余弱化。
不够精致	布局先别动，只检查对齐、间距、字体层级和按钮尺寸是否一致。
还是不好看	请把当前截图和参考图并排比较，指出差异最大的三个地方，先改这三个。

不知道想要什么样的界面： 我想改善这个项目的 UI，但我不熟悉设计术语，也暂时说不清楚想要的风格。 请先帮我确定视觉方向，不要直接对整个项目进行美化或重构。

先阅读与目标页面有关的现有实现，理解： 这个页面给谁使用，用户最重要的任务是什么，哪些功能和交互必须保留。 已知的信息不要重复问；确实缺少且会改变设计方向的信息，最多问我三个简单问题。

如果我提供了参考截图，请先归纳我可能喜欢的具体特点，并让我确认。 如果没有明确参考，请围绕同一个核心页面，提供三个有实质差异的视觉方案。 差异应体现在布局、信息密度和视觉重点上，不要只是更换颜色。

方案必须能让我直接看到效果，例如效果图或隔离的轻量预览。 使用相同、接近实际的中文内容，方便我公平比较。 这一阶段不要修改正式业务逻辑，也不要扩展到其他页面。

我选择方向后，再整理一份简短的 UI_SPEC.md，并进入实现。

已经选定方案时： 按已经确认的参考图和 UI_SPEC.md 实现这个页面。 本轮范围只限于这个页面，不要重新发明视觉方向。

沿用项目现有技术栈和组件体系，保留业务逻辑、数据接口与既有功能。 优先完成布局比例、信息层级和文字排版，再处理装饰与动效。 使用接近实际的中文内容，检查长文本和不同数据量下的表现。

完成后，使用当前环境可用的浏览器工具实际打开页面。 对照参考图检查视觉效果，并测试本页关键交互。 根据项目面向的设备检查布局；若需要移动端，额外检查窄屏表现。

交付真实运行截图、已检查的交互和仍存在的偏差。 不能验证的部分请明确说明，不要只用“构建通过”代表 UI 已完成。