用途：面向复杂响应式布局的设计技能，强调响应式不是“在手机上放得下”，而是为单手、200% 缩放、平板强光等多种情境设计。当 ui-composition 定义的布局跨断点，或 design-critic 指出响应式问题，或构建比单列更复杂的布局时使用。
主要能力：断点策略由内容而非设备决定，从 320px 起步慢慢加宽，布局出现问题时即为断点，并按行为而非设备命名，示例变量包括 --bp-stack: 0、--bp-sidebar: 640px、--bp-columns: 900px、--bp-wide: 1200px。窄宽度下需决定内容优先级：保留、折叠到开关后、延后到下方、隐藏（最后手段），并记录这些决策。响应式排版提供 clamp() 示例：--font-size-body: clamp(1rem, 0.9rem + 0.5vw, 1.125rem)、--font-size-h1: clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem)；正文最小 16px，行宽 45-75 字符，200% 缩放时不得出现横向滚动。容器查询与媒体查询按用途选择：页面级布局用 @media，组件适配用 @container。触摸目标在移动端最小 44x44px，相邻目标间距至少 8px。
使用方式：遵循上述断点、优先级、排版与查询选择规则，并完成测试。交付物包括带理由的断点定义、各断点下的布局行为、内容优先级决策、含 clamp() 值的排版比例、触摸目标验证。
适用场景：跨断点的复杂界面设计、响应式问题修复。
限制：资料未提供更具体的平台或工具要求；需与其他技能配合，上游为 ui-composition、design-discovery，下游为 design-builder、accessibility-reviewer。