该技能用于把已有的网站或应用升级到更高设计水准,流程分为三步:扫描代码库,识别所用框架与样式方式(如 Tailwind、原生 CSS、styled-components)及现有设计模式;依据审计清单诊断通用化、薄弱与缺失状态的问题;在既有技术栈上做针对性修复,不推倒重写。
审计与修复范围包括:排版(替换默认字体、加强标题层级、限制正文行宽、补充字重与字距、用等宽或 tabular-nums 处理数字)、色彩与表面(避免纯黑背景与过量强调色、统一灰色系、去除紫蓝 AI 渐变、给阴影染色、增加噪点与纹理、统一光照方向)、布局(打破完全对称与三列等宽卡片、用 min-height:100dvh 替代 100vh、限制最大宽度、变化圆角、保证卡片按钮与特性列表对齐)、交互状态(悬停、按下、焦点环、加载/空/错误状态、活动导航、平滑滚动、用 transform 与 opacity 做动画)、内容(真实姓名与有机数据、避免 AI 套话、大小写与文案语气)、组件模式、图标与代码质量(语义化标签、去掉内联样式与死代码、alt 文本、meta 标签)。
还列出 AI 常遗漏项,如隐私政策与条款链接、返回路径、自定义 404、表单校验、跳转到内容链接、Cookie 同意。升级技巧涵盖可变字体动画、文字遮罩、破格网格、视差堆叠、分屏滚动、惯性平滑滚动、错峰入场、弹簧物理、玻璃拟态、聚光边框与颗粒叠加。
其修复优先级为:换字体、清理配色、补悬停与按下状态、调整布局间距、替换通用组件、补加载与空与错误状态、最后打磨排版尺度。
限制与规则:必须沿用现有技术栈,不迁移框架或样式库;不破坏已有功能,每次改动后测试;引入新库前先检查依赖文件;使用 Tailwind 时先确认 v3 与 v4 再改配置;无框架项目用原生 CSS;改动保持小而可审查。
适用场景:已有项目需要提升视觉质感与完成度时使用。具体定价、平台与效果数据暂未提供。