Jack 09-21：「learn online for how to do mobile interface optimization, find skills that are relevant」

官网手机优化 · 打法 PLAN

这页只放「做什么、先做哪个、用哪个技能」。为什么这么做、出处、技能审查全文都在另一页：理由与出处（analysis）。本轮只学、只找、只记问题，官网一行没改，技能一个没装。

09-21 下午更新：五件已拍，开工了

你回的是「A install / B go write / C do all / D not sure / E your call」。A 和 B 已做完：accessibility、core-web-vitals 两个外部技能和自写的 mobile-web-check 都已进技能库主干并装好，走查脚本自测 14 项全过，拿线上官网复跑的数和上午一致。C 拆成 5 张会话卡片在你列表里（表单瘦身、/locations/ 第一屏、菜单点开才展开、小修、图片分档），点一下才开始跑。D 交给小修那张卡先查 git 历史。E 我定的是现在做，只做图片最重的三页。下面正文保持上午的原样。

结论和三个最大毛病

手机访客占四成，却只交了 26 份留资（访客留下联系方式的表单）里的 5 份。走查下来速度没问题（真访客手机首页 1.1 秒），卡人的是三样：第一屏没正事、表单又长又小、菜单两屏长。

① 留资表单在手机上太费劲

团餐表第一步就有 1.7 屏高（360×640 下 1109px）；订场日历的格子只有 57×32，时间列被右边裁掉、没有可横滑的提示；关闭按钮 21×30。对上数据：手机开表单的频率是电脑的一半，完成率 19% 对 30%。

② 第一屏被「家具」占掉三成

导航 + 面包屑 + 数据带（导航下面那条 Fleet / Cups / Locations 统计条）加起来 190~211px，小屏上占 30~33%。/locations/ 第一屏一家店都看不到，店铺列表在 1.5 屏以下；它偏偏是全站第二大入口，71% 的人只看这一页就走，全站最高。

③ 点不准、看不清

汉堡菜单一打开 27 个链接全摊开，2 屏长；页脚链接高 32px、订场页「DIRECTIONS」高 18px 且在 360 宽被裁掉；首页有 156 处小于 12px 的字（最小 9.5px）；40 条悬停样式没有一条只给鼠标。

好消息也记一笔。版面：五页两个尺寸都没有横向滚动条，没有禁缩放，版面抖动为 0。表单：输入框已是 16px，带自动填充。速度：真实访客手机首页 1.1 秒打开，比电脑快一倍。

13 条打法（按回报从大到小）

每条 = 做什么 · 官网上对的是哪一屏 · 用哪个已装技能干 · 怎么算做完。「技能」= 装在 Claude 里的一份做事规程，点名就会照着干。impeccable 是其中管界面质量的那个，后面的 audit / adapt / distill / harden / optimize / polish 是它的六个分步（查问题 / 适配屏幕 / 删减 / 补边角 / 提速 / 收尾）。设计规矩照旧：极简、不加特效；要动版式的地方，到时每节出 2~3 个样子让你挑。

表单第一步压到一屏以内

做什么: 第一步只留「不填就没法报价」的 2~3 个格，其余挪第二步或改选填；弹层关闭按钮放大到 44px；订场日历给横滑提示或改成一次一天竖排。
官网例子: /catering「Plan your event」弹层（第一步含日期、人数、城市、公司、服务方式、口味六组）；/reserve「Check dates」日历。
技能: impeccable · distill / harden（表单细节 11 个已装技能全员空白，见第 8 条和自写技能）
做完标准: 360×640 上第一步不用滚就能看到「继续」按钮；所有可点的格子 ≥44px。

每页第一屏必须出现这页的正事

做什么: 手机上把数据带（Fleet / Cities / Timezones）压成一行或挪到正文后；面包屑并进标题区。目标：导航以下的「家具」不超过屏高 10%。
官网例子: /locations/ 360×640：第一屏是标题 + 「Book an event」+ 地图图例，三家店一家没露。
技能: impeccable · adaptminimalist-ui
做完标准: /locations/ 第一屏至少露出第一家店的名字和「去这家」；门店页第一屏露出地址 + 导航按钮（现已达标，保持）。

汉堡菜单改成「六行 + 点开才展开」

做什么: 默认只显示六个页签；带子项的那行右边放一个 ▾ 按钮，点了才展开（手风琴）。Stores 排第一。展开用真正的 <button aria-expanded>。
官网例子: 全站汉堡菜单：现在 27 个链接全摊开，内容高 1319px，640 高的屏要滚两屏多；「Stores」排在第三组。（Products 页签 09-21 已拍板暂藏，上线后会少 6 行，但结构问题还在。）
技能: impeccable · adapt；展开动效如果要，用 animate 先过「该不该动」那一关
做完标准: 360×640 上菜单打开不用滚就能看到全部一级页签；每行 ≥44px；读屏软件（给看不见的人念屏幕的）能读出「已展开 / 已收起」。

能点的东西一律 ≥44px，绝不小于 24px

做什么: 用内边距把热区撑大，字不用变大。先修主路上的：汉堡 40→44、页脚链接 32→44、「DIRECTIONS」18→44、「Check dates」38→44、面包屑 14。
官网例子: /reserve 三家店那一排；全站页脚（每页 22~25 个不达标）。
技能: impeccable · audit → adapt（11 个里唯一写了 44 / 48 这两个数的）
做完标准: 走查脚本报「小于 24」= 0，「24~44」只剩正文里的行内链接。

字要在太阳底下也看得清

做什么: 手机上等宽小标签不小于 12px，正文不小于 16px；字压在照片上必须垫一层底。
官网例子: 首页 156 处 <12px（「// Backed by」9.5px）；/locations/palo-alto 375 宽时店名正好压在照片里的招牌字上，360 宽时顶上那行小字被数据带切掉一半。
技能: impeccable · polishminimalist-ui
做完标准: 走查脚本报 <12px 的字 = 0；压图文字对比度 ≥4.5:1（这是下限）。

图片按屏幕大小给，不拿 2400px 的图填 95px 的格子

做什么: 每张图出 480 / 960 / 1600 三档，写 srcset + sizes；都写上宽高；首屏以下的加 loading="lazy"，首屏那张不许加。
官网例子: /reserve 一进页面下载 5.7MB 图片（9 张全是 2400px、无宽高、无懒加载），慢网下首屏图要 28 秒；/locations/palo-alto 2.5MB、12 张无宽高；全站 0 处 srcset。
技能: impeccable · optimize（出图可以接在已有的图片放大流水线后面）
做完标准: 手机上每页首次下载 <1.5MB；图片全部带宽高。

悬停效果只给有鼠标的设备

做什么: 所有 :hover 包进 @media (hover:hover) and (pointer:fine)；手机上用按下态（:active）给反馈。
官网例子: 首页 40 条、其余各页 23~30 条悬停规则，0 条有这层保护，手机点一下高亮会粘住。
技能: emil-design-enganimate（两个都明写了这条）
做完标准: 走查脚本报「未保护的 hover」= 0。

表单把手机键盘用对

做什么: 已经对的保持（16px、autocomplete 28 处、电话已是 type=tel、原生日期）。要补：全文件 0 处 enterkeyhint（中间格写 next、最后一格写 done）；还剩 1 处 type=number，非计算用的数字改成 inputmode=numeric；错误在离开格子时提示，不在打字中途；如果做粘底按钮，iPhone 上必须用 visualViewport 兜底（那行新 meta 在 iPhone 上还不生效）。
官网例子: 六张留资表共用的 lead-forms.js；合作表 26 次放弃里 22 次停在 city 那一格。
技能: 已装技能全员空白 → 自写技能补（见下）
做完标准: 六张表每个格子在真 iPhone 上弹出的键盘都对得上内容。

弹层和菜单的三条规矩

做什么: ① 弹层里滚到头不带着后面页面一起滚（overscroll-behavior: contain）；② 打开时后面内容设 inert，读屏和键盘出不去（留资弹层已经这么做了，菜单照着补）；③ 关闭按钮 ≥44px，手机「返回」能关。
官网例子: 汉堡菜单（现在是默认值 auto）；团餐 / 订场弹层（弹层本身不滚，靠整页滚，1109px 高）。
技能: impeccable · harden
做完标准: VoiceOver 打开菜单后左右滑，焦点不会跑到菜单后面。

小屏（360×640）首页第一屏：只记账，不重做

做什么: 你 09-16 已拍「首页第一屏保持现状」。这条只在第 2 条压数据带时顺手受益：数据带从 142px 压到一行，就能吃掉 09-17 记下的那 71px 超高。
官网例子: 首页 360×640：导航 69 + 数据带 142 = 211px，占屏 33%。
技能: impeccable · adapt
做完标准: 首页那条「第一屏正好铺满一屏」的自动检查（FS-1b）在 360×640 也通过。

手机动效：只留位移，给视频留退路

做什么: 七屏滚动动效已经只动位移（对的），保持；不加模糊、不加视差。iPhone 省电模式会禁自动播放：video.play() 被拒时留在封面图上，别露出播放按钮。原生滚动动画（Safari 一年前已支持）先不迁，现在这套没出毛病。
官网例子: 首页 hero 视频（你 09-13 拍过「先不动视频」，这里不动它，只补退路）。
技能: animateapple-design（只用它的减少动态那段）
做完标准: 真 iPhone 开省电模式，首页第一屏是一张干净的封面图。

测法固定下来：脚本过两个尺寸 + 真机摸一遍

做什么: 改手机版式的卡，收工前跑一次走查脚本（375×812、360×640，走 http 不走 file://，Chromium + WebKit 各一遍）；发版前在真 iPhone 上摸三样：地址栏收放、键盘弹出、省电模式。浏览器设备模式和 Playwright 的 WebKit 都不等于真 iPhone。
官网例子: 本次走查用的就是这个脚本：5 页 × 2 尺寸约 4 分钟，不花钱，挡掉了所有写入请求，没污染访客数据。
技能: 自写技能自带；真机步骤 emil-design-eng 里有
做完标准: 脚本进官网仓库 site/tests/，能一条命令跑。

每月拿真人数据对一次账

做什么: PostHog 里 09-20 建的那块看板（⑨ How visitors actually use the site）里按手机 / 电脑分开看：开表单率、完成率、逐屏滚到哪。回放筛「手机 + 连点」看人卡在哪。优先级跟着数据走，不跟着感觉走。
官网例子: 基线（09-20）：手机开表单 6.7%、完成 19%；首页滚到底 17%。
技能: 无需技能
做完标准: 第 1~3 条上线两周后，手机完成率有没有从 19% 往 30% 靠。

走查问题清单（只记不修，这就是第一份待办）

线上生产，真浏览器，375×812 和 360×640，五页各过一遍。红框 = 走查脚本标出的「小于 44px 的可点区域」。

P1 · /locations/ 第一屏看不到店

导航 69 + 面包屑 + 三行数据带 = 210px（33%）。店铺列表从 937px 才开始。

对应打法 2

locations 360x640 首屏 — /locations/ · 360×640

P2 · 汉堡菜单 27 个链接全摊开

菜单内容高 1319px：812 高的屏要滚 1.8 屏，640 高的屏 2.3 屏。父级「Partner / Products」是灰字，看着像标题不像能点。汉堡按钮 40×40。

对应打法 3、9

P3 · 团餐表第一步 1109px 高

页面上写「Two short steps, ~30 seconds」，第一步实际有六组。关闭按钮 36×36。好的部分：输入框 16px、44px 高、有标签、有自动填充。

对应打法 1、8

P4 · 订场日历：格子小、右边被裁

时间格 57×32，店铺页签高 31，关闭 × 只有 21×30。时间列在右边被切掉，没有任何「可以横滑」的提示。30 天里开日历 6 次、选到格子 3 次。

对应打法 1、4

P5 · 门店页：店名压在招牌字上；小屏顶行被切

375 宽：「Yummy Future Bay」正好叠在照片里的立体招牌上。360 宽：「// 01 · PALO ALTO…」那行被数据带盖掉上半截。

对应打法 5、2

P6 · /reserve 三家店：「DIRECTIONS」高 18px，360 宽时出屏 4px

「Check dates」38px 高。这是订场页的主按钮。

对应打法 4

P7 · 全站页脚：链接高 32px，挤成一团

每页 22~25 个不到 44px 的可点区域，绝大多数在这里。上下两行之间没有间隙，容易点错行。

对应打法 4

P8 · 首页 360×640：导航 + 数据带占 33%

数据带三格各排成两三行，高 142px。字 11px。首页共 156 处 <12px 的字。另：首页手机上 logo 只显示「Future」，别的页是「Yummy Future」，见待拍 D。

对应打法 10、5

P9 · /reserve 一进来就下 5.7MB 图

首屏图 747KB、2400px 宽，显示宽度 375。慢网（1.6Mbps）+ 慢机（4 倍降速）下首屏图 28 秒才出来。同条件下门店页 7 秒、团餐页 4.6 秒、首页 3.8~7.6 秒。

⚠ 这些是实验室里模拟慢网量的。真访客首页手机只要 1.1 秒。/reserve 访客少，没有足够真人样本。对应打法 6

P10~P12 · 没有截图可配的三条（代码层面）

P10 悬停样式 0 条受保护：首页 40、/locations/ 27、门店页 30、团餐 23、订场 23。

P11 图片无宽高：首页 10 张、门店页 12 张、订场页 9 张（目前 CLS 仍是 0，属于隐患不是事故）。

P12 汉堡菜单滚到头会带着后面页面滚（overscroll 是默认值）；好的部分：打开后页面不滚、焦点进了菜单、aria-expanded 会变。

装哪些技能（推荐单）

结论：已装的 11 个界面类技能（animate、apple-design、design-md-library、design-taste-frontend、emil-design-eng、frontend-design、high-end-visual-design、impeccable、industrial-brutalist-ui、minimalist-ui、redesign-existing-projects）里真正管手机的只有 impeccable 一个半；网上没有一个现成技能能补上「手机表单 + 我们自己的走查脚本」这个缺口，建议自己写一个小的。

档	技能	一句话理由
已装 · 主力	impeccable	唯一写了 44/48 触控数、安全区、手机导航、速度门槛、读屏的。走 audit → adapt → optimize → harden。
已装 · 配角	animate、emil-design-eng、apple-design、minimalist-ui	前三个只管动效那一层（悬停保护、减少动态、真机测法）；minimalist-ui 管基调，跟「极简」最对路。
已装 · 这活别用	high-end-visual-design、industrial-brutalist-ui	跟「极简、不先堆特效」正面冲突；前者通篇讲动效却 0 次提「减少动态」。design-taste-frontend 能用但默认动效档位偏高，用时要手动调到最低。
推荐装	addyosmani/web-quality-skills 里的 accessibility 和 core-web-vitals	作者是 Chrome 团队出身的 Addy Osmani；纯文字清单，不联网、不带脚本、不挑框架。补两样：WCAG 2.2 跟手机有关的新条款（24px 目标、粘顶导航不许挡焦点）；「先看真人数据、没证据不许说某指标挂了」这条纪律，正好配我们的 PostHog。
可装可不装	同仓库的 performance；testdino-hq/playwright-skill；kylezantos/responsive-craft；vercel web-design-guidelines；secondsky mobile-first-design	performance 跟 impeccable 的 optimize 重叠；playwright 那个 57KB 很全但官网仓库已有自己的测法；vercel 那个每次运行都去网上拉最新规则，等于审过一次不算数，规则可以抄、技能不建议装；secondsky 只有 2KB 且按设备定断点，跟「按内容定断点」相反。
别装	anthropics/skills 的 frontend-design；Leonxlnx/taste-skill；nylo-core mobile-design	第一个已装同名同内容；第二个跟已装的 design-taste-frontend 重复且写死 React；第三个是 Flutter 原生 App 的，文不对题。
没读到全文，不评	lackeyjb/playwright-skill 等 5 个	GitHub 限流没拉到正文，不猜。

安全审查：读过全文的 12 个候选都没发现可疑指令（没有上报数据、读密钥、curl | sh、要求关安全检查）。推荐装的两个我又单独把原文拉下来扫了一遍。star 数和最近提交日期是后台帮我检索的那个 AI 助手报的，我复核时被 GitHub 限流，未二次核实。一个都没装。

建议自己写的那个：mobile-web-check（大纲，等你拍，没建）

补的是两块空白：手机表单规则（11 个已装 + 12 个网上候选都没有）和一条命令的真浏览器走查（脚本本次已经写出来并在官网上跑通）。三段：先跑脚本出问题清单 → 按 13 条打法逐条对 → 需要动版式的转给 impeccable。完整大纲（触发语、步骤、检查清单、配套脚本）在 analysis 页。

当时等你拍的 5 件（已拍，见页顶）

A装不装 addyosmani 的 accessibility + core-web-vitals 两个技能？（建议装；怎么装你 09-21 已拍过：原样搬进技能库、钉住上游版本、带许可证，不用再问，只等你点「装哪几个」）

B写不写 mobile-web-check 这个自家技能？（建议写；约半天）

C先修哪批？建议一次开三张卡：表单瘦身（打法 1+8）、/locations/ 第一屏（打法 2）、菜单手风琴（打法 3+9）。其余小修（44px、悬停、字号）并成第四张。

D首页手机上 logo 只显示「Future」，其余页面是「Yummy Future」。故意的，还是该统一？

E图片分档（打法 6）要新出一套 480/960/1600 的图，动到 media 流水线。现在做，还是等 /reserve 有流量再说？

走查时间 2026-09-21，线上生产版本。脚本、原始数据、40 张原图在本会话临时目录，写技能时会搬进仓库。