SuperAPI AI 工具集

premium-ui-revamp-skill

设计与创作

查看项目

更新于 10-15 17:30

技能介绍

Premium UI Revamp 用于把已有界面改造为可信、有意图的产品体验。它保留可用的部分,从产品语境推导设计方向,在现有技术栈中实施改进,并验证渲染结果,而非止步于建议。其原则是把“premium”理解为清晰、克制、一致、工艺与契合用途,而非固定视觉风格;方向应来自产品、受众、内容、品牌线索与使用场景。默认保留功能、路由、数据流、文案与既有设计系统约定,优先少量高影响的结构性决策。

工作流程:先检查仓库,识别框架、入口、目标路由、组件树、全局样式与令牌、组件库、图标、字体、品牌资产、响应式行为、交互状态及构建/预览命令;在有条件时运行界面并采集桌面与移动基线。若用户只要分析,则在审计与建议后停止,否则继续实现与验证。

随后写出简短设计简报(产品与用户、期望气质、视觉主张、层级、约束),再做审计并按结构性问题、系统性问题、打磨问题三个层级排序修复。当界面显得通用或模板化时,可参考 premium-patterns.md 选择契合产品的方向。

实现顺序由基础向外:语义结构与内容顺序、令牌与共享变量、页面网格与断点、排版与控件、重复组件与交互状态,最后才是支撑视觉主张的图形、细节与动效。需保持语义 HTML 与键盘行为,覆盖悬停、聚焦可见、选中、禁用、加载、空、错误、成功等状态。

还需主动排查通用化 UI 痕迹,如无产品关联的渐变大标题、装饰性光斑与玻璃面板、过度胶囊与嵌套卡片、任意强调色、低对比小字、无差别动效与大量一次性数值。最终在代表性桌面与移动宽度、断点、长内容、空内容、加载与错误状态、键盘焦点、对比度与减少动效等方面验证渲染,并运行相关构建、类型检查、Lint 与针对性测试;不要声称已符合无障碍标准,除非确实测量过。完成标准是交付可运行的实现,并总结设计方向、最重要的结构与视觉改动以及验证情况。资料未提供收费、价格、平台或安装命令等信息。