AI 开发提示:每日牌卡屏幕
上下文
你正在为 MysticX Expo 移动应用程序构建 card-of-day 屏幕。 屏幕目标: 每日仪式的独立屏幕。显示 3 张正面朝下的牌供用户挑选一张。高度强调触觉反馈和神奇的翻牌揭晓效果。
线框图与布局参考
请以 wireframes 中此屏幕的结构流程为基础进行布局。UI 应该感觉宽敞且具有原生感,避免拥挤的网页视图布局。
设计系统规则(严格)
应用程序必须遵循神秘极简主义与天鹅绒黑 (Mystical Minimalism & Velvet Noir) 理念。
1. 颜色与背景
- OLED 黑色基底: 背景必须是适合 OLED 的深黑色(
#000000)、午夜海军蓝(#0a192f)或浓郁的深紫色。千万不要使用平淡的灰黑色。 - 空灵釉面: 使用
expo-blur处理导航元素、浮动操作栏或模态框背景,以创造磨砂的、半透明的深度感。 - 强调色: 使用古金色(
#c5a059)作为主要交互元素。使用极细的金属边框或微妙的霓虹发光(青色,紫水晶色)表示激活状态。
2. 排版
- 标题: 使用高对比度、优雅的衬线体(例如
Playfair Display)。 - 正文: 使用干净的无衬线体(例如
Inter)。 - 间距: 对任何长篇的解牌文本强制执行
1.6的最小行高设置。
3. 交互与“仪式”
- 触觉: 导入
expo-haptics。为每一次按钮按下、卡牌滑动或列表滚动添加微妙的触觉反馈。 - 动画: 使用
react-native-reanimated。不要使用标准的 React NativeAnimated。 - “慢 UI”: 过渡应该是从容且不急躁的。避免瞬间贴合。为卡牌操作使用
ease-out-back弹簧物理效果,赋予它们“重量感”。 - 加载: 不要使用默认的旋转加载图标。使用低于 0.1Hz 的发光“光环”脉冲效果。
任务
为此屏幕编写 React Native (Expo) 代码。确保你使用 react-native-reanimated 实现动画,expo-haptics 实现触摸反馈,并严格按照上述 OLED 黑色主题进行样式设置。确保代码是模块化、类型定义良好(TypeScript)且在视觉上令人惊艳的。