SuperAPI AI 工具集

redesign-existing-projects

设计与创作

查看项目

更新于 10-16 08:36

技能介绍

用途:把现有网站或应用升级到更高端的设计水准。它不重建项目,而是先读代码、判断框架与样式方式,再逐项诊断并修复通用化、廉价感的设计问题。

使用方式遵循三步:Scan(读代码库,识别框架、样式方案和现有设计模式);Diagnose(按审计清单列出通用模式、薄弱点和缺失状态);Fix(在既有技术栈内做针对性改进,不重写)。

审计覆盖:排版(字体选择、标题体量、正文宽度约65字符、字重层级、等宽数字、字距、文本平衡);色彩与表面(避免纯黑背景、过饱和与多强调色、暖冷灰混用、紫色AI渐变、通用阴影、纯平无质感、不均匀光照、明暗模式混切);布局(打破对称、避免三等分卡片行、用 min-height: 100dvh 替代 100vh、用 Grid、max-width 容器、圆角与留白差异化、按钮底部对齐、垂直节奏一致);交互与状态(悬停/按下反馈、过渡时长、焦点环、骨架屏、空状态、内联错误、当前页高亮、平滑滚动、用 transform/opacity 动画);文案(真实姓名与数据、避免 AI 套话、主动语态、去掉感叹号);组件、图标与代码质量(语义化 HTML、去内联样式、相对单位、alt 文本、z-index 体系、meta 标签等)。还列出常见遗漏,如法律链接、返回导航、404 页、表单校验、跳转正文链接、Cookie 同意。

升级技法含可变字体动画、文字遮罩、破格网格、视差卡片堆叠、惯性滚动、交错入场、弹性物理、玻璃拟态、聚光边框、颗粒噪点、带色调阴影。修复优先级建议从换字体、清理配色、悬停状态开始。

限制:必须沿用现有技术栈,不迁移框架或样式库;不得破坏现有功能,每次改动后需测试;引入依赖前先查依赖文件;Tailwind 需区分 v3/v4;无框架时用原生 CSS;改动应小而可审查。具体安装命令、许可与收费信息该资料暂未提供。