用途
Adapt 是一个用于把已有设计适配到不同 Web 情境的技能，目标是在窄屏、中等宽度、宽屏、嵌入式或打印等环境下，仍然保持可用性、层级结构与目标尺寸。它适用于需要针对不同屏幕尺寸、设备、平台或使用场景重新调整设计的任务。
前置准备
用户通过 /adapt 启动该工作流。该技能激活后需加载 $frontend-design，其中包含设计原则、反模式以及情境收集协议，必须先遵循该协议；如果尚不存在设计情境，则必须先加载 $setup。此外还需收集目标平台/设备与使用情境信息。
文档同时提示在以下情况查阅对应参考：窄屏优先适配、流式行为与容器查询策略；当适配问题本质上是分组、节奏或宽度控制问题时查阅间距系统；当较小屏幕或受限情境放大了过多可见选项时查阅认知负荷相关内容。
评估适配挑战
需要先理解什么需要适配以及为什么。识别源情境：最初为何而设计（宽布局 Web 还是紧凑响应式 Web）、做了哪些假设（大屏、鼠标输入、快速连接）、当前情境下哪些部分运作良好。理解目标情境：视口/情境（窄、中、宽、电视、嵌入式、打印）、输入方式（触控、鼠标、键盘、语音、手柄）、屏幕约束（尺寸、分辨率、方向）、连接条件（快速 WiFi、慢速 3G、离线）、使用情境（移动中还是桌面、快速浏览还是专注阅读）、用户期望。识别适配挑战：哪些内容放不下（内容、导航、功能）、哪些做法行不通（触控上的悬停状态、过小的触控目标）、哪些不合适（窄布局中使用宽布局模式、粗指针情境中使用仅悬停模式）。文档强调适配不只是缩放，而是针对新情境重新思考体验，并把较小屏幕视为真实约束，而不是被挤压过的桌面布局。
规划适配策略
基本原则：先缩小画布，从更小的约束出发解决核心任务；把窄布局当作独立布局来设计，而不是按比例压缩宽布局关系；保留自然宽度，使用 max-width 与适合内容的宽度，而不是一味使用百分比；让大元素比小元素收缩得更快，因为关系会随断点变化。
窄布局适配（宽到紧凑）：布局上使用单列代替多列、垂直堆叠代替并排、组件按实际需要占宽而非默认全宽、使用紧凑导航而不是假定存在常驻顶部或侧边结构。交互上触控目标至少 44x44px 且不依赖悬停、在合适且可发现的前提下支持手势、空间紧张时用贴边或锚定浮层代替拥挤下拉、在紧凑触控布局中把重复操作放在可达区域、使用更大命中区域与更多间距。内容上采用渐进披露、优先展示主要内容（次要内容放入标签页/手风琴）、文本更精简、字号至少 16px。导航上提供清晰的紧凑入口（抽屉、手风琴、精简菜单）、降低导航复杂度、使用粘性头部提供上下文、在导航流程中提供返回按钮。
中等宽度适配：布局采用双栏而非单栏或三栏、用侧面板承载次要内容、主从视图（列表 + 详情）、根据方向（竖屏与横屏）自适应。交互上同时支持触控与指针、在允许比最窄视口更密集的同时保持宽松的目标尺寸、使用侧边导航抽屉、在合适处使用多列表单。
宽屏扩展：布局使用多栏以利用横向空间、侧边导航常驻可见、多个信息面板同时呈现、使用固定宽度并配合 max-width 约束（不要拉伸到 4K）、用列来重新平衡窄内容而不是让表单或阅读宽度过宽。交互上支持悬停显示补充信息、键盘快捷键、右键上下文菜单、合适处的拖放、Shift/Cmd 多选。内容上更多信息前置（减少渐进披露）、多列数据表、更丰富的可视化、更详细的描述。
打印适配（屏幕到打印）：布局上在逻辑位置分页、移除导航/页脚/交互元素、使用黑白或有限色彩、保留便于装订的页边距。内容上展开被缩短的内容（显示完整 URL、隐藏区块）、添加页码与页眉页脚、包含元数据（打印日期、页面标题）、把图表转换为适合打印的版本。
邮件适配（Web 到邮件）：布局宽度最宽 600px、仅单列、使用内联 CSS（不使用外部样式表）、使用基于表格的布局以兼容邮件客户端。交互上使用大且明显的 CTA（按钮而非文字链接）、不使用不可靠的悬停状态、复杂交互通过深链接回到 Web 应用。
实现适配
响应式断点可选择窄 320px-767px、中 768px-1023px、宽 1024px 以上，或采用内容驱动的断点（在设计发生断裂处）。
布局适配技术包括 CSS Grid/Flexbox 自动重排、容器查询按容器而非视口适配、clamp() 在最小与最大值之间进行流式尺寸控制、媒体查询为不同情境提供不同样式、用 display 属性按情境显示/隐藏元素、用 max-width 让表单、文本块与侧栏保持自然宽度直到视口迫使变化。
触控适配包括增大触控目标（至少 44x44px）、增加交互元素间距、移除依赖悬停的交互、添加触控反馈（涟漪、高亮）、考虑拇指区域（底部比顶部更易触及）。
内容适配包括谨慎使用 display: none（仍会下载）、渐进增强（核心内容优先，增强项在大屏提供）、对屏幕外内容懒加载、响应式图片（srcset、picture 元素）。
导航适配包括在窄布局把复杂导航转换为紧凑菜单、抽屉或手风琴结构；桌面端保持常驻侧边导航；较窄布局使用面包屑或紧凑上下文提示。文档强调要在真实设备上测试，而不仅依赖浏览器 DevTools，设备模拟有帮助但不完美。
禁止事项
文档明确列出：不得在窄布局隐藏核心功能（重要就必须可用）；不得假定桌面就等于高性能设备（需考虑可访问性与较旧机器）；不得在不同情境使用不同信息架构（会造成困惑）；不得在特定输入情境下破坏用户对响应式 Web 行为的预期；不得忘记窄屏横屏或中等宽度窗口状态；不得盲目使用通用断点（应使用内容驱动断点）；不得忽略桌面上的触控（许多桌面设备带触控）；不得把桌面关系按比例缩小就称之为响应式设计；不得在组件实际上并不受益于缩放时让其流式伸缩。
验证适配
需跨情境充分测试：真实设备（可触控浏览器、笔记本/桌面、相关受限硬件）、不同方向（竖屏与横屏）、不同浏览器（Safari、Chrome、Firefox、Edge）、不同操作系统（Windows、macOS、Linux、ChromeOS 以及相关的可触控浏览器环境）、不同输入方式（触控、鼠标、键盘）、边界情况（极小的 320px 屏与极大的 4K 屏）、慢速连接（限速网络）。文档提醒应作为响应式 Web 设计专家，让体验在每个 Web 情境中都显得适配良好，同时保持品牌与功能一致性，做到有意识地适配并充分测试。
限制
关于该技能的收费、价格、平台支持范围与具体效果，资料中暂未提供。