Skip to content

AI 开发者提示词:我的 / 个人资料标签屏幕

上下文

您正在为 MysticX Expo 移动应用构建 (tabs)/profile 屏幕。 屏幕目标: 用户设置仪表板。显示等级徽章、积分、占卜次数。包含快速设置当前活跃的塔罗师和卡牌皮肤的功能。包含指向帐户、设置、订阅、积分和 AI 记忆的链接。

线框图与布局参考

请基于 wireframes 中该屏幕的结构流程进行布局。UI 应该感觉宽敞且具有原生感,避免拥挤的网页视图布局。

设计系统规则(严格)

应用程序必须遵循 神秘极简主义与天鹅绒黑 (Mystical Minimalism & Velvet Noir) 哲学。

1. 颜色与背景

  • OLED 纯黑基础色: 背景必须是适合 OLED 的深黑色 (#000000)、午夜深蓝 (#0a192f) 或浓郁的深紫色。绝不要使用扁平的灰黑色。
  • 空灵釉面: 对导航元素、浮动操作栏或模态框背景使用 expo-blur,以营造出磨砂的半透明深度感。
  • 强调色: 使用复古金 (#c5a059) 作为主要的交互元素。对于激活状态,使用极其纤细的金属边框或微妙的霓虹发光(青色、紫水晶色)。

2. 排版

  • 标题: 使用高对比度、优雅的衬线字体(例如,Playfair Display)。
  • 正文: 使用干净的无衬线字体(例如,Inter)。
  • 间距: 对任何长篇阅读文本强制使用至少 1.6 的行高 (line-height)。

3. 交互与“仪式感”

  • 触觉反馈 (Haptics): 导入 expo-haptics。为每一次按钮点击、卡牌滑动或列表滚动添加微妙的触觉反馈。
  • 动画: 使用 react-native-reanimated。不要使用标准的 React Native Animated
  • “慢 UI”: 过渡动画必须是从容且经过深思熟虑的。避免瞬间的生硬切换。对卡牌操作使用 ease-out-back 弹簧物理效果,赋予它们“重量感”。
  • 加载: 禁止使用默认的旋转加载指示器。使用频率低于 0.1Hz 的发光“光环”脉冲效果。

任务

编写此屏幕的 React Native (Expo) 代码。确保使用 react-native-reanimated 实现动画,使用 expo-haptics 实现触摸反馈,并且严格按照上述的 OLED 纯黑主题进行样式设计。确保代码模块化、类型严谨 (TypeScript) 且视觉效果惊艳。