Back to Details

adapt

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese
Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases.
调整现有设计，使其在不同场景（不同屏幕尺寸、设备、平台或使用场景）下有效运行。

MANDATORY PREPARATION

必备准备步骤

Users start this workflow with 
/adapt
. Once this skill is active, load $frontend-design — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow that protocol before proceeding — if no design context exists yet, you MUST load $setup first. Additionally gather: target platforms/devices and usage contexts.
Consult the responsive reference for narrow-first adaptation, fluid behavior, and container-query strategy. Consult the spacing system when adaptation problems are really grouping, rhythm, or width-discipline issues. Consult the cognitive load when smaller screens or constrained contexts amplify too many visible choices at once.
用户通过 
/adapt
启动此工作流。激活该技能后，加载 $frontend-design —— 其中包含设计原则、反模式以及 Context Gathering Protocol。在继续操作前请遵循该协议 —— 如果尚无设计场景信息，必须先加载 $setup。此外还需收集：目标平台/设备和使用场景。
参考 响应式设计参考文档 获取窄屏优先适配、流式行为和Container Query策略相关内容。 当适配问题涉及分组、节奏或宽度规范时，参考 间距系统文档。 当小屏幕或受限场景导致同时显示过多选项，增加认知负担时，参考 认知负荷文档。

Assess Adaptation Challenge

评估适配挑战

Understand what needs adaptation and why:
  1. Identify the source context:
    • What was it designed for originally? (Wide-layout web? Compact responsive web?)
    • What assumptions were made? (Large screen? Mouse input? Fast connection?)
    • What works well in current context?
  2. Understand target context:
    • Viewport / context: Narrow, medium, wide, TV, embedded, print?
    • Input method: Touch, mouse, keyboard, voice, gamepad?
    • Screen constraints: Size, resolution, orientation?
    • Connection: Fast wifi, slow 3G, offline?
    • Usage context: On-the-go vs desk, quick glance vs focused reading?
    • User expectations: What do users expect on this platform?
  3. Identify adaptation challenges:
    • What won't fit? (Content, navigation, features)
    • What won't work? (Hover states on touch, tiny touch targets)
    • What's inappropriate? (Wide-layout patterns in narrow layouts, hover-only patterns in coarse-pointer contexts)
CRITICAL: Adaptation is not just scaling - it's rethinking the experience for the new context.
Treat smaller screens as real constraints, not as desktop layouts that got squeezed in the wash.
明确需要适配的内容及原因：
  1. 识别源场景:
    • 最初是为哪种场景设计的？（宽屏Web？紧凑响应式Web？）
    • 最初有哪些假设？（大屏幕？鼠标输入？高速网络？）
    • 当前场景下哪些部分表现良好？
  2. 理解目标场景:
    • 视口/场景：窄屏、中屏、宽屏、电视、嵌入式、打印？
    • 输入方式：触摸、鼠标、键盘、语音、游戏手柄？
    • 屏幕限制：尺寸、分辨率、方向？
    • 网络连接：高速WiFi、慢速3G、离线？
    • 使用场景：移动中 vs 桌面端、快速浏览 vs 专注阅读？
    • 用户预期：用户在该平台上的预期是什么？
  3. 识别适配挑战:
    • 哪些内容无法容纳？（内容、导航、功能）
    • 哪些功能无法正常工作？（触摸设备上的悬停状态、过小的触摸目标）
    • 哪些设计不合时宜？（窄屏中使用宽屏布局模式、粗指针场景中仅依赖悬停的模式）
关键提示：适配不只是缩放 —— 而是针对新场景重新思考用户体验。
将小屏幕视为真实限制，而非被压缩的桌面布局。

Plan Adaptation Strategy

制定适配策略

Create context-appropriate strategy:
创建符合场景的适配策略：

First Principles

