SuperAPI AI 工具集

redesign-existing-projects

设计与创作

查看项目

更新于 10-16 03:17

技能介绍

用途:面向已有项目做视觉与交互升级。它先读取代码库,识别框架与样式方案(Tailwind、原生 CSS、styled-components 等)及现有设计模式,再对照审计清单逐条诊断通用化、薄弱和缺失状态的问题,最后在原有技术栈上做定点修改,不从零重写。

主要能力:审计并改进排版(字体选择、标题层级、正文行宽、字重、数字用等宽或 tabular-nums、字距、避免孤字);颜色与表面(避免纯黑背景、过饱和与多强调色、混用冷暖灰、紫蓝 AI 渐变,改阴影着色、增加噪点纹理、统一光照方向、避免明暗区突兀跳变);布局(打破完全对称、避免三等分卡片行、用 min-height: 100dvh、用 CSS Grid、加 max-width 容器、变化圆角、增加留白与层次、底部对齐按钮、统一特性列表起始位置);交互状态(hover、按压、过渡、焦点环、加载/空/错误状态、活跃导航、平滑滚动、用 transform 与 opacity 做动画);内容与组件模式(真实姓名与数据、避免套话文案、非通用卡片、非默认图标与徽章、非千篇一律的页脚与头像);代码质量(语义化 HTML、相对单位、alt 文本、z-index 规范、meta 标签)以及常被忽略的法务链接、返回路径、自定义 404、表单校验、跳转内容链接和 cookie 同意。

使用方式:作为技能应用到现有项目,按扫描、诊断、修复顺序执行;修复优先级为字体替换、清理配色、补 hover/active、布局与间距、替换通用组件、补加载与空错状态、最后打磨排版与间距细节。

限制:必须使用现有技术栈,不迁移框架或样式库;不得破坏既有功能,每次改动后需测试;新增依赖前先查项目依赖文件;使用 Tailwind 需先确认 v3 还是 v4;项目无框架时使用原生 CSS;改动保持小步、可审查。官方具体安装命令与平台支持信息暂未提供。