伊斯兰应用设计指南

4.0

2025/6/15

zh数字产品设计伊斯兰应用UX/UI设计数字产品

提示语

Act like a senior UX/UI writer and Islamic digital product designer. You specialize in creating rich, user-centric, multilingual Islamic applications for both mobile and web platforms.

Objective: Write a detailed, full-length product description for a comprehensive Islamic app designed for Muslims worldwide. The app should serve as a complete spiritual companion that includes the following core and advanced features:

Step-by-step:

1. Introduce the app as an all-in-one Islamic platform designed to support daily worship, learning, and spiritual growth.
2. Quran Section:
- Provide the full Quran with Uthmani script.
- Support auto-bookmarking (e.g., save current position like page 100 in Al-Baqarah).
- Include audio recitations by multiple qaris.
- Offer multilingual tafsir (explanation) per verse.
- Allow custom bookmarks, note-taking, and highlighting.

3. Nasheed Section:
- A categorized library of Islamic nasheeds with/without instruments.
- Offline download capability.
- Filter by mood, theme, and artist.

4. Athkar & Hadith:
- Daily azkar collections (morning, evening, prayer-based).
- Authentic Hadith collections searchable by topic.
- Notification reminders for morning/evening athkar.

5. Prayer Tools:
- Real-time prayer times based on GPS.
- Adjustable settings for madhhab and calculation methods.
- Adhan notifications with a choice of voices.
- Qibla direction using GPS and augmented compass.

6. Spiritual Features:
- Quran completion tracker with weekly/monthly goals.
- Dua Community: Users can request and share supplications.
- Motivational Islamic quote of the day (ayah/hadith/wisdom).
- Auto night/day reading modes based on device time.
- Font, size, and theme customization options.

7. Language and Accessibility:
- Full support for Arabic and English with one-tap toggle.
- Right-to-left layout for Arabic.
- Suitable for all ages with easy-to-read interface.

8. Platform Compatibility:
- Optimized for iOS, Android, and web.
- Clean, elegant design with fast performance.

9. Call to action:
- Encourage users to use the app daily for Quran, prayer, and Islamic guidance.
- Highlight its usefulness during Ramadan, Hajj, or everyday life.

Then:
- Write the entire product description in Modern Standard Arabic.
- Write the same version again in clear and inviting English.
- Both versions must reflect a professional, spiritual, and user-focused tone.

Take a deep breath and work on this problem step-by-step.

生成结果

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

function App() {
  return (
    <div className="App bg-gradient-to-tr from-green-100 to-blue-100 min-h-screen p-10">
      <header className="text-center py-5">
        <h1 className="text-4xl font-bold text-gray-800">Islamic Spiritual Companion</h1>
        <p className="text-xl text-gray-600 mt-2">Your all-in-one guide to daily worship, learning, and spiritual growth.</p>
      </header>

      <section className="my-10">
        <h2 className="text-3xl font-semibold text-gray-800 mb-5">Quran Section</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <div className="bg-white p-6 rounded-lg shadow-md">
            <h3 className="text-2xl text-green-800 font-bold">Uthmani Script</h3>
            <p className="text-xl text-gray-600 mt-2">Complete Quran with Uthmani script.</p>
          </div>
          {/* Repeat similar blocks for other Quran features */}
        </div>
      </section>

      {/* Repeat similar sections for Nasheed, Athkar & Hadith, Prayer Tools, Spiritual Features, Language and Accessibility, Platform Compatibility */}

      <footer className="text-center py-5 mt-10 border-t border-gray-200">
        <p className="text-sm text-gray-600">© 2025 Islamic Spiritual Companion. All rights reserved.</p>
      </footer>
    </div>
  );
}

export default App;

Open Sandbox