范围:miniprogram-v2 全量(95 个页面目录 / 119 个 wxss / 112 个 wxml)
方法:①全量代码扫描 + WCAG 对比度计算(脚本/tmp/vi_audit.py)②真实渲染截图(miniprogram-automator 驱动微信开发者工具,cli auto --auto-port 9420,46/46 页全截,脚本/tmp/vi_shots.js)③深读 7 张代表版式:home / selection / hotel-booking / merchant-store(mid=8) / orders / profile / guide-article
方向对、底子好,但系统性差;金色可读性是当前最大实际风险。
24/8 叶形 373 处)+ 全站同一款轻阴影(285 处同值)——是一套有"高原手作/纸质感"识别度的方向,不是套模板的默认蓝。金色在两个属性场景的使用分布(94 个文件受影响):
| 场景 | 处数 | 判定 |
|---|---|---|
color:(文字色) | 494 | 🔴 全部不达标 |
border*(描边) | 223 | ✅ 描边可用金 |
background*(底色) | 144 | ⚠️ 底上配的字决定成败 |
| outline 等 | 30+ | — |
实测对比度(WCAG):
| 色组合 | on 纸白 #FBF7EE | on 纸底 #F5F1E8 | 判定 |
|---|---|---|---|
| 金 #C9A96E(现状文字色) | 2.09 | 1.99 | 🔴 |
| 深金 #7A5E28(建议文字色) | 5.68 | 5.39 | ✅ |
| 深金 #8A6D35(现有 gold-tint) | 4.55 | 4.31 | 🟡 大字可、正文临界 |
| 墨 #1C1713 | 16.63 | 15.77 | ✅ |
| 弱化文本 #96918A(现状) | 2.93 | 2.77 | 🔴 |
| 金底 + 纸白字(现状按钮) | 2.09 | — | 🔴 |
| 金底 + 墨字(建议) | 7.94 | — | ✅ |
修法(不动"主色=金"的裁定,只分工):金保留给背景/描边/图标/装饰;文字场景统一换深金;金底上的字换墨色。
--color-gold-text: #7A5E28(正文达标 5.68;#8A6D35 留给大标题场景)#1C1713(7.94)或深棕 #403B34(4.96)#96918A → 并入 --color-text-secondary #6B6259font-size 45 种取值(成熟系统 6–8 级);最高频 22rpx(807)/24rpx(463)/40rpx(298)/26rpx(218)…padding 467 种、margin 242 种(8pt 网格应 <20 种)旧页面变量(--red 931 次、--ink 529、--muted 342、--line 330、--paper 296、--white 252)与新 token(--color-* 92 种、5730 次引用)并行。能跑,但换主题必漏。
全量扫出 124 处裸 hex;排除 token 定义文件(vi-tokens 61 处=定义本身)与 .out/ 构建产物后,真实残留约 52 处:
pages/merchant-store/merchant-store.wxss 33 处(小冈新页未走 token;我 09-21 复验只查了语法/端点,未查色彩合规,漏了)app.wxss 14 处、styles/motion.wxss 5 处650 这种非标准值 3 处,属手滑;建议收敛 400/500/600/700 四档。
样例:fade-up、cta-primary、pc-grid、scene-art 等(部分是动效类,由 JS 动态添加,清理前需逐个核实,不能盲删)。
| # | 动作 | 工作量 | 效果 |
|---|---|---|---|
| 1 | 新增 --color-gold-text:#7A5E28,把 494 处 color: var(--red/--color-gold) 批量替换 | 小(脚本可批量) | 可读性硬伤清零 |
| 2 | 金底按钮/胶囊字 纸白→墨(144 处背景场景里筛出) | 小 | 按钮可读 |
| 3 | 弱化文本 #96918A → text-secondary | 小 | 次要信息可读 |
| 4 | merchant-store 33 处裸 hex 走 token(派小冈或我顺手修) | 小 | 新页合规 |
| 5 | 建 8pt 间距 token + 6 级字号 token,新代码先行、存量渐进 | 中 | 节奏统一 |
| 6 | 双轨合并:旧变量在 app.wxss 里指向新 token(--red: var(--color-gold-text)),全量改名二期 | 小起步 | 换主题不漏 |
| 7 | 死 class 逐个核实后清理 | 小 | 减维护面 |
它是一个有识别度、有性格的视觉方向(暖纸+金+叶形圆角),骨相是好的;现在的问题不是"丑",是"松"——金色当文字色用坏了(494 处不可读),间距字号没规矩(45 种字号/467 种内边距)。把这两件事修掉,它能从"有想法的草稿"变成"成体系的品牌视觉"。
超出预期的亮点:
merchant-store?mid=8 真机渲染全链路(真数据:地址/热线/简介/标签全在)——小冈 feat 的实锤。截图印证/新增的问题:
这套风格的"骨相"和"皮相"都在线:方向有性格、排印有水准、文案有温度;唯一的硬伤是金色文字的对比度(数据 494 处、图上肉眼可见)。把金色分工修掉(文字→深金 #7A5E28、金底字→墨),再把间距/字号收进规范,它就是一套可以对外讲的品牌视觉。
方法:8 张代表页截图(压缩 320px JPEG)通过团队 gpt-6-astra 通道(scripts/gpt6.sh同款 zhi-api 通道,vision 实测可用)做盲评——不喂我的诊断,只要它独立判断。原文/tmp/gpt6_review.md。
它下的判语比我的 v1.1 更狠、也更接近刘总的直觉("套了藏地配色的通用业务模板")。六大根源与我的诊断五点完全吻合(两个模型独立得出 ⇒ 高置信度):
| 病因 | 小齐(静态+截图) | gpt6(盲评) |
|---|---|---|
| 完成度断层/跨页无统一骨架 | ✅ 主因 | ✅ 根源①「跨页像多个模板拼接,缺共同骨架」 |
| 商品无图/内容素材弱 | ✅ | ✅ 根源⑥+整改3 |
| 金色滥用 | ✅ 每屏一焦点 | ✅ 整改2「金色只承担强调」 |
| 层级弱/小字墙 | ✅ 45 种字号 | ✅ 根源③「灰蒙蒙的小字墙」 |
| 组件不统一 | ✅ 两种错误态 | ✅ 根源④「控件彼此抢角色」 |
| 测试数据上屏 | ✅ | ✅ 根源⑥「编号式名称」 |
cli auto --project <路径> --auto-port 9420——IDE 的"服务端口"(59172,CLI/HTTP 用)与"自动化端口"(ws)是两个开关,后者须 CLI 显式开启。打通后 46/46 页一次全截成功(/tmp/vi_shots/)。wxml→HTML 自动转换与 screencapture 两条路确认不可行(还原度不足/无权限),弃用。IDE_PORT=9420 node /tmp/vi_shots.js(无参读 app.json 全量;可传具体路由如 pages/merchant-store/merchant-store?mid=8)。-- 署名:小齐