落地页改造与回归验收
何时使用
- 用户给出一个现有官网/落地页 URL 或前端仓库，要求“改好看”“更像高端品牌”“提高转化”
- 用户需要对现有页面做设计审计，但不想从零重做
- 用户要求改版后必须证明没有改坏链接、表单、移动端和关键交互
不适用于：
- 未授权的站点抓取或修改
- 纯logo/单图生成（用设计类 Skill）
- 需要登录、支付、真实用户数据的页面改造，除非用户明确提供测试环境
执行原则
- 先审计，后设计：没有 before 截图和问题清单，不直接改代码。
- 保留业务约束：原有链接、表单字段、埋点、SEO 标题/描述、法律声明不能无故删除。
- 不直接改生产：先在工作副本/分支/预览环境改；上线前必须让用户确认。
- 用回归验收收尾：截图、链接、控制台错误、移动端、CTA 五项都要有结果。
- 棘轮化：把本次发现的问题固化成检查项，下一版继续跑，不能越改越坏。
工作流
第一步：冻结现状
用浏览器工具截取：
- 桌面 1440px 全页截图
- 移动端 390px 全页截图
- 首屏截图（用于 before/after 对比）
同时记录：
- 页面标题、meta description
- 主要 CTA 的数量和位置
- 现有链接、表单、图片
第二步：冻结基线并自动审计
python scripts/audit_page.py --url "https://example.com" --out baseline.json
先把改版前的审计结果保存为基线。审计输出包含：
- HTTP 状态、最终 URL、重定向、HTML 体积、加载耗时
- 标题、meta description、viewport、lang、canonical、robots、OG/Twitter
- H1/H2/H3 层级、图片 alt、链接、表单控件、CTA 候选
- head 阻塞脚本、内联脚本/样式体积、JSON-LD
- 每条问题带
id / severity / message / evidence，汇总为 high/medium/low heuristic_score只是规则扣分，不是 Lighthouse 分数，不得当作性能测评结果
可选：
# 只检查公开链接，最多 20 个，HEAD 请求，6 并发
python scripts/audit_page.py --url "https://example.com" --check-links --out baseline.json
# 改版后与基线对比；新增 high 问题或丢失 viewport/表单时退出码为 2
python scripts/audit_page.py --url "https://example.com" --baseline baseline.json --out after.json
# 有 high 问题时退出码为 1，适合 CI
python scripts/audit_page.py --url "https://example.com" --strict
第三步：设计审计
至少覆盖：
- 信息层级：首屏是否一眼看懂“你是谁、做什么、为什么选你”
- 排版：字号阶梯、行宽、留白、中文断行
- 色彩：主色/强调色是否过杂，对比度是否足够
- CTA：是否只有一个主行动，位置是否在首屏和滚动节点
- 信任：案例、客户、资质、评价是否可见
- 移动端：按钮尺寸、横向溢出、文字截断
输出格式：
问题 → 证据（截图/元素/数据） → 影响（转化/信任/可读性） → 建议
第四步：给 2—3 个方向
每个方向说清：
- 风格关键词
- 保留什么、改什么
- 预期效果
- 实现成本/风险
让用户选一个再动手；不要一次性把三个方案都实现。
第五步：实现
- 在副本/分支/预览环境改
- 优先改结构、排版、CTA、信任区，不要只换颜色
- 保留原有 URL、表单 action、埋点和 SEO 字段
- 不引入不必要的重型依赖
第六步：回归验收（必须）
| 检查 | 通过标准 |
|---|---|
| 自动审计回归 | --baseline baseline.json 输出 regressions: []，退出码 0 |
| 桌面截图 | 1440px 全页无溢出、无遮挡 |
| 移动截图 | 390px 无横向滚动、按钮可点 |
| 链接 | 原有主要链接仍可访问，无 404；--check-links 无新增 broken |
| 控制台 | 无新增 JS 错误 |
| 表单 | 字段数量/name/action 未被破坏；不能有未加标签的输入框 |
| CTA | 首屏主 CTA 可见且可点击，cta_candidates 没有被误删 |
| SEO | title/meta description/canonical/viewport/lang 未被意外删除 |
| 可访问性 | 不新增图片缺 alt、表单无标签等 high 问题 |
| 性能 | 首屏图片不过大，无明显布局抖动；head 无新增阻塞脚本 |
| 回滚 | 保留原始文件/分支/备份 |
交付：
- before/after 截图
- 修改清单
- 回归检查表（含
regressions/changes） - 自动审计 JSON（baseline 与 after）
- 上线/回滚说明
能力边界
- 只做公开页面的静态 HTML 审计；不执行页面 JS，不替代浏览器渲染、Lighthouse 或真实设备测试。
heuristic_score是规则扣分，不是性能/SEO 评分；对外汇报必须写清这一点。- 不绕过登录、付费墙、验证码；不抓取非公开数据。
- 视觉判断仍需桌面/移动截图和真实浏览器；没有截图证据时，明确说“未做视觉回归”。
--check-links只探测页面里出现的前 N 个 HTTP(S) 链接，不递归爬站。
失败回退
- 页面需要登录：只做公开页面审计，不绕过登录
- 无法运行浏览器：至少用
audit_page.py+ HTML/CSS 静态审查，并明确说明未做视觉回归 - 改版后表单/链接异常：立即回滚到备份，不带着问题上线
- 用户只想要“更快出图”：改用设计类 Skill，不要假装做了完整改版
