SuperAPI AI 工具集

ui-modernizer

前端与建站

查看项目

更新于 10-15 23:58

技能介绍

用途:将现有 React/Vue/Svelte + Tailwind 项目界面从“还行”改造成 2026 年 SaaS 设计风格(Linear、Vercel、Stripe、shadcn 审美),不改动业务逻辑。

主要能力:按 8 步工作流执行——加载配置、检测技术栈与品牌色、制定计划、备份、修改前视觉快照、应用现代化、修改后快照与差异、生成报告。可修改范围限于 className/class 字符串、非语义布局包裹 div、globals.css、tailwind.config、设计 token 与新增样式文件。支持 Tailwind v3/v4,支持品牌色替代 indigo。可选组件替换:需用户明确要求 shadcn 相关词语时,通过 npx shadcn@latest add 等命令重写候选元素。提供回滚模式(backup.mjs --restore-latest)与风格配置(内置 Linear/Vercel/Stripe 等,或以 Markdown 文件自定义)。

主要命令:node scripts/load-config.mjs --pretty、detect-stack.mjs、detect-brand.mjs、dry-run.mjs --pretty、backup.mjs、visual-snapshot.mjs before/after、visual-diff.mjs、report.mjs、ast-extract.mjs。

限制:不修改事件处理、状态、effect、fetch/API、router、server actions、业务工具、props 类型;禁止无确认添加运行时依赖;必须先行备份;失败会输出 UMD-NNN 错误码;Playwright 未安装时跳过视觉回归;styled-components/CSS Modules 文件跳过;Vue 的 :class 变量绑定与 Svelte class:foo 指令只改静态部分。分类依据为面向前端界面改造,故归入前端与建站。