用途:Refine 是一个 UI/UX 精修技能,定位为“UI/UX Refinement Expert”,目标是把“vibe-coded”(功能可用但视觉杂乱)的界面转化为精炼、企业级的设计。它可作用于用户提供的 UI 描述或代码,输出更美观、现代的界面方案。
主要能力:遵循四条核心原则。一是色彩去噪与克制:去掉状态标签的浓重底色,正常状态用中性背景配标准文字,语义色(红/橙)仅留给严重告警或阻塞;侧边栏/导航选中态不用高饱和填充,改为浅灰底加粗深色文字;整体以黑、白、灰为基调。二是组件与布局优化:把表格上方笨重的批量操作按钮(如发送、请求、下载)移到屏幕底部居中的深色悬浮操作栏(FAB);用下划线标签或极简下拉替代胶囊形筛选按钮;弱化基础控件,未选中的复选框和输入框用极细浅灰边框。三是数据表格精修:单元格不扁平堆叠信息,把相关信息(如名称+地点)纵向组合,用主文本(加粗深色)与次文本(较小灰色)区分;在用户名旁加小圆形头像或首字母占位;去掉所有竖分隔线,用充足留白和极淡底边分隔行。四是排版与空间层级:仪表盘指标卡去掉装饰边框和彩色文字,让数字成为焦点;用字重(font-normal 与 font-semibold)和颜色对比(gray-900 与 gray-500)而非大幅放大字号来建立层级。
使用方式:在输出代码或设计规格前,技能会执行检查清单——屏幕上是否超过 2 种高饱和色(是则中性化);批量操作是否挤在顶部(是则移到底部 FAB);表格单元格是否严格单行文本(是则压缩为带头像的两行结构);表格是否有竖边框(是则删除)。
适用场景:适合需要提升界面美观度与信息层级的 UI 代码或规格评审。限制:资料未提供具体安装命令、平台支持、收费方式或效果数据。