全站视觉体检 · 第 1 轮
视觉能自动优化吗：能，但不是一键全好
审计对象：ltdlt.cn 全站 6299 个页面 · 线上真实渲染采样 6 个高频页
2026-10-22 01:40 · 数据来源：线上 CSS/HTML 静态扫描 + 手机视口计算样式实测
结论：表面不一致（颜色 / 字号 / 圆角 / 按钮形态）可以自动归一，约占问题量七成；版式结构和交互集成不能自动，必须改模板和逐页过。
现有底子是够的——全站已有一份 1211 行的设计系统（ui.css），令牌齐全：6 档字号、8px 栅格、2 档阴影、3 种渐变。问题不是没标准，是页面根本没在用这个标准：990 个公开页里，引用品牌色令牌的页面数为 0，字号令牌引用 0 次。所有样式都写死在各自页面里，注入层只能靠 !important 硬拽，结果是两套标准互相打架。
一、按钮：同一个动作，五种长相
手机端实测（390×844 视口，线上真实渲染），“马上付钱”这类主按钮在各页的参数：
| 页面 | 按钮 | 高度 | 圆角 | 字号 |
|---|
| 首页 | .sec-cta-btn | 44px | 0px（方角） | 13.5px |
| 首页 | .gb-entry-btn | 59px | 16px | 16.5px |
| 首页 | .form-submit | 62px | 999px | 17px |
| 甜柿 | .btn | 44px | 999px | 15px |
| 结伴详情 | .tg-buy-btn | 54px | 11px | 16px |
| 结伴详情 | .cta-btn | 50px | 999px | 15px |
| 商家 | .cj-btn | 54px | 999px | 16px |
同一个首页首屏里就有三套按钮：方角 44px、圆角 16px 的 59px、胶囊 62px。用户感知就是“这站不像一个人做的”。
全站 130 种 btn / cta 类名写法；.cta-btn 一个类在页面里被反复重定义 15961 次——因为它是详情页模板，复制了 5300 多份。
二、颜色：五个页面五套正文色
首页正文#333333
结伴详情#4a5a4f
资讯#666666
甜柿#22301f
商家#18212e
系统里定义的正文本色是 #1f2b21（--c-ink），五个页面没有一个用它。资讯页还夹着 #3f7a3f、#1b5e20 这类外来绿，和品牌绿 #1a5c1a 并排出现，同一屏能看到三种绿。
更麻烦的是“外来色系”：Material 的靛蓝 #3949ab、青绿 #00897b、正红 #d32f2f、砖红 #c0392b，各自散布在 2246 / 2246 / 2248 / 2320 个页面里。它们不在设计系统里，也不该出现在这个品牌下。
三、格式：没有级阶，全凭手感
| 项目 | 标准 | 实际 | 判断 |
|---|
| 字号 | 6 档 | 56 档（含 9 / 10.5 / 11.5 / 13.8 / 20.8px） | 失控 |
| 圆角 | 4 档 | 28 种写法，实测 0/2/9/10/11/12/13/14/16/18/20/22/50%/999 | 失控 |
| 间距 | 8px 栅格 | 309 种组合，44% 不是 4 的倍数 | 失控 |
| 阴影 | 2 档 | 341 种写法 | 失控 |
| 图标 | 统一图标 | emoji 当图标 8010 次 | 偏弱 |
| 对比度 | ≥4.5:1 | 45 处不合格 / 14 个文件 | 待修 |
首页用了 11.5px 字号 504 次——比系统最小档 12px 还小，手机上就是“灰蒙蒙一片小字”。甜柿页有 20.8px、23px 这种非整数，说明是随手写的。
四、集成：组件不成体系，交互靠原生弹窗
- 样式入口不统一：0 个页面引用设计令牌；27778 处内联 style；靠 nginx 注入硬兜底。
- 两条链打架：全站 4878 次 !important（ui.css 81、mobile.css 21，其余全在页面里）。单页最高 1113 次（detail/jieban_372.html）。
- 原生弹窗：alert 5959 次、prompt 4765 次、confirm 22 次。没有统一 toast，没有表单错误提示容器（0 个）。
- 表单无标签：82 个含表单页面里只有 27 个有 label（32%）。
- 可访问性：172/287 个顶层页没有 h1；2250 张图缺 alt；tabindex 使用 0 次。
- 僵尸变量：4 个 CSS 变量被引用但从未定义（--c-bg 等），整条属性静默失效。
- 页面重量：zixun.html 单页 1.5MB、页高 129085px、1915 处内联样式——一页顶一个中型网站。
- 工程化：无 eslint / stylelint / prettier，无构建；6299 页靠手改与脚本打补丁。
根因：三条，不是审美问题
1
设计系统是“注入”的，不是“被使用”的
页面先写自己的样式，ui.css 后加载来兜底，只能靠 !important 抢。改成“页面用令牌”才是正解，但 990 页不可能手改——所以必须走归一化层或模板重生成。
2
详情页是复制出来的 5309 份
一个模板的毛病被复制了五千多次（!important 1113 次那页就是样本）。改一份没用，得改生成器再重跑。
3
没有“出厂检查”
现在只有对比度守卫（每天 04:35）和布局巡检，都是事后报警，不拦新页面。所以每做一个新页，就多一套按钮和颜色。
方案：三档推进，先自动、后人工
A 档 · 全自动（不改一个页面，只加一层“归一化”样式）立即可做
- 新建 ui-fix.css，排在 ui.css 之后注入，只做四件事：颜色归一、字号归一到 6 档、圆角归一到 4 档、主按钮统一（44px 高 / 999px 胶囊 / 15px 字）。
- 映射按实测高频值来：
#333/#444/#4a5a4f → --c-ink、11.5/13.5/14.5px → 12/13/15px、0/11/13/22px → 8/12/999px。
- 外来色系（#3949ab / #00897b / #d32f2f / #c0392b）在公开页强制落到品牌色阶。
- 预计消掉：色值种类 1790 → 约 60，字号 56 → 6，圆角 28 → 4，按钮形态 5 套 → 1 套。
风险控制：只在公开页生效；先灰度 6 个抽样页对比截图；不碰内部管理页；反色环境下不用纯色遮罩（沿用现有铁律）。
B 档 · 模板级（改一次，五千页生效）半天
- 详情页模板：把 5309 个 detail 页的内联样式收进模板头，按钮改用统一类，重跑生成器。
- zixun.html 瘦身：1915 处内联 style 提到样式表，页高与体积砍一半以上。
- 弹窗组件：alert / prompt 统一替换为站内 toast 与表单行内错误提示。
- 表单：补齐 label、必填标识、错误提示三件套。
C 档 · 逐页人工（19 个对客重点页）按页排
- 首页、资讯、甜柿、结伴详情、商家、路线、温泉、民宿、秋游、活动、文化、避暑、白莲、招聘、专题落地页。
- 只改版式与信息层级：首屏主张、卡片节奏、留白、CTA 唯一性。不动老板定过的东西（九宫格、管理门户卡、语音已撤）。
“自动升级”怎么长期跑
1
每晚体检（已有 cadence，接上即可）
04:35 布局巡检 + 对比度守卫之后，跑一次归一化差异扫描：这次新冒出多少种色值、几个新按钮类、几处低于 4.5:1。
2
白名单自动应用，红名单只报不改
颜色/字号/圆角/按钮形态属白名单，自动归一；版式、支付流程、内部页属红名单，只出截图和待办，绝不动。
3
早上出一页日报
昨晚改了什么、动了几个页面、哪些还没修、今天建议动哪 3 页。数字说话，不用问。
4
上线前门禁
新页必须过：令牌使用率 > 0、按钮只允许 1 种主形态、对比度 ≥4.5:1、无新增外来色。不过不给上线。
不建议做的事
- 不建议让程序“自由发挥”改版式——历史上每次自作主张都被打回。自动只做参数归一，不动结构。
- 不建议一次性全站替换硬编码颜色——5309 个详情页有权限锁和运行时数据，盲改会锁死写入。
- 不建议再新增一套设计系统——现有 ui.css 够用，缺的是落地层，不是第二套标准。