诊断并升级现有网站或 Web 应用的视觉品质、信息层级、交互反馈和响应式体验，在保留业务功能与技术约束的前提下完成可验证的改版。

技能说明

网站品质升级助手

这个 Skill 能做什么

针对已经存在的网站或 Web 应用，先找出“为什么显得普通或难用”，再制定并实施有依据的升级方案。

可处理：

• 页面层级混乱、重点不突出
• 字体、颜色、间距和组件缺少系统
• 模板感强，品牌个性不足
• 首屏表达不清，转化路径断裂
• 移动端拥挤、溢出或操作困难
• 动效缺乏反馈，或者过多干扰内容
• 新旧页面风格不一致
• 改版后功能、SEO 或性能退化

本 Skill 不以“全部推倒重来”为目标，而是找到影响最大的设计决策，并在可控范围内升级。

什么时候使用

出现以下需求时使用：

• “这个网站看起来太模板化，帮我升级”
• “保持功能不变，重新做视觉”
• “改版首页，但不要影响现有用户流程”
• “移动端体验很差，系统检查一下”
• “统一多个页面的设计语言”

如果任务是从零创建全新产品，应先完成产品定位和信息架构，再使用新站设计流程。

开始前需要什么

先获取：

1. 可访问的网站、截图或代码仓库 2. 核心用户与最重要的用户任务 3. 不能改变的业务流程和技术约束 4. 当前转化、性能、SEO 或可用性问题 5. 品牌资料与竞品参考 6. 需要覆盖的页面、组件和设备尺寸 7. 验收方式与上线窗口

使用 `templates/upgrade-audit.md` 记录现状与目标。

执行步骤

1. 先建立现状基线

在修改前保存：

• 关键页面截图
• 主要用户路径
• 页面结构与组件清单
• 关键性能指标
• 可访问性检查结果
• 已知测试结果

没有基线，就无法判断改版是升级还是换了一种问题。

2. 找出页面真正的任务

为每个页面写清：

• 谁来到这里
• 他想完成什么
• 页面希望他下一步做什么
• 哪些信息负责建立信任
• 哪些内容可以延后或删除

先整理任务，再谈视觉风格。

3. 做五层审计

依次检查：

1. **信息层**：标题、顺序、证据和行动是否清楚 2. **布局层**：网格、留白、密度和视觉焦点是否稳定 3. **系统层**：字体、颜色、圆角、边框和组件是否一致 4. **交互层**：状态、反馈、键盘操作和错误提示是否完整 5. **技术层**：响应式、性能、SEO 和现有测试是否受影响

每个问题标注严重程度、影响范围和修改成本。

4. 确定一个设计方向

设计方向必须能解释产品，而不是只列流行风格词。至少定义：

• 品牌气质与需要避免的感觉
• 字体角色与字号层级
• 主色、强调色和功能色
• 内容宽度、网格和间距节奏
• 图片或插图的使用原则
• 组件表面与交互反馈
• 动效的目的、速度和触发方式

不要在同一个页面混用多个互相冲突的视觉语言。

5. 先改高影响区域

优先顺序通常是：

1. 导航与首屏表达 2. 核心任务路径 3. 标题层级和行动按钮 4. 信任信息、案例与数据 5. 表单、空状态和错误状态 6. 页尾与次要页面

先做一页或一个完整流程的样板，再扩展到其他页面。

6. 建立可复用规则

把成熟方案整理为设计令牌和组件规则，包括：

• 颜色与对比度
• 字号、行高和字重
• 间距序列
• 容器宽度和断点
• 按钮、输入框、卡片和弹层状态
• 图标、图片和数据展示规范

避免在每个页面写一套只生效一次的数值。

7. 实施时保护现有功能

• 先阅读现有组件和数据流
• 小步修改，每一步都能运行
• 不为了视觉效果改变业务语义
• 保留 URL、表单字段、埋点和重要 DOM 语义
• 动画挂在不会破坏布局和定位的层级
• 新样式优先复用系统变量，避免全局污染

8. 做响应式与状态检查

至少检查手机、平板和桌面宽度，并覆盖：

• 默认、hover、focus、active、disabled
• 加载、空数据、错误和成功
• 长标题、长数字、多语言和缺图
• 键盘导航与减少动态效果设置

9. 对照基线验收

改版后重新记录截图、性能和测试结果。逐项回答：

• 核心任务是否更容易发现和完成
• 页面主次是否更清楚
• 是否保留所有必要功能
• 移动端是否真正重排，而不是缩小桌面版
• 性能、SEO 和可访问性是否出现回退

输出格式

改版交付/
├── audit.md               # 问题、优先级与证据
├── direction.md           # 设计方向与系统规则
├── change-map.md          # 页面和组件修改清单
├── implementation/        # 实际代码改动
├── before-after/          # 改版前后截图
└── verification.md        # 功能、视觉、性能检查结果

每个重要改动都应能追溯到审计中的具体问题。

完整示例

某 SaaS 首页功能完整，但首屏同时放了六个按钮，字体层级接近，移动端卡片横向溢出。

合理升级方案：

1. 把页面目标明确为“让新用户理解价值并开始试用” 2. 首屏只保留一个主要行动和一个次要入口 3. 用结果型标题替代功能堆叠，补充真实使用证据 4. 建立三级标题、两档正文和统一间距序列 5. 卡片在移动端改为单列，数据表提供折叠或横向查看策略 6. 为按钮、表单和加载状态补齐交互反馈 7. 对比改版前后的核心路径、移动端截图与性能指标

质量检查清单

• [ ] 每个页面的主要任务清楚
• [ ] 首屏主行动在视觉上唯一明确
• [ ] 字体、颜色、间距和组件形成系统
• [ ] 设计方向与产品内容一致
• [ ] 没有用装饰掩盖信息问题
• [ ] 所有原有关键功能仍可使用
• [ ] 手机、平板和桌面均完成检查
• [ ] hover、focus、加载、错误和空状态齐全
• [ ] 动效有明确反馈目的，并支持减少动态效果
• [ ] 文本和控件达到基本可访问性要求
• [ ] 性能、SEO 和埋点没有意外回退
• [ ] 已保存改版前后证据和验证结果

信息不足时怎么处理

• 不清楚目标用户：先从现有内容和主要行动推断，并标记假设
• 没有品牌规范：从产品定位提炼少量可执行规则，不随意追逐风格
• 无法运行项目：先做截图与代码静态审计，不声称功能已验证
• 改版范围过大：按用户路径拆成阶段，先完成高影响样板
• 缺少数据：用可用性和信息层级证据提出方案，避免编造转化结论
• 现有系统限制较多：保留约束，优先通过字体、间距、层级和状态提升品质