Skip to content

AI 开发者提示词:主页标签屏幕

上下文

您正在为 MysticX Expo 移动应用构建 (tabs)/index 屏幕。 屏幕目标: 主仪表板。功能包括用户问候、快速访问塔罗师、醒目的“询问卡牌”输入框(引导至 AI 牌阵选择)、最近问题的水平滚动列表、“每日一牌”横幅,以及最近的占卜历史。 仪式模块化(“数字祭坛”): 将此主屏幕视为一个可定制的“数字祭坛”。用户应该感觉到他们正在组装自己的仪式元素(例如,每日抽牌、冥想日志)。使用基于小组件的、模块化的布局方法。 AI 副驾驶: AI 助手应该感觉像是一个主动的“博学导师”,而不是普通的聊天机器人。UI 应该根据用户的历史记录,巧妙地提供符合语境、富有同理心的建议。

线框图与布局参考

请基于 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) 且视觉效果惊艳。