DeepSeek ArtifactsDeepSeek Artifacts

心理健康应用功能解析

4.0
zh
健康与健身
心理健康
应用功能
AI助手

提示语


### 🟩 **1. Splash Screen**

* **Logo + Tagline**
  *“MindCare – feel better live better*
* Loading animation.

---

### 🟦 **2. Onboarding Slides (3 screens, swipeable)**

**Slide 1:**

> *“Take control of your mental well-being.”*
> Illustration: Calm user meditating.

**Slide 2:**

> *“Talk to experts, join support groups, or just vent in a safe space.”*
> Illustration: Therapist talking to client.

**Slide 3:**

> *“Private. Secure. In Arabic. Anytime, anywhere.”*
> CTA: "Get Started"

---

### 🟩 **3. Sign Up / Log In Screen**

* Options:
  ✅ Sign up with email
  ✅ Continue with Google
  ✅ Already have an account? Log in

---

### 🟦 **4. User Profile Setup**

* Choose:
  ▪ Gender
  ▪ Age range
  ▪ Mental health goals (ex: anxiety, sleep, stress relief)
  ▪ Preferred therapy mode: Text / Video / Home Visit
  ▪ Select Language: (Arabic / French / English)

---

### 🟩 **5. Home Dashboard**

* Navigation bar (bottom):
  🧠 AI Helper | 🧍 Therapist | 🤝 Group | 📚 Content | 👤 Profile

* Main sections:
  ▪ "Talk to your AI Supporter"
  ▪ "Upcoming session with Dr. Yasmine"
  ▪ "New content for you today"
  ▪ "Join a live support room"

---

### 🟦 **6. AI Helper (Smart Assistant)**

* Chat interface with your 24/7 AI support

* Prompts:
  “I feel anxious.”
  “I want a breathing exercise.”
  “What does a panic attack feel like?”

* Options:
  ▪ Start mental scan
  ▪ Request a coping technique
  ▪ Schedule a session with therapist

---

### 🟩 **7. Book a Therapy Session**

* List of verified therapists (with specialties)

* Filters: gender, availability, language

* Book:
  ▪ Video session
  ▪ Audio call
  ▪ In-home visit (if city allows)

* Payment page
  ▪ Use credits or card
  ▪ Apply promo code

---

### 🟦 **8. Group Support Rooms**

* Live & scheduled themed sessions:
  ▪ “Anxiety Warriors”
  ▪ “Sleep & Calm Circle”
  ▪ “Divorce & Heartbreak Support”

* Features:
  ▪ Chat & mic on/off
  ▪ Moderated by psychologists
  ▪ Anonymous option

---

### 🟩 **9. Interactive Exercises**

* Daily recommended tasks:
  ▪ Mood journaling
  ▪ Guided breathing
  ▪ CBT reflections
  ▪ Positive affirmation builder

* Progress bar and badges for streaks

---

### 🟦 **10. Mental Health Library**

* Categories:
  ▪ Anxiety
  ▪ Depression
  ▪ Mindfulness
  ▪ Relationships
  ▪ Burnout

* Format:
  ▪ Short videos
  ▪ Podcasts
  ▪ Articles (Arabic dialect & MSA)

---

### 🟩 **11. Notifications & Reminders**

* “Your therapist appointment starts in 30 minutes.”
* “Time to check in with your mood.”
* “A new article on work stress is available.”

---

### 🟦 **12. Profile & Settings**

* Edit profile
* Session history
* Privacy settings
* Subscription management
* Language & theme

---

### 🟩 **13. Emergency Help**

* Red button: “Need urgent help?”
  ▪ Quick self-soothing techniques
  ▪ Call emergency number
  ▪ Crisis lines by country

生成结果

import React from 'react';
import './App.css';

const App = () => {
 return (
 <div className="App bg-gradient-to-r from-blue-100 to-green-100 min-h-screen p-5">
 {/* Splash Screen */}
 <div className="text-center py-20">
 <img src="https://placehold.co/100x100" alt="Logo" className="mx-auto mb-4" />
 <h1 className="text-3xl font-bold text-gray-800">MindCare</h1>
 <p className="text-gray-600">feel better live better</p>
 <div className="mt-4 w-24 h-1 bg-green-500 mx-auto"></div>
 </div>

 {/* Onboarding Slides */}
 <div className="overflow-hidden rounded-lg shadow-lg bg-white mx-auto max-w-sm my-10">
 <div className="p-5">
 <h2 className="text-xl font-semibold mb-2">Take control of your mental well-being.</h2>
 <img src="https://placehold.co/300x200" alt="Meditating" className="w-full" />
 </div>
 </div>

 {/* Sign Up / Log In Screen */}
 <div className="bg-white rounded-lg shadow-md p-5 max-w-sm mx-auto my-10">
 <button className="w-full bg-blue-500 text-white py-2 px-4 rounded-lg hover:bg-blue-600 transition duration-300 mb-3">Sign up with email</button>
 <button className="w-full bg-red-500 text-white py-2 px-4 rounded-lg hover:bg-red-600 transition duration-300 mb-3">Continue with Google</button>
 <p className="text-center text-gray-600">Already have an account? Log in</p>
 </div>
 </div>
 );
};

export default App;

更多推荐

查看全部