SuperAPI AI 工具集

redesign-existing-projects

设计与创作

查看项目

更新于 10-15 23:45

技能介绍

用途:把现有网站或应用升级到更高设计水准。它不新建项目,而是审计当前设计、找出通用 AI 风格痕迹,并在原有技术栈内应用高端设计标准。

使用方式:按三步执行。扫描——阅读代码库,识别框架、样式方案(Tailwind、原生 CSS、styled-components 等)与现有设计模式;诊断——对照审计清单列出所有通用模式、薄弱点与缺失状态;修复——在现有栈上做针对性升级,不从头重写。

主要能力(审计维度):排版(替换浏览器默认字体与 Inter、增强标题存在感、限制正文宽度约 65 字符、引入 500/600 字重、数据用等宽或 tabular-nums、调整字距、用 text-wrap 处理孤字);色彩与表面(避免纯黑背景、降低强调色饱和度、只保留一个强调色、统一灰阶冷暖、去除紫蓝 AI 渐变、阴影着色、加噪点纹理、统一光照方向、避免明暗模式随机混用);布局(打破对称、替换三列等宽卡片、用 min-height: 100dvh 替代 100vh、用 CSS Grid、加 max-width 容器、变化圆角、制造层次与留白、卡片按钮底部对齐);交互与状态(悬停/按下反馈、200-300ms 过渡、焦点环、骨架屏、空状态、错误状态、当前页导航标识、scroll-behavior: smooth、用 transform/opacity 做动画);内容(真实姓名与数据、避免 AI 文案套话、主动语态、真实日期与头像);组件与图标(去通用卡片、减少按钮样式噪音、替换手风琴 FAQ 与三塔定价、统一图标线宽、加 favicon);代码质量(语义化 HTML、避免内联样式与硬编码像素、alt 文本、z-index 体系、清理死代码、校验 import、补 meta 标签);以及常被忽略的法律链接、返回导航、404 页、表单校验、跳转内容链接、Cookie 同意。

修复优先级:换字体、清理配色、补悬停与按下状态、布局与间距、替换通用组件、补加载/空/错误状态、最后打磨排版与间距。

限制与规则:必须沿用现有技术栈,不迁移框架或样式库;不破坏现有功能,每次改动后测试;引入新库前先查依赖文件;用 Tailwind 需先确认 v3 还是 v4;无框架则用原生 CSS;改动保持小而聚焦、便于审查。资料未提供具体安装命令、收费方式与平台信息。