现有项目重设计

现状里那些说不清的「不对劲」

项目跑久了，界面往往处于一种「还能用，但哪里不太对」的状态。打开代码库，看到的是浏览器默认字体或者满屏的 Inter；标题撑不起版面，正文一行拉到八九十字符；字重只有 400 和 700 两档，层次全靠加粗硬撑。配色同样敷衍：背景就是纯 #000000，强调色饱和度拉满，一个界面里还塞了三四种 accent，谁都想抢眼球，结果谁都压不住谁。

这些问题很难被一次 code review 捕获，因为它们分散在 typography、color、spacing 各自的细节里，又不至于让功能报错。

这个技能怎么工作

核心思路是 不要推倒重写。技能按三步走：

• Scan：先读代码库，确认框架、样式方案（Tailwind、vanilla CSS、styled-components 等）和当前设计模式。
• Diagnose：按审计清单逐项过一遍，列出所有通用模式、薄弱点和缺失的状态。
• Fix：在现有技术栈上做定向升级，改进已有的东西，而不是另起炉灶。

审计清单覆盖两大块。Typography 部分针对：默认字体或 Inter 滥用、标题存在感不足、正文过宽（建议段落宽度约 65 字符）、字重档位单一、数字用了比例字体（应启用 tabular-nums 或等宽）、字间距缺少调整、副标题全是大写、孤行单词（可用 text-wrap: balance / pretty 修复）。Color and Surfaces 部分针对：纯黑背景（替换为 #0a0a0a、#121212 或深藏青等）、强调色饱和度过高（压到 80% 以下）、强调色数量过多（只保留一个）。

适用边界

这个技能面向的是 已有项目 的渐进式改造，不是从零搭新项目。它默认你的技术栈是成立的，只想要把视觉细节修到位。如果现有架构本身已经烂到牵一发动全身，更合适的选择是重写而不是修补。

另外，审计清单只覆盖排版和配色两块，布局结构、交互逻辑、性能等不在其范围内。想用它处理动效或信息架构问题，需要搭配其它技能。