核心原则

  • Shrink the canvas first: Start with the smaller constraint and solve the core task there
  • Design narrow layouts as their own layout: Don't just compress wide-layout relationships proportionally
  • Preserve natural widths: Use max-widths and content-appropriate widths instead of percentage worship
  • Let large elements shrink faster than small ones: Relationships change across breakpoints
  • 先缩小画布：从最小限制场景入手，解决核心任务
  • 将窄屏布局作为独立布局设计：不要只是按比例压缩宽屏布局的元素关系
  • 保留自然宽度：使用max-width和适合内容的宽度，而非盲目依赖百分比
  • 让大元素比小元素收缩更快：元素关系会随breakpoints变化

Narrow-Layout Adaptation (Wide → Compact)

窄屏适配（宽屏 → 紧凑屏）

Layout Strategy:
  • Single column instead of multi-column
  • Vertical stacking instead of side-by-side
  • Components should use the width they actually need; full-width is fine when helpful, not as a reflex
  • Compact navigation instead of assuming a persistent top or side structure
Interaction Strategy:
  • Touch targets 44x44px minimum (not hover-dependent)
  • Gesture support where appropriate and discoverable
  • Edge-attached or anchored overlays instead of cramped dropdowns when space is tight
  • Keep repeated actions in reachable zones for compact touch-capable layouts
  • Larger hit areas with more spacing
