Mobile Design System Skill — AI skill for Claude Code

移动端设计系统与跨平台组件规范 AI Skill (Ludi Mobile Design System Skill)

**将 iOS HIG、Android Material 3 与移动端工程实战踩坑法则，转化为 AI 可执行的代码生成与审查约束。** 一套彻底终结“移动端代码直接照搬桌面表格、安全区被遮挡、软键盘弹起遮挡输入框、浮层滑动底层乱晃”的工业级设计系统资产。

[](LICENSE) []() []() []()

---

为什么需要这个 Skill？

在移动端（iOS / Android / 小程序 / 响应式 Web）开发与 AI 代码生成中，开发者常面临以下严重缺陷：

• 底部固定定位按钮（fixed bottom-0）没有避让 iPhone 全面屏的 Home Indicator，按钮被横条遮挡，用户点击时频繁误触滑回桌面；
• 在手机极窄屏幕上生搬硬套桌面端的多列大表格，导致页面发生灾难性的横向晃动；
• 点击靠下的输入框时，软键盘弹起直接盖住输入框，用户完全看不见自己输入的字符；
• 手机号或纯数字字段未配置 inputmode，手机弹出了全尺寸的英文键盘，用户必须手动切换到数字面板；
• 弹出了底部半屏抽屉，手指在抽屉里上下滑动时，抽屉没动，底层的整个主页面却在疯狂跟着晃动（滚动穿透）；
• 关闭小按钮只有 16px，按压失败率极高，缺乏 44pt 最小触控热区保证。

**根本原因：移动端拥有与桌面 Web 截然不同的物理触控法则、视口硬件边界与手势心智。**

本 Skill 将 iOS 与 Android 两大平台的设计规范、多分辨率倍率换算以及真实的移动工程避坑经验，提炼成 Agent、Claude Code、Cursor、Windsurf、Codex 可以直接遵循的 **“移动端 AI 可执行设计规则层”**。

---

核心能力与规范架构

1. 物理视口与安全区避让 (Safe Area Insets)

• 顶部状态栏避让（44–62pt）与底部 Home Bar 避让（34pt），全面屏标准声明 env(safe-area-inset-*)；
• 逻辑点（pt/dp）与渲染倍率（@2x/@3x/xxhdpi）严谨换算；
• 移动端 0.5px 精细微边框体系，解决 Retina 屏幕下 1px 粗笨失真的历史缺陷。

2. 触控热区与费茨法则 (Touch Target & Thumb Zone)

• iOS 最小可交互触控热区强制 $\ge 44 \times 44\text{pt}$，Android 强制 $\ge 48 \times 48\text{dp}$；
• 微小图标通过容器或 ::after 伪元素向外扩张触控面；
• 核心操作沉底至单手拇指自然舒适区，避免长臂大拇指频繁拉伸。

3. 软键盘防遮挡与精准映射 (Keyboard & Inputmode)

• 输入框聚焦自动居中平滑滚动（scrollIntoView({ block: 'center' })）；
• 容器底部预留至少 300px 缓冲垫高，杜绝 fixed 吸底按钮挤压遮挡；
• 精准映射 inputmode="tel"、numeric、email、search 以及短信验证码自动填充 one-time-code。

4. 底部半屏抽屉与滚动穿透锁死 (Bottom Sheet & Scroll Lock)

• 遵循 30% / 60% / 80% 三分屏高度标准阶梯；
• 顶部标配 36×4pt 拖拽指示条 (Drag Handle)，支持平滑下滑关闭；
• 浮层展开时通过 position: fixed 彻底锁死底层 Body 滚动穿透；
• 录入