mobile-design 是一个面向移动端 WebView 界面的设计工作规范，来自 Superwall 技能库。它解决的场景是：在手机 App 内通过 WKWebView 或 Android WebView 渲染的网页屏幕，例如付费墙、引导或问答流程、优惠页、更新页等。该技能强调，这类界面会被用户与周围原生界面直接比较，衡量标准是能否精确还原设计，以及是否遵循用户能感受到但说不出的平台惯例。
主要能力与做法：
- 设计参考就是契约。间距、尺寸、字重、颜色与效果都应来自参考稿，按逻辑点测量而非目测，完成后与参考并排对比。不得添加设计未展示的链接、徽章、脚注或控件；若怀疑缺失（如恢复购买入口、法律链接），应在对话中提出而非擅自加入界面。阴影、渐变、边框、模糊与圆角应属于设计系统，参考为扁平则做扁平。
- 统一骨架。原生屏幕有固定结构：顶部为主机状态栏留出内边距，其下为小型关闭或返回元素，内容在渐隐下滚动，主操作按钮固定在底部（home indicator 之上），其下为小型弱化链接。页面可滚动而主操作按钮不滚动；固定指 position: sticky; bottom: 0 作为页面最后一个子元素，并配从透明到页面背景的渐变使内容在背后淡出。安全区由宿主处理：在 Superwall 界面中框架为整屏加设备安全区内边距，开发者写普通 padding（不用 env()、不用 position: fixed）；普通 web view 则用 viewport-fit=cover 和 env(safe-area-inset-*)。
- 平台惯例。需先判断平台（Superwall 界面读取 html 上的 data-sw-platform；普通 web view 由 App 告知或读取 user agent）。iOS：关闭为右上或左上小圆形按钮（视觉约 30–32px，点击区 44px），sheet 通常无关闭按钮；返回是左上角 chevron；按钮圆角 12–16px 或全胶囊形、全宽、50–56px 高、文字 17px semibold，主操作按钮是屏幕上唯一填充按钮；使用系统字体并对展示字号做紧负字距；恢复购买、条款与隐私为 CTA 下方 13px 弱化文字链接。Android：关闭为左上 × 或 ←；硬件或手势返回通过 SDK 关闭付费墙，不能仅依赖自绘返回控件；全屏付费墙上状态栏绘制在其上方，导航栏不覆盖，webview 底部内边距为 0，因此固定 CTA 需自行加 12–16px 底部内边距；按钮为全圆角或 12px、48–56px 高、文字 16px medium，使用 Roboto 系统栈；涟漪是原生按压反馈，缩放按压缩放替代可接受且应比 iOS 更轻（0.98）；文案需注意平台差异，如“Cancel anytime in Settings”为 iOS 专用说法，跨商店时应改为 Google Play 或商店中立表达。Web：无状态栏、home indicator 与 SDK 界面元素，所有 inset 为 0；框架容器使用 100dvh，固定 CTA 位于 Safari 工具栏上方，自身尺寸不要用 100vh；键盘焦点真实存在，保留 :focus-visible；有鼠标，可设 hover 状态，桌面布局将手机宽度列居中（max-width: 28–34rem）。
- 触屏细节。点击目标 iOS ≥44×44pt、Android ≥48×48dp；视觉较矮控件可通过宽度、间距或内边距扩展命中区。每次有意义的点击通过宿主桥接触发触感反馈（Superwall 界面用 useHaptics()，其他用原生调用，普通 web 无），轻触用于导航和 CTA、选择用于选项、成功用于 transaction_complete、失败谨慎使用 error；触感与视觉变化在同一处理函数中触发。原生付费墙中抑制点击控件的焦点环，仅在真实键盘环境（Web）保留键盘焦点样式。控件设置 -webkit-tap-highlight-color: transparent、touch-action: manipulation、user-select: none；页面除用户可能想选择的文本（法律文本）外禁用选择；控件和装饰图片加 -webkit-touch-callout: none 避免长按弹出保存图片。反馈发生在按下而非松开，样式 :active，需要 JS 时响应 pointerdown 而非 click。所有 :hover 规则置于 @media (hover: hover) and (pointer: fine) 之后。不要用禁用控件表现“加载中”，购买反馈由商店弹层承担。整个选项行、整个页脚链接都是点击目标。横向轮播只占一个轴，优先原生滚动（overflow-x: auto、scroll-snap-type: x mandatory、overscroll-behavior-x: contain、scroll-snap-align: start）；JS 驱动滑动手势需 touch-action: pan-y。
- 表单与键盘。输入框至少 16px，避免 iOS 聚焦时缩放整页且失焦不恢复；修复靠字号而非 maximum-scale=1 或 user-scalable=no。按用途选择键盘：type="email"、type="tel"、inputmode="numeric" 用于验证码、inputmode="decimal" 用于金额；使用 autocomplete（email、given-name、one-time-code）、autocapitalize="none" 与 autocorrect="off" 用于邮箱和验证码、enterkeyhint 标明回车键功能。键盘会遮住屏幕底部，需在短屏手机上打开键盘检查字段与操作可达性。校验应在输入时或失焦时内联进行，消息来自文案目录而非字面量。
- 动效。任何动作前先说明目的：反馈、空间、状态或衔接；“好看”不是可反复点击控件的动效理由。只对功能性移动做动画（分段控件滑块、sheet 呈现、进度条填充、手风琴展开）；仅内容变化（文字、列表行、价格）原地更新。按压缩放是基线交互（iOS 约 0.96、Android 约 0.98，按下约 80ms、回落约 200ms），并配触感反馈。入场是少量惊喜预算所在：有参考按参考做，无参考时默认克制，标题与主视觉上移 8–12px 并淡入，列表行间隔 40–60ms 跟随一次，播放时不阻塞点击。所有入场以屏幕真正显示的时刻为门控，而不是挂载时刻，因为宿主会预加载。页面转场由路由统一负责，页面自身根元素不要做转场动画。
- 动效数值。内置 CSS 缓动太弱，需定义令牌：--ease-out: cubic-bezier(0.23, 1, 0.32, 1)；--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1)；--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1)。按压缩放 80ms 进约 200ms 出，选择变化 150–200ms，分段滑块、标签指示器与进度填充 200–300ms，sheet 或抽屉呈现 300–500ms，入场 300–450ms，仅颜色或透明度 150–200ms。UI 不用 ease-in；用户等待的动作保持在 300ms 以下。只对 transform 与 opacity 做动画。入场优先用 CSS 过渡以避开主线程；用 Motion 时动画完整 transform 字符串而非 x/y/scale 简写。动效性格需与产品匹配。每个 transition 写明属性，不用 transition: all。不使用从 scale(0) 开始；起始为 scale(0.95) 加 opacity: 0。用户一秒内可触发两次的动作使用过渡而非关键帧。退出镜像入场且更快。弹簧用于手指驱动（拖拽关闭 sheet、滑动切换），默认 bounce: 0，轻扫后才 ≤0.2，从当前屏幕位置与速度开始，可中途打断。减少动效偏好下用短透明度交叉淡化替代移动，保留解释状态的色彩与状态变化。
- 字体与渲染。默认系统字体栈：-apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif。html 设置 -webkit-text-size-adjust: 100%，抗锯齿平滑；正文 15–17px（17 对应 iOS 正文，16 对应 Android）；展示字号用 clamp() 以便在 320px 收缩、在平板停止增长。行宽手机上 45–65 字符；平板与桌面限制列宽。自定义字体需先子集化，仅发布 woff2，一个常规字族加一个等宽字体为预算。图像按手机屏幕压缩与设定尺寸。
适用场景：为移动 App 内的付费墙、引导、问卷、优惠、更新等 WebView 界面做设计与前端实现，或对已有界面按原生质感做审查。
限制与边界：该技能明确说明这些是工作实践而非法律，设计参考始终优先于其规则；资料未提供安装命令、代码库结构、版本要求、收费价格或效果数据，暂未提供。