用途:把现有网站或应用升级到更高设计水准。它不新建项目,而是审计当前设计、识别常见的“AI 生成感”模式,并在不破坏功能的前提下应用高端设计标准。
使用方式:按三步执行。扫描——阅读代码库,识别框架、样式方案(Tailwind、原生 CSS、styled-components 等)与现有设计模式;诊断——对照审计清单列出所有通用模式、薄弱点和缺失状态;修复——在现有技术栈内做针对性升级,不从头重写。
主要能力:覆盖排版(替换默认字体、增强标题存在感、限制正文宽度、引入 500/600 字重、数据界面用等宽或 tabular-nums、调整字距、避免孤字)、色彩与表面(避免纯黑背景、降低强调色饱和度、只保留一个强调色、统一灰阶、去除紫蓝“AI 渐变”、阴影着色、加入噪点纹理、统一光照方向、避免明暗模式随机跳变、为空白区块增加视觉层次)、布局(打破对称、替换三等分卡片、用 min-height: 100dvh、用 CSS Grid、加 max-width 容器、变化圆角、制造重叠深度、调整垂直留白、按钮底部对齐、统一特性列表起始位置)、交互与状态(悬停/按下反馈、过渡时长、焦点环、骨架屏、空状态、错误状态、避免死链、当前页导航标识、平滑滚动、用 transform/opacity 动画)、内容(真实姓名与数据、可信品牌名、避免 AI 文案套话、去掉感叹号与“Oops”、主动语态、随机日期、唯一头像、不用 Lorem Ipsum、句首大写)、组件模式(去通用卡片、减少按钮样式、替换胶囊徽章、避免手风琴 FAQ、替换三卡轮播、优化定价表、少用模态框、变化头像形状、简化页脚)、图标(避免只用 Lucide/Feather、替换火箭盾牌等陈词、统一描边、加 favicon)、代码质量(语义化 HTML、避免内联样式、相对单位、alt 文本、z-index 体系、清理死代码、校验导入、补 meta 标签),以及常被遗漏的法律链接、返回导航、404 页、表单校验、跳转内容链接、Cookie 同意。
升级技巧:可变字体动画、描边填充过渡、文字遮罩揭示、破格网格、留白最大化、视差卡片堆叠、分屏滚动、惯性平滑滚动、错峰入场、弹簧物理、滚动驱动揭示、真实玻璃拟态、聚光边框、噪点叠加、着色阴影。
修复优先级:换字体、清理配色、补悬停与按下状态、调整布局与间距、替换通用组件、补加载/空/错误状态、最后打磨排版与间距。
限制与规则:必须沿用现有技术栈,不迁移框架或样式库;不破坏现有功能,每次改动后测试;导入新库前先查依赖文件;用 Tailwind 需先确认 v3 还是 v4;无框架则用原生 CSS;改动保持小而聚焦、便于审查。资料未提供具体安装命令、收费方式与平台支持信息。