用途:把已有网站或应用升级到更高设计水准。它不新建项目,而是审计现有设计、识别常见的“AI 生成感”模式,并在原技术栈上做定向改进。
工作流程:Scan(读取代码库,识别框架、样式方案如 Tailwind、原生 CSS、styled-components 及现有设计模式)→ Diagnose(按审计清单列出通用模式、薄弱点与缺失状态)→ Fix(在现有栈上做针对性升级,不从头重写)。
审计范围:排版(默认字体、标题力度、正文宽度、字重层级、数字等宽、字距、孤字);颜色与表面(纯黑背景、过饱和强调色、多强调色、冷暖灰混用、紫蓝 AI 渐变、阴影着色、纹理、渐变均匀度、光照方向、明暗区块跳变、空白区块);布局(全居中、三等分卡片、100vh、flex 百分比、缺 max-width、等高卡片、统一圆角、缺层次、对称内边距、仪表盘固定侧栏、留白不足、按钮与特性列表未对齐、视觉对齐微调);交互与状态(悬停、按下、过渡时长、焦点环、加载/空/错误状态、死链、当前页导航、平滑滚动、动画属性);内容(假名、整数假数据、占位公司名、AI 文案套话、感叹号、被动语态、日期与头像重复、Lorem Ipsum、标题大小写);组件模式(通用卡片、按钮组合、胶囊徽章、手风琴 FAQ、三卡轮播、三塔定价、滥用弹窗、圆形头像、日/月切换、四列页脚);图标(Lucide/Feather 默认、火箭盾牌陈词、描边不一致、缺 favicon、库存团队照);代码质量(div 汤、内联样式、硬编码像素、缺 alt、任意 z-index、死代码、幻觉导入、缺 meta 标签);以及常被忽略的法律链接、返回导航、404 页、表单校验、跳转内容链接、Cookie 同意。
升级技法:可变字体动画、描边转填充、文字遮罩;破格网格、留白最大化、视差卡片堆叠、分屏滚动;惯性平滑滚动、错峰入场、弹簧物理、滚动驱动揭示;真实玻璃拟态、聚光边框、噪点叠加、着色阴影。
修复优先级:换字体 → 清理配色 → 悬停/按下状态 → 布局与间距 → 替换通用组件 → 补加载/空/错误状态 → 打磨排版与间距。
规则与限制:必须沿用现有技术栈,不迁移框架或样式库;不破坏现有功能,每次改动后测试;导入新库前先查依赖文件;Tailwind 需先确认 v3 还是 v4;无框架则用原生 CSS;改动保持小而可审查。资料另注明使用该技能时须同时应用 korean-frontend-defaults 规则。具体安装命令与收费方式暂未提供。