Content Strategy:
  • Progressive disclosure (don't show everything at once)
  • Prioritize primary content (secondary content in tabs/accordions)
  • Shorter text (more concise)
  • Larger text (16px minimum)
Navigation Strategy:
  • Clear compact navigation entry points such as drawers, accordions, or condensed menus
  • Reduce navigation complexity
  • Sticky headers for context
  • Back button in navigation flow
布局策略:
  • 采用单列布局而非多列
  • 垂直堆叠而非并排排列
  • 组件应使用实际所需的宽度；在有帮助时可以使用全屏宽度，但不要成为默认习惯
  • 使用紧凑导航，而非默认采用固定顶部或侧边导航结构
交互策略:
  • 触摸目标最小尺寸为44x44px（不依赖悬停）
  • 在合适且可发现的位置支持手势操作
  • 当空间紧张时，使用边缘附着或锚定的覆盖层，而非拥挤的下拉菜单
  • 在紧凑的触摸布局中，将重复操作放在易触及区域
  • 增大点击区域并增加间距
内容策略:
  • 渐进式披露（不要一次性显示所有内容）
  • 优先展示核心内容（次要内容放在标签页/折叠面板中）
  • 文本更简短（更简洁）
  • 文本更大（最小16px）
导航策略:
  • 清晰的紧凑导航入口，如抽屉、折叠面板或精简菜单
  • 降低导航复杂度
  • 粘性标题以保持场景上下文
  • 导航流程中加入返回按钮

Mid-Width Adaptation

中屏适配

Layout Strategy:
  • Two-column layouts (not single or three-column)
  • Side panels for secondary content
  • Master-detail views (list + detail)
  • Adaptive based on orientation (portrait vs landscape)
Interaction Strategy:
  • Support both touch and pointer
  • Preserve generous target sizes while allowing denser layouts than the narrowest viewport
  • Side navigation drawers
  • Multi-column forms where appropriate
布局策略:
  • 双列布局（非单列或三列）
  • 侧边面板用于展示次要内容
  • 主-详情视图（列表+详情）
  • 根据屏幕方向自适应（竖屏 vs 横屏）
交互策略:
  • 同时支持触摸和指针操作
  • 在保持足够目标尺寸的同时，允许比最窄视屏更密集的布局
  • 侧边导航抽屉
  • 合适时使用多列表单

Wide-Layout Expansion

宽屏扩展适配

Layout Strategy:
  • Multi-column layouts (use horizontal space)
  • Side navigation always visible
  • Multiple information panels simultaneously
  • Fixed widths with max-width constraints (don't stretch to 4K)
  • Use columns to rebalance narrow content instead of making forms or reading widths too wide
Interaction Strategy:
  • Hover states for additional information
  • Keyboard shortcuts
  • Right-click context menus
  • Drag and drop where helpful
  • Multi-select with Shift/Cmd
Content Strategy:
  • Show more information upfront (less progressive disclosure)
  • Data tables with many columns
  • Richer visualizations
  • More detailed descriptions
布局策略:
  • 多列布局（利用水平空间）
  • 侧边导航始终可见
  • 同时展示多个信息面板
  • 固定宽度并设置max-width限制（不要拉伸至4K分辨率）
  • 使用列来重新平衡窄内容，避免表单或阅读区域过宽
交互策略:
  • 悬停状态显示额外信息
  • 键盘快捷键
  • 右键上下文菜单
  • 必要时支持拖拽操作
  • 使用Shift/Cmd进行多选
内容策略:
  • 预先展示更多信息（减少渐进式披露）
  • 多列数据表格
  • 更丰富的可视化内容
  • 更详细的描述

Print Adaptation (Screen → Print)

打印适配（屏幕 → 打印）

Layout Strategy:
  • Page breaks at logical points
  • Remove navigation, footer, interactive elements
  • Black and white (or limited color)
  • Proper margins for binding
Content Strategy:
  • Expand shortened content (show full URLs, hidden sections)
  • Add page numbers, headers, footers
  • Include metadata (print date, page title)
  • Convert charts to print-friendly versions
布局策略:
  • 在逻辑位置设置分页符
  • 移除导航、页脚和交互元素
  • 黑白（或有限色彩）显示
  • 设置适合装订的边距
内容策略:
  • 展开缩短的内容（显示完整URL、隐藏部分）
  • 添加页码、页眉、页脚
  • 包含元数据（打印日期、页面标题）
  • 将图表转换为适合打印的版本

Email Adaptation (Web → Email)

邮件适配（Web → 邮件）

Layout Strategy:
  • Narrow width (600px max)
  • Single column only
  • Inline CSS (no external stylesheets)
  • Table-based layouts (for email client compatibility)
Interaction Strategy:
  • Large, obvious CTAs (buttons not text links)
  • No hover states (not reliable)
  • Deep links to web app for complex interactions
布局策略:
  • 窄宽度（最大600px）
  • 仅使用单列布局
  • 内联CSS（不使用外部样式表）
  • 基于表格的布局（确保邮件客户端兼容性）
交互策略:
  • 大而清晰的CTA（使用按钮而非文本链接）
  • 不依赖悬停状态（不可靠）
  • 复杂交互使用指向Web应用的深层链接

Implement Adaptations

实施适配

Apply changes systematically:
系统地应用更改：

Responsive Breakpoints

响应式Breakpoints

Choose appropriate breakpoints:
  • Narrow: 320px-767px
  • Medium: 768px-1023px
  • Wide: 1024px+
  • Or content-driven breakpoints (where design breaks)
选择合适的断点:
  • 窄屏: 320px-767px
  • 中屏: 768px-1023px
  • 宽屏: 1024px+
  • 或基于内容的断点（设计出现问题的位置）

Layout Adaptation Techniques

布局适配技巧

  • CSS Grid/Flexbox: Reflow layouts automatically
  • Container Queries: Adapt based on container, not viewport
  • clamp()
    : Fluid sizing between min and max
  • Media queries: Different styles for different contexts
  • Display properties: Show/hide elements per context
  • Max-widths: Keep forms, text blocks, and sidebars at natural widths until the viewport forces change
  • CSS Grid/Flexbox: 自动重排布局
  • Container Queries: 根据容器而非viewport进行适配
  • clamp()
    : 在最小和最大值之间实现流式尺寸
  • Media queries: 为不同场景应用不同样式
  • Display属性: 根据场景显示/隐藏元素
  • Max-widths: 在viewport强制改变前，保持表单、文本块和侧边栏的自然宽度

Touch Adaptation

触摸适配

  • Increase touch target sizes (44x44px minimum)
  • Add more spacing between interactive elements
  • Remove hover-dependent interactions
  • Add touch feedback (ripples, highlights)
  • Consider thumb zones (easier to reach bottom than top)
  • 增大触摸目标尺寸（最小44x44px）
  • 增加交互元素之间的间距
  • 移除依赖悬停的交互
  • 添加触摸反馈（波纹、高亮）
  • 考虑拇指操作区域（底部比顶部更易触及）

Content Adaptation

内容适配

  • Use 
    display: none
    sparingly (still downloads)
  • Progressive enhancement (core content first, enhancements on larger screens)
  • Lazy loading for off-screen content
  • Responsive images (
    srcset
    , 
    picture
    element)
  • 谨慎使用 
    display: none
    （元素仍会被下载）
  • 渐进式增强（先加载核心内容，在大屏幕上添加增强功能）
  • 懒加载屏幕外内容
  • 响应式图片（
    srcset
    、
    picture
    元素）

Navigation Adaptation

导航适配

  • Transform complex navigation into compact menus, drawers, or accordion structures on narrow layouts
  • Persistent side navigation on desktop
  • Breadcrumbs or compact context cues on narrower layouts
IMPORTANT: Test on real devices, not just browser DevTools. Device emulation is helpful but not perfect.
NEVER:
  • Hide core functionality in narrow layouts (if it matters, make it work)
  • Assume desktop = powerful device (consider accessibility, older machines)
  • Use different information architecture across contexts (confusing)
  • Break user expectations for responsive web behavior in a given input context
  • Forget narrow landscape or medium-width window states
  • Use generic breakpoints blindly (use content-driven breakpoints)
  • Ignore touch on desktop (many desktop devices have touch)
  • Scale desktop relationships down proportionally and call it responsive design
  • Make components fluid when they don't actually benefit from scaling
  • 在窄屏布局中将复杂导航转换为紧凑菜单、抽屉或折叠面板结构
  • 桌面端使用固定侧边导航
  • 在窄屏布局中使用面包屑或紧凑场景提示
重要提示: 在真实设备上测试，而不仅仅是浏览器开发者工具。设备模拟有帮助，但并不完美。
绝对禁止:
  • 在窄屏布局中隐藏核心功能（如果重要，就必须使其可用）
  • 假设桌面端设备性能强劲（考虑可访问性、老旧设备）
  • 在不同场景中使用不同的信息架构（易造成混淆）
  • 违背用户对特定输入场景下响应式Web行为的预期
  • 忽略窄屏横屏或中屏窗口状态
  • 盲目使用通用断点（使用基于内容的断点）
  • 忽略桌面端的触摸功能（许多桌面设备支持触摸）
  • 按比例缩小桌面端元素关系，却声称是响应式设计
  • 让组件流式缩放，却无实际收益

Verify Adaptations

验证适配效果

Test thoroughly across contexts:
  • Real devices: Test on actual touch-capable browsers, laptops/desktops, and constrained hardware where relevant
  • Different orientations: Portrait and landscape
  • Different browsers: Safari, Chrome, Firefox, Edge
  • Different OS: Windows, macOS, Linux, ChromeOS, and touch-capable browser environments when relevant
  • Different input methods: Touch, mouse, keyboard
  • Edge cases: Very small screens (320px), very large screens (4K)
  • Slow connections: Test on throttled network
Remember: You're a responsive web design expert. Make experiences that feel well-adapted to each web context while maintaining brand and functionality consistency. Adapt intentionally, test thoroughly.
在各场景下全面测试:
  • 真实设备: 在支持触摸的浏览器、笔记本电脑/台式机以及相关受限硬件上测试
  • 不同方向: 竖屏和横屏
  • 不同浏览器: Safari、Chrome、Firefox、Edge
  • 不同操作系统: Windows、macOS、Linux、ChromeOS，以及相关的触摸浏览器环境
  • 不同输入方式: 触摸、鼠标、键盘
  • 边缘案例: 极小屏幕（320px）、超大屏幕（4K）
  • 慢速连接: 在限速网络下测试
记住：你是响应式Web设计专家。要打造在每个Web场景下都适配良好的体验，同时保持品牌和功能一致性。有意适配，全面测试。