Adapt

什么时候用

/impeccable adapt 用来把为某一种环境做好的设计，调整到另一种环境里依然成立。桌面改移动端，移动端改平板，网页改打印，独立页面改嵌入容器，dashboard 改邮件。适合源设计本身没有问题，但一到其他断点、触控环境或不同容器里就散架的时候。

它不是从零开始做响应式。如果是新功能，先用 /impeccable 从一开始按 responsive-first 去塑形。Adapt 是给那种“我们当初根本没考虑过 mobile”的补救流程。

工作方式

这个技能会沿着四个维度检查上下文适配度：

1. 断点与流式布局：把多列收成单列，调整 clamp 范围，在设计真的断掉的地方新增断点。
2. 触控目标：最小 44px 命中区域，相邻目标之间留出足够间距，必要时让点击区大于视觉边界。
3. 导航模式：桌面侧栏改成移动端底部导航或抽屉，密集工具栏折进菜单，hover 状态补上触控等价行为。
4. 内容优先级：判断什么必须始终可见，什么可以折叠进 disclosure，什么在这个场景里可以彻底拿掉。

有一条不能退让的规则：adapt，不要 amputate。关键功能不能因为移动端不方便就直接消失。要么想办法塞进去，要么重做交互，要么重新判断它在桌面端是不是真的那么关键。

试试看

/impeccable adapt the settings page for mobile

预期会看到这些变化：

• 三列网格改成单列，分区标题变成 sticky 分隔线
• 侧栏导航移到内容上方，变成横向滚动条带
• 开关控件补上 8px 纵向 padding，满足 44px 触控目标
• 行内帮助文案从 hover 改成点按展开
• “Danger zone” 区块在移动端默认完整展开，因为里面是不可逆操作，需要让用户看得更清楚

常见陷阱

• 把功能砍掉。 如果移动端版本做不到桌面端能做的事，那是回归，不是适配。该保的功能要保住。
• 把 mobile 当成“小一号 desktop”。 移动端是另一种场景：拇指操作、随时被打断、会话更短。要适配场景，不只是视口宽度。
• 做完后不跑 /impeccable harden。 响应式布局最容易暴露边缘问题。Adapt 之后接 harden，才能抓到那些只在 320px 下才会出现的故障。