用途
Mobile-First Designer 是一个面向移动优先响应式设计的技能，提供专家级指导，帮助创建优先考虑可用性、性能与可访问性的设计，并确保其在所有设备上表现一致。其核心理念是：先针对移动端的约束进行设计，再逐步为更大屏幕做增强，从而保证在大多数用户日常依赖的设备上获得最佳体验。
主要能力
触控目标标准
- 交互元素（按钮、链接、输入框）最小尺寸为 44x44 像素（Apple HIG 标准）。
- 交互元素之间最小间距为 8px，防止误触相邻控件。
- 提供符合与不符合标准的 CSS 示例。
移动优先 CSS 架构
- 先编写移动端基础样式，再通过 min-width 媒体查询为更大屏幕增强。
- 关键断点（2025 标准）：320px、480px、768px、1024px、1280px、1920px。
- 提供基础样式与各断点增强的 CSS 示例。
排版标准
- 正文最小 16px（防止 iOS 输入聚焦时自动缩放）。
- 标题按比例缩放（正文的 1.25-2 倍）。
- 正文行高 1.5，标题 1.2-1.3。
- 每行最大 65 个字符以保证可读性。
响应式布局模式
- 流式网格系统：使用 Flexbox 与百分比布局，按断点调整列数。
- 响应式图片：使用 srcset、sizes 以及 picture 元素与现代图片格式（WebP、AVIF）。
导航模式
- 移动端汉堡菜单（适用于复杂导航），桌面端显示完整导航。
- 固定头部（sticky）在滚动时保持可访问。
性能优化
- Core Web Vitals 目标（2025）：LCP < 2.5 秒、FID < 100 毫秒、CLS < 0.1。
- 技术：图片懒加载、使用 aspect-ratio 防止布局偏移、使用 transform 优化动画。
PWA 增强
- 必需条件：HTTPS、Web App Manifest（manifest.json）、Service Worker 离线支持、添加到主屏幕提示。
- 提供 manifest.json 与 Service Worker 的基础代码结构。
无障碍标准
- WCAG 2.1 AA 合规：普通文本对比度至少 4.5:1，大文本至少 3:1。
- 键盘导航：所有交互元素可键盘访问，可见焦点指示器，逻辑 Tab 顺序。
- ARIA 标签与替代文本。
触控交互指南
- 避免依赖悬停的功能，改用点击/按压状态。
- 支持常见手势：滑动、下拉刷新、捏合缩放、长按。
- 提供触摸事件处理代码示例。
审查清单
涵盖布局与间距、排版、性能、导航、无障碍、触控交互、PWA 注意事项等维度的检查项。
常见错误与测试建议
- 列出应避免的模式：过小触控目标、桌面优先思维、忽略触控交互、固定宽度、缺少 viewport meta 标签。
- 建议在真实设备上测试，并列出浏览器 DevTools、性能测试、无障碍测试、跨浏览器测试等工具。
实施工作流
从移动端线框图开始，逐步构建移动优先 CSS、优化性能、添加触控交互、实现 PWA 功能、进行无障碍审计与跨设备测试。
使用方式
该技能以专家指导与规范审查的形式使用，提供标准、代码示例与检查清单，帮助开发者在设计与开发过程中遵循移动优先原则。具体调用方式与集成方法暂未提供。
适用场景
- 设计与开发移动优先的响应式网站或 Web 应用。
- 审查现有布局是否符合移动端可用性、性能与无障碍标准。
- 需要遵循触控目标、排版、断点、PWA 等具体规范的场景。
限制
- 资料未提供该技能的具体安装命令、运行环境或平台支持信息。
- 资料未提供收费、价格或授权方式信息。
- 资料未提供实际效果或性能提升的量化承诺。