premium-ui-revamp-skill

高端 UI 改造

将现有界面打造成可信、精心设计的产品。保留有效之处，根据产品背景制定设计方案，在现有技术栈中实施改进，并检查渲染结果，而不是只停留在建议层面。

工作原则

• 将“高端”理解为清晰、克制、协调、精湛且契合用途，而非某种固定的视觉风格。
• 根据产品、受众、内容、品牌线索和使用场景来确定设计方向。避免在每个项目中都套用相同的暗色渐变、玻璃拟态和圆角卡片美学。
• 除非用户要求进行更广泛的改动，否则保留现有功能、路由、数据流、文案和设计系统约定。
• 优先做出少数影响重大的结构性决策，而非堆砌装饰效果。
• 让界面显得经过精心设计。确立一个鲜明的视觉理念，并贯穿于字体、构图、色彩、图像和交互之中。
• 使用当前的框架和样式系统。只有在收益明确且项目现有方案无法满足需求时，才添加依赖。
• 使用真实内容和贴近实际的状态。不要用占位文案、过大的空白区域或装饰性图形掩盖薄弱的结构。

工作流程

1. 了解实际界面

编辑前检查代码库。确定：

• 应用框架、入口点、目标路由和组件树；
• 全局样式、设计令牌、主题、组件库、图标、字体和品牌素材；
• 现有的响应式行为和重要交互状态；
• 构建、lint、测试和预览命令；
• 应保持风格一致的相邻页面。

尽可能运行界面。在有代表性的桌面和移动设备尺寸下，截取或检查基线状态。如果用户只要求分析，则在完成审查和建议后停止；否则继续实施并验证。

不要替换技术栈、重写无关组件、臆造新品牌，或仅为方便重新设计而改变产品行为。

2. 编写精简的设计简报

更改样式前，用几行说明设计方向：

• 产品和用户： 此界面帮助哪些人完成什么任务。
• 期望气质： 选择两三个有用的特征，例如精准、平和、编辑感、技术感、温暖、低调或活力十足。
• 视觉主张： 明确一个能让产品易于辨识的核心构图或美学理念。
• 层级： 指明主要操作、主要信息和辅助内容。
• 约束： 记录现有品牌、无障碍、内容和框架要求。

如果用户未提供这些信息，请根据代码和产品背景推断。只有当缺失的选择会实质性改变结果时才提问。

3. 先审查，再装饰

评估当前界面或确定改动优先级时，请阅读 references/quality-rubric.md。

将发现的问题分为三个层级：

1. 结构性： 层级关系混乱、信息架构不清、内容顺序不佳、信息密度不合适、响应式布局薄弱。
2. 系统性： 字体、间距、颜色、圆角、阴影、组件变体或状态不一致。
3. 润色： 视觉对齐、图标处理、边框、微文案、过渡效果和细节完善。

按此顺序修复。装饰无法弥补结构不清的问题。

4. 选择明确的设计方向

当 UI 显得千篇一律、像套用模板，或明显带有 AI 生成痕迹时，请阅读 references/premium-patterns.md。

选择符合产品特性的设计方向，而不是把所有流行风格都组合起来。明确决定：

• 内容宽度和网格行为；
• 信息密度和垂直节奏；
• 字体角色、字号、字重和行长；
• 中性色调、强调色用法和对比度层级；
• 边框、圆角、层级和表面样式规则；
• 存在素材时的图像或插画处理方式；
• 若产品适用，采用一种克制的标志性视觉元素；
• 动效的用途、时长和减少动态效果时的行为。

复用现有品牌素材和优秀组件。移除缺乏产品依据的装饰性设计。

5. 从基础开始实施

按以下顺序进行修改：

1. 修正语义结构和内容顺序。
2. 为字体、间距、颜色、圆角、层级和动效建立设计令牌或共享变量。
3. 修复页面网格、容器、主要区域和响应式断点。
4. 优化排版和控件。
5. 统一重复组件和交互状态。
6. 仅添加能够支撑视觉主旨的图像、细节和动效。

优先采用流式尺寸、弹性网格和由内容驱动的断点，而不是固定的模拟稿坐标。使用语义化 HTML，并保留键盘操作行为。根据产品界面的需要，包含悬停、焦点可见、激活、选中、禁用、加载、空内容、错误和成功状态。

抽象层应与代码库规模相称。复用重复值和模式，但不要仅为单页的视觉润色而搭建庞大的设计系统层。

6. 去除千篇一律的 UI 特征

主动检查以下问题：

• 过大的渐变标题搭配空泛的营销文案；
• 与产品无关的发光色块、装饰性网格背景和玻璃面板；
• 过多的胶囊形元素、圆角矩形、嵌套卡片，以及每个表面都加阴影；
• 大型居中主视觉区后接一系列可以互换的功能卡片；
• 随意使用紫色或蓝色强调色、样式一致的图标圆圈，以及填充渐变色的主按钮；
• 被视觉效果掩盖的薄弱排版；
• 过多空白降低了信息价值，而非提升视觉焦点；
• 过小的灰色文字、对比度低的边框，以及占位符式的元数据；
• 无处不在的动效，而非仅在有意义的状态变化时使用；
• 间距不一致，或存在数十个仅使用一次的值。

不要仅因某种设计手法出现在此列表中就将其移除。如果它能体现品牌或服务交互，就予以保留，并确保使用有意图且一致。

7. 验证渲染结果

使用现有条件下最佳的浏览器或截图工作流。至少验证以下内容：

• 有代表性的桌面端宽度；
• 较窄的移动端宽度；
• 布局发生明显变化的断点；
• 可用时的长内容、空内容以及错误／加载状态；
• 键盘焦点、标签、点击区域、可读对比度和减少动态效果；
• 溢出、裁切、意外换行和布局偏移。

运行相关的构建、类型检查、Lint 和目标测试。除非实际测量过，否则不要声称符合无障碍规范；请说明已检查的项目。

将最终渲染结果与基线进行比较。如果层级、密度、对齐、对比度或响应式表现仍有问题，就继续迭代。成功的改版应当一眼看上去就有明显提升，并且经得起近距离审视。

完成标准

交付可运行的实现，而不只是情绪板或 CSS 建议清单，除非用户只要求分析。总结以下内容：

• 设计方向及其适合该产品的原因；
• 最重要的结构和视觉改动；
• 已执行的验证及剩余限制。

避免逐一罗列细微的 CSS 调整。重点说明产品层面的改进。