让 Claude 帮你做移动端设计？先给它装上这份”规范宪法”

你让 Claude 画一个移动端页面，它给你输出一个”看起来像 app 但总差点意思”的界面——iOS 风格的返回按钮跑到了 Android 屏幕右下角，44pt 的点击区域不知不觉被压成了 32pt，字体用了一套系统里压根没有的 Roboto 替代品。

不是你 prompt 写得不够细，是 Claude 脑子里那份”iOS HIG + Material Design + 无障碍”的对照表，本来就不全。

直到这个 Skill 出现——Mobile App Design Standards。

它把 iOS Human Interface Guidelines、Android Material Design、WCAG 可访问性规范、React Native 跨平台实践，揉成了一份 5000 多词的”移动端设计宪法”。Claude 装上它以后，画出来的每一个组件都有规范可循。

它解决了什么问题？

做移动端产品最头疼的不是画图，是对齐规范。

• iOS 的返回按钮该放左上还是右上？
• 列表的点击区域是 44pt 还是 48dp？
• 字号最小能压到多少还能保证可读性？
• 颜色对比度 4.5:1 是 WCAG 的什么等级？
• FAB 什么时候该用，什么时候不该用？

这些问题，平时要么翻官方文档查半天，要么被设计 review 退回返工。Mobile App Design Standards 直接把这些规则打包进 Claude 的 context，遇到相关问题它会自动按规范判断。

它涵盖了什么？

平台原生规范：iOS HIG（44pt 触控目标、San Francisco 字体、左侧返回）、Material Design（48dp 触控目标、Roboto 字体、底部导航）、React Native 跨平台方案。

可访问性：WCAG 4.5:1 文字对比度、暗色模式适配、动态字体缩放、不靠颜色单独传达信息。

组件架构：Atomic Design 拆解（原子/分子/有机体/模板/页面）、容器组件 vs 展示组件的边界。

视觉细节：触控目标间距、字体最小尺寸、视觉层级、对比度边界条件。

谁适合装？

• 跨平台产品设计师，要在 iOS/Android 之间保持设计一致性
• 独立开发者，自己一个人扛设计 + 研发 + 验收
• 设计 review 容易被打回的团队——让 Claude 先按规范自查一遍
• 想学移动端设计规范的初级设计师，把这个当作速查手册

装上之后，最明显的变化是：你不用再每次都解释”为什么 iOS 要用 44pt”这种基础问题，Claude 会自己按规范出方案。

GitHub 上 64 颗星，是 awesome-skills 这个集合里专门做移动端的标准答案。

GitHub 链接：
https://github.com/awesome-skills/mobile-app-design

GitHub: https://github.com/awesome-skills/mobile-app-design