SuperAPI AI 工具集

redesign-existing-projects

设计与创作

查看项目

更新于 10-16 03:03

技能介绍

用途:当用户要求对已有网站或应用做重设计、换风格、现代化或打磨界面时使用。它审计现有前端代码,做有针对性的视觉改进,而不改变产品架构。适合设计显得通用、像 AI 生成、间距差、视觉平淡,或缺少响应式、交互、加载、空、错误状态的场景。

主要能力:按“扫描—诊断—修复”流程工作,先识别框架、样式方案(Tailwind、原生 CSS、styled-components 等)与现有设计模式,再逐项列出通用模式、薄弱点和缺失状态,随后在原技术栈上做小步修改,而不是从零重写。审计覆盖排版、配色与表面、布局、交互与状态、内容、组件模式、图标和代码质量,例如字体选择与字重层次、灰色调一致性、避免紫色蓝色 AI 渐变、页面深浅模式混用、用 CSS Grid 替代复杂 flex 百分比、加容器最大宽度、补齐 hover/按下/焦点环、骨架加载、空状态、错误提示,以及语义化 HTML、图片 alt、meta 标签和 favicon。

使用方式:在任务中引用该技能即可,例如“Use @redesign-existing-projects for this task: Use when upgrading existing websites or apps by auditing generic UI patterns and applying premium design fixes without rewrites.”。修改遵循现有技术栈,不迁移框架或样式库;导入新库前先检查依赖文件;使用 Tailwind 时先确认 v3 还是 v4;无框架时用原生 CSS。修改顺序建议为字体替换、配色清理、交互状态、布局间距、替换通用组件、补加载/空/错误状态,最后打磨排版与间距。

限制:该技能不授权框架迁移、信息架构重写或默认扩展产品范围;视觉改动需保留可用行为、路由、数据流、无障碍语义与测试;改完须在真实应用中跨受支持浏览器和视口验证。涉及法律链接、返回导航、404 页、表单校验、跳转内容链接和 Cookie 同意等策略性遗漏,需按实际合规要求处理。具体收费、价格与平台支持信息暂未提供。