enhance-web-redesign

界面路由：/uiux。你所在的位置：enhance-web-redesign。原生 iOS/Android（SwiftUI / Compose，无 Web 层）不在范围内——请直接遵循 Apple HIG / Material。

Redesign Skill

自由度：混合。 审美和审查判断 [高自由度]；保持技术栈、不破坏功能 [低自由度——严格执行]。

如何推理

1. 扫描 — 框架、样式、当前模式
2. 分类 — 优先处理 AI 痕迹（3 个以上 = 滥用；清除这些痕迹）
3. 修复 — 使用现有技术栈，按修复优先级排序；不重写
4. 保留 — 流程仍可运行；导入前确保依赖已存在

示例

扫描： Vite + Tailwind v4；全站使用 Inter；三个大小相同的功能卡片；没有悬停效果。 分类： Inter、紫色主视觉渐变、三张卡片、“欢迎来到……”——共四个痕迹。 修复： Geist；一种强调色；非对称功能行；悬停/激活效果；保留路由。 保留： npm run build 成功；不引入新框架。

报告前自我审查

• 技术栈不变 — 不迁移框架或样式库
• 清除痕迹 — Phase 0 中的特征确实已移除，而非仅重新设计样式
• 状态齐全 — 包含悬停/焦点/加载/空状态/错误状态
• 归属恰当 — 单页润色 → enhance-web-ui；仅规划反滥用 → plan-antislop；全新项目 → design-frontend

工作方式

将此技能应用于现有项目时，请按以下顺序执行：

1. 扫描 — 阅读代码库。识别框架、样式方案（Tailwind、原生 CSS、styled-components 等）和当前设计模式。
2. 诊断 — 按照下方的审查清单逐项检查。列出发现的所有通用模式、薄弱点和缺失状态。
3. 修复 — 在现有技术栈上进行有针对性的升级。不要从头重写；改进现有内容。

阶段 0：60 秒 AI 痕迹分类 [高自由度]

开始完整审查前，先扫描最明显的“AI 生成感”特征。如果发现 3 个以上，页面看起来就会很粗糙，而清除这些特征是最快见效的改进。（内容摘自反粗糙设计研究——参见 anti-slop-ui 和 taste-skill。)

• Inter / Roboto 是唯一字体
• 主视觉、按钮或图标使用紫→蓝渐变
• 一行排列三个大小相同的功能卡片
• 所有元素都是胶囊形状（统一使用 rounded-full 徽标和按钮）
• 主视觉文案使用**“欢迎来到[产品]”/“改善你的……”**
• 正文每句话都穿插破折号
• 使用 Lucide/Feather 图标，且火箭代表“发布”、盾牌代表“安全”
• 所有内容居中，布局对称，没有不对称或重叠
• 白色卡片上使用通用的 shadow-lg 纯黑阴影
• 交互元素没有悬停/激活/焦点状态
• 默认画布是奶油色/米白色页面背景
• 每个标题都包含一个斜体强调词
• 每个区块上方都有**“01 / 02 / 03”编号或等宽字体眉题标签**

先清除这些问题，再进行完整审查。

设计审查 [高自由度]

逐项检查每个类别，并列出发现的所有通用模式、薄弱点和缺失状态；目录中的每项都列明问题及其修复方法： 字体 · 颜色与表面 · 布局 · 交互与状态 · 内容 · 组件模式 · 图标 · 代码质量 · 策略性遗漏（AI 通常会忽略的内容）。 完整审查目录：references/design-audit.md §Design Audit。

升级技巧 [高自由度]

升级时，采用高影响力的字体、布局、动效和表面处理技巧，替换通用模式（可变字体动画、描边转填充文字、断裂网格、视差卡片堆叠、交错入场、弹簧物理效果、真实玻璃拟态、聚光灯边框、颗粒叠加、着色阴影）。 完整列表：references/design-audit.md §Upgrade Techniques。

修复优先级 [HIGH freedom]

按以下顺序应用更改，以最小风险实现最大的视觉提升：

1. 更换字体 — 最显著的即时提升，风险最低
2. 清理配色 — 移除冲突或过度饱和的颜色
3. 悬停和激活状态 — 让界面更有活力
4. 布局和间距 — 设置合适的网格、最大宽度和统一的内边距
5. 替换通用组件 — 用现代替代方案替换陈词滥调的设计模式
6. 添加加载、空状态和错误状态 — 让界面感觉更加完善
7. 优化排版比例和间距 — 最后的精致点缀

规则 [LOW freedom — run exactly]

• 使用现有技术栈。不要迁移框架或样式库。
• 不要破坏现有功能：保留路由、处理程序和状态；汇报前运行仓库的构建和检查。
• 导入任何新库之前，先检查项目的依赖文件。
• 如果项目使用 Tailwind，修改配置前先确认版本（v3 还是 v4）。
• 如果项目没有框架，请使用原生 CSS。
• 保持更改便于审查且聚焦。优先进行小范围、有针对性的改进，而不是大规模重写。

延伸阅读

• 设计审查目录和升级技巧