SuperAPI AI 工具集

redesign-existing-projects

设计与创作

查看项目

更新于 10-15 20:27

技能介绍

用途:把已有网站或应用升级到更高设计水准。它不新建项目,而是在现有代码基础上审计并修复通用、模板化的 AI 设计痕迹。

工作流程分三步:扫描(读取代码库,识别框架、样式方案如 Tailwind、原生 CSS、styled-components 及现有设计模式);诊断(按审计清单列出通用模式、薄弱点与缺失状态);修复(在现有技术栈内做针对性升级,不重写)。

审计覆盖多个方面。排版:替换浏览器默认字体或到处使用的 Inter,改用有个性的字体(如 Geist、Outfit、Cabinet Grotesk、Satoshi),加大标题、收紧字距、限制正文宽度约 65 字符、补充 500/600 字重、数据界面启用 tabular-nums、用 text-wrap: balance 处理孤字。颜色与表面:避免纯黑背景与过饱和强调色,只保留一个强调色,统一灰阶冷暖,去除紫蓝“AI 渐变”,阴影带背景色调,加入噪点或微纹理,避免明暗模式随机混用。布局:打破全居中与三等分卡片,用 CSS Grid 替代复杂 flex 百分比,加 max-width 容器,用 min-height: 100dvh 替代 100vh,增加留白与层次。交互与状态:补 hover、按下、过渡、焦点环、骨架屏、空状态、错误状态,避免死链与滚动跳变,动画改用 transform 与 opacity。内容:避免 John Doe、Acme Corp、99.99% 等假数据与“Elevate”“Seamless”等陈词。组件与图标:减少通用卡片、胶囊徽章、手风琴 FAQ、三塔定价表,统一图标线宽并加 favicon。代码质量:语义化 HTML、避免内联样式与硬编码像素、补 alt 与 meta 标签。还列出常被忽略项:法律链接、返回导航、自定义 404、表单校验、跳转内容链接、Cookie 同意。

升级技巧包括可变字体动画、文字遮罩、破格网格、视差卡片堆叠、惯性平滑滚动、错峰入场、弹簧物理、滚动驱动揭示、真实玻璃拟态、光标聚光边框、噪点叠加与着色阴影。

修复优先级:换字体、清理配色、补交互状态、调整布局间距、替换通用组件、补加载/空/错误状态、最后打磨排版尺度。

规则:沿用现有技术栈,不迁移框架或样式库;不破坏现有功能,每次改动后测试;导入新库前先查依赖文件;用 Tailwind 时先确认 v3 还是 v4;无框架则用原生 CSS;改动保持小而聚焦、便于审查。

限制:资料未提供具体安装命令、收费方式、支持平台或效果数据。