用途:为 Expo / React Native 移动应用设计与实现屏幕、流程和界面,目标是让成品在手机上接近顶级原生应用的观感。核心方法是先研究再设计:借助 Appllama MCP 拉取同类真实上架应用的屏幕,研究 20–30 个后再写 UI 代码,提取布局骨架、信息层级、控件选择、间距节奏与主 CTA 位置等模式,而非照搬像素。
主要能力与要求:默认技术栈为 Expo + Expo Router、React Native、TypeScript,动效用 react-native-reanimated,手势用 react-native-gesture-handler,长列表用 FlashList,图片用 expo-image,媒体用 expo-video / expo-audio,安全区用 react-native-safe-area-context。规范涵盖语义色与明暗双主题、优先使用原生控件、SF Symbols / Material Symbols 图标、平台字体层级、连续圆角、boxShadow、间距节奏、安全区与灵动岛、导航标题、触觉反馈、数字格式化。动效方面要求每个动画有理由,手势动画走 UI 线程,优先弹簧动画,尊重“减弱动态效果”,目标中端设备 60 fps。状态架构建议服务端状态用 TanStack Query,客户端状态用 Zustand/Jotai,高频输入用非受控 TextInput。性能上使用骨架屏、FlashList、预加载与图片占位。
使用方式:按“实现 → 在 iOS 模拟器或 Android 模拟器启动 → 截图检查 → 验证动效 → 修复重验”的循环推进,不能只靠代码审查判定完成。每屏需通过完成度清单:明暗模式、安全区、长内容/空/加载/错误状态、动效、Dynamic Type XL、44pt 点击目标、对比度、资源风格统一、列表虚拟化等。
适用场景:移动端界面设计、屏幕与流程实现、原生质感打磨。限制:资料未提供具体安装命令、收费方式与平台支持细节;部分引用文件(如 references/performance.md 等)内容未在资料中展开。