AI Developer Prompt: 入门与认证屏幕
Context
你正在为 MysticX Expo 移动应用构建 (onboarding)/* and (auth)/* 屏幕。 Screen Goal: 欢迎流程。分为 4 步入门(欢迎、仪式、功能、开始使用),引导至登录/注册界面。外观必须呈现极致的高级感以转化用户。
Wireframe & Layout Reference
请基于 wireframes 的结构流程来进行该屏幕的布局。UI 应该感觉宽敞且原生,避免拥挤的 web-view 布局。
Design System Rules (Strict)
应用程序必须遵循 Mystical Minimalism & Velvet Noir 设计理念。
1. Colors & Backgrounds
- OLED Noir Base: 背景必须是适合 OLED 的深黑色 (
#000000)、午夜深蓝 (#0a192f) 或浓郁的深紫色。绝不要使用平淡的灰黑色。 - Ethereal Glaze: 对于导航元素、悬浮操作栏或模态背景,请使用
expo-blur创建磨砂、半透明的深度感。 - Accents: 使用 Antique Gold (
#c5a059) 作为主要的交互元素。对于活跃状态,使用极细的金属边框或微妙的霓虹发光(青色、紫水晶色)。
2. Typography
- Headers: 使用高对比度、优雅的 Serif 字体 (例如,
Playfair Display)。 - Body: 使用干净的 Sans-Serif 字体 (例如,
Inter)。 - Spacing: 对于任何长篇阅读文本,强制最小行高为
1.6。
3. Interactions & "The Ritual"
- Haptics: 导入
expo-haptics。为每一个按钮点按、卡片滑动或列表滚动添加微妙的触觉反馈。 - Animations: 使用
react-native-reanimated。不要使用标准的 React NativeAnimated。 - "Slow UI": 过渡应该刻意且不慌不忙。避免瞬间的猛跑。对卡片操作使用
ease-out-back弹簧物理效果,赋予它们"重量"感。 - Loading: 取消默认的旋转加载器。使用低于 0.1Hz 的发光"光环"脉冲。
Task
编写此屏幕的 React Native (Expo) 代码。确保使用 react-native-reanimated 制作动画,使用 expo-haptics 提供触摸反馈,并严格按照上述 OLED Noir 主题设置样式。确保代码模块化、类型完善(TypeScript),且视觉上令人惊艳。