impeccable adapt 命令实战指南把设计响应式重构成为每个上下文重想体验【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable本文以 impeccable 设计技能中的adapt命令参考文档.kiro/skills/impeccable/reference/adapt.md为主体骨架结合仓库内的命令路由、native 变体与落地示例展开。核心立场是自适应adaptation不是缩放scaling而是针对新上下文重新思考体验。读完本文你将掌握从评估源上下文到制定移动/平板/桌面/打印/邮件策略、再到用断点、容器查询、clamp()、env()安全区、srcset响应式图片等真实手段落地的完整工作流并了解 impeccable 如何把这条流程收口到polish最终打磨。一、adapt 在 impeccable 命令体系中的定位在 impeccable 的命令表中见 skill/SKILL.src.md 的 Commands 表adapt属于Fix修复类别一句话职责是Adapt for different devices and screen sizes为不同设备与屏幕尺寸做适配。它的参考文档分两份面向Web含移动端 Web的本文档.kiro/skills/impeccable/reference/adapt.md面向NativeiOS / Android / adaptive的 .kiro/skills/impeccable/reference/adapt.native.md。命令元数据skill/scripts/command-metadata.json 中的adapt条目进一步明确了触发场景Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility.也就是说当用户提到响应式设计、移动布局、断点、视口适配、跨设备兼容时impeccable 就会路由到本命令。同时路由规则强调如果项目是 Nativeios/android/adaptive应立即切换到 adapt.native 参考本文件只适用于 Web。这与live、内置 HTML 规则检测器等工具Web-only的边界是一致的。adapt的目标语境是可交付给用户直接使用的其他上下文版本而不是把当前界面推倒重来它要求补齐的额外上下文是target platforms/devices and usage contexts目标平台/设备与使用语境。二、评估自适应挑战Assess Adaptation Challenge动手前先理解要适配什么、为什么适配。整个评估分三问从文档看是一个严格的递进结构1. 识别源上下文Source context它最初是为谁设计的桌面 Web移动 App它做过哪些隐含假设大屏鼠标输入快速网络在当前上下文里哪些表现良好这些是要保留的优点2. 理解目标上下文Target context需要从六个维度全面提问维度需要澄清的问题设备 Device移动、平板、桌面、电视、手表还是打印输入方式 Input method触控、鼠标、键盘、语音还是手柄屏幕约束 Screen constraints尺寸、分辨率、方向横竖屏网络 Connection快速 Wi-Fi、慢速 3G、还是离线使用语境 Usage context移动中还是桌前快速一瞥还是专注阅读用户期望 User expectations该平台上用户默认期待什么样的交互3. 识别自适应挑战Adaptation challenges什么放不下内容、导航、功能什么用不了触屏上没有 hover 态、过小的触控目标什么不合适把桌面模式搬上移动端、或把移动模式搬上桌面端CRITICAL关键红线Adaptation is rethinking the experience for the new context, not scaling pixels——自适应是面向新上下文重新思考体验而不是缩放像素。这句话是全文档的方法论基石也是后续所有策略的判据。三、制定上下文适配策略Plan Adaptation Strategy评估完成之后文档按目标上下文给出了五组策略。注意每一组的对象都是布局 / 交互 / 内容 / 导航四个层面的系统性改造而不是单一 CSS 技巧。移动端适配桌面 → 移动布局策略单列替代多列垂直堆叠替代并排全宽组件替代固定宽度底部导航替代顶部/侧边导航。交互策略触控目标最小44×44px不依赖 hover在合适处使用滑动手势列表、轮播用底部弹层Bottom sheets替代下拉菜单拇指优先设计控件落在拇指可达范围更大的点击区域与更多间距。内容策略渐进式披露不要一次性全展示优先展示主内容次要内容收进 Tab/手风琴文本更短更精炼文字更大16px 下限。导航策略汉堡菜单或底部导航降低导航复杂度粘性头部提供语境返回按钮纳入导航流程。平板适配混合方案布局策略采用两列而非单列或三列侧栏放次要内容主从视图Master-detail列表 详情根据方向自适应横屏 vs 竖屏。交互策略同时支持触控与指针触控目标仍 ≥44×44px但允许比手机更紧凑的密度侧边抽屉导航合适时用多列表单。桌面适配移动 → 桌面布局策略多列布局用好横向空间侧边导航常显多信息面板同时呈现固定宽度 max-width约束不要拉伸到 4K。交互策略用 hover 态承载附加信息键盘快捷键右键上下文菜单合适的拖放Shift/Cmd 多选。内容策略前置更多信息减少渐进式披露多列数据表格更丰富的可视化更详细的描述文字。打印适配屏幕 → 打印布局策略在逻辑位置分页移除导航、页脚与交互元素转黑白或受限配色为装订预留合理边距。内容策略展开被压缩的内容显示完整 URL、展开隐藏区块加页码、页眉、页脚包含元数据打印日期、页面标题把图表转成适合打印的版本。邮件适配Web → Email布局策略窄宽度最大 600px仅单列内联 CSS不能依赖外部样式表表格布局保证邮件客户端兼容性。交互策略大而醒目的 CTA按钮而非文字链接不依赖 hover不可靠复杂交互用深链跳回 Web App。一个通用的判据NEVER 清单在规划与实施时无论哪个方向都必须避开以下禁区源自文档 IMPLEMENT/VERIFY 章节的明确禁令移动端隐藏核心功能如果它重要就要让它可用假设桌面 高性能设备要考虑无障碍与老机器在不同上下文间使用不同的信息架构会造成混乱打破平台用户期望移动用户期待移动模式忘记移动/平板的横屏方向盲目套用通用断点应该用内容驱动的断点桌面端忽略触控很多桌面设备带触屏。四、系统化实施自适应Implement Adaptations响应式断点Responsive Breakpoints选择合适断点文档给出两条路线按设备Mobile 320–767px / Tablet 768–1023px / Desktop 1024px按内容推荐在设计开始崩坏的地方设断点content-driven breakpoints。更完整的三档参考值见本文第六节的 responsive 深层参考640 / 768 / 1024px通常够用能用clamp()做流式取值的地方就不必设断点。布局自适应技术Layout Adaptation TechniquesCSS Grid / Flexbox让布局自动重排reflow容器查询Container Queries基于容器而非视口去适配clamp()在最小与最大之间的流式尺寸媒体查询Media queries为不同上下文提供不同样式Display 属性按上下文显隐元素。impeccable 自身落地示例即是佐证在 demos/landing-demo/index.html 中主视觉、区块标题均用font-size: clamp(48px, 7vw, 88px)、clamp(36px, 4.5vw, 52px)这类写法实现无断点的流式排版字号随视口在最小与最大之间连续伸缩正是本节clamp() 替代硬断点的实际应用。触控自适应Touch Adaptation增大触控目标44×44px 下限增大交互元素间距移除依赖 hover 的交互增加触控反馈涟漪、高亮考虑拇指热区底部比顶部更易触达。内容自适应Content Adaptation慎用display: none元素仍会下载渐进增强移动端先给核心内容大屏再叠加增强离屏内容懒加载响应式图片srcset、picture元素。导航自适应Navigation Adaptation移动端把复杂导航转为汉堡/抽屉移动 App 用底部导航栏桌面端保持常显侧边导航小屏用面包屑提供上下文。IMPORTANT务必在真实设备上测试。DevTools 的设备模拟有帮助但并不完美。五、验证与收口Verify Adaptations适配是否成功要以真实环境为准跨上下文全面测试真实设备真机、真平板、真桌面不同方向竖屏与横屏不同浏览器Safari、Chrome、Firefox、Edge不同系统iOS、Android、Windows、macOS不同输入触控、鼠标、键盘边界情况极小屏320px、极大屏4K慢网络在限速网络下测试。这背后对应的正是 impeccable 的闭环工作方式参见 skill/reference/polish.md 中的说明先按表面的代表性尺寸把功能真实用一遍——Web 至少覆盖桌面与移动Native 则覆盖所发布的设备类别——再判断功能路径是否完整、达到的质量标准与真实约束是什么。收口交接当适配在每个上下文中都感觉像原生native to each context时把工作交给/impeccable polish做最终一轮打磨。polish 的原则是精修绝不偷偷重设计Polish is refinement, never concealed redesign它负责在既有视觉世界上修正缺失 token、一次性实现、概念错配与局部缺陷。六、深层参考响应式设计Responsive Design Reference文档末尾将原独立的responsive-design.md内容内联进来作为 adapt 流程的深度响应式参考与正文形成互补。这些内容是把 adapt 做对的底层依据。6.1 移动优先写对方向Mobile-First从移动端基础样式开始用min-width查询向上叠加复杂度。若反其道用桌面优先max-width移动端会先加载一堆用不到的样式。这一点与第三节桌面 → 移动中的移动策略互为印证——移动优先本质上是渐进增强的 CSS 表达。6.2 断点内容驱动Content-Driven Breakpoints不要追逐设备尺寸列表让内容告诉你该在哪里断从窄开始一直拉伸到设计崩坏在那里加断点。三档断点640 / 768 / 1024px通常就够纯流式取值优先用clamp()可以完全免掉断点。6.3 检测输入方式而不只看屏幕尺寸Detect Input Method屏幕尺寸并不能告诉你输入方式有带触屏的笔记本也有带键盘的平板。要用指针与悬停查询pointer / hover media queries/* 精细指针鼠标、触控板 */ media (pointer: fine) { .button { padding: 8px 16px; } } /* 粗糙指针触控、触控笔 */ media (pointer: coarse) { .button { padding: 12px 20px; } /* 更大的触控目标 */ } /* 设备支持 hover */ media (hover: hover) { .card:hover { transform: translateY(-2px); } } /* 设备不支持 hover触屏 */ media (hover: none) { .card { /* 不使用 hover 态——改用 active */ } }Critical不要把功能建立在 hover 上。触屏用户根本无法 hover。这也解释了前文触控自适应中移除 hover 依赖交互的设计动机——它是一条可被media (hover: none)直接执行的 CSS 策略。6.4 安全区处理刘海屏Safe Areas现代手机有刘海、圆角与 Home 指示条。使用env()读取系统安全区body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } /* 带降级写法 */ .footer { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }并在 meta 标签中开启 viewport-fitmeta nameviewport contentwidthdevice-width, initial-scale1, viewport-fitcover6.5 响应式图片做对Responsive Imagessrcset配合宽度描述符img srchero-800.jpg srcset hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w sizes(max-width: 768px) 100vw, 50vw altHero image 工作原理srcset列出可用图片及其真实宽度w描述符sizes告诉浏览器图片最终显示宽度浏览器综合**视口宽度与设备像素比DPR**挑选最优文件。用picture做艺术指导Art Direction当你需要不同裁切/构图而不仅是不同分辨率时picture source media(min-width: 768px) srcsetwide.jpg source media(max-width: 767px) srcsettall.jpg img srcfallback.jpg alt... /picture6.6 布局适配模式Layout Adaptation Patterns导航三段式移动端汉堡 抽屉 → 平板端紧凑横向 → 桌面端带文字标签的完整导航表格转卡片移动端用display: blockdata-label属性把表格重排为卡片渐进式披露用details/summary承载可在移动端折叠的内容。6.7 测试不要只信 DevToolsTestingDevTools 设备模拟对布局有用但会漏掉真实的触控交互真实的 CPU/内存约束网络延迟模式字体渲染差异浏览器 chrome 与键盘弹出外观。至少测试一台真实 iPhone、一台真实 Android、相关时加一台平板。便宜的安卓机最能暴露模拟器上看不见的性能问题。七、从文档到项目证据链本指南的核心方法论全部出自.kiro/skills/impeccable/reference/adapt.md而它可以进一步对接到仓库中这些可验证的事实命令路由adapt 归入 Fix 类别、Web-only、Native 走 adapt.native 的分流逻辑见 skill/SKILL.src.md 的 Commands 表与 Routing 段落无参数路由规则见 skill/reference/routing.md。命令元数据adapt 的触发关键词responsive design、breakpoints、viewport adaptation、cross-device compatibility 等记录在 skill/scripts/command-metadata.json。Native 变体平板不拉伸、方向与折叠屏、iOS↔Android 习语对照表Tab bar↔Navigation bar、Action sheet↔Bottom sheet、SF Symbols↔Material Symbols 等详见 .kiro/skills/impeccable/reference/adapt.native.md其内部还要求遵守 ios.md 与 android.md 的平台规范。polish 交接适配完成后进入最终打磨polish 的修缺陷而非换世界原则见 skill/reference/polish.md。落地示例clamp()流式排版的真实用法见 demos/landing-demo/index.html主标题clamp(48px, 7vw, 88px)、区块标题clamp(36px, 4.5vw, 52px)等。质量基线无论做多少适配设计都不能低于 impeccable 的 craft-floor 质量底线相关内容见 skill/reference/craft-floor.md。八、避坑清单与全文小结文档在结尾处给出一行最终Avoid清单值得作为收尾检查项避免桌面优先设计Desktop-first用设备检测代替特性检测Device detection instead of feature detection维护独立的移动/桌面两套代码库忽略平板与横屏假设所有移动设备都很强大。综上impeccable 的adapt是一条先评估、再分上下文定策略、后系统化实施、最后真机验证并交接 polish的完整设计流程。它的全部技术要点可浓缩为三句话适应 ≠ 缩放任何方向的适配都要以重想新上下文中的体验为前提交互以输入方式为准用pointer/hover查询、env()安全区、44×44px 触控目标等手段响应真实能力而非仅响应像素断点由内容决定优先移动优先 min-width、clamp()流式取值、容器查询把断点用在设计真正崩坏之处。当每个上下文都显得浑然天成时把成果交给/impeccable polish收尾一条跨设备、跨上下文的自适应工作流就完整闭环了。【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考