# Master UI/UX Redesign Prompt — MicroLearning می‌خواهم UI/UX پروژه **MicroLearning** را به‌صورت کامل، حرفه‌ای و مرحله‌ای بازطراحی و ارتقا دهی. این پروژه یک پلتفرم سازمانی Microlearning است و UI آن باید حس یک **Enterprise SaaS / Learning Platform مدرن، مینیمال، سریع و حرفه‌ای** داشته باشد. هدف فقط زیباتر کردن صفحات نیست. هدف اصلی: * افزایش usability * کاهش cognitive load * بهبود information hierarchy * افزایش سرعت انجام کارها * یکپارچه‌سازی Design System * بهبود Builder Experience * بهبود AI Experience * بهبود Responsive Design * افزایش Accessibility * حفظ کامل RTL/LTR * ایجاد تجربه منسجم در کل محصول --- # قانون اجرای پروژه این پروژه UI باید دقیقاً در **۸ فاز** انجام شود. فازها: ```text PHASE 1 UI Audit + Design System PHASE 2 App Shell + Navigation PHASE 3 Dashboard + Home Experience PHASE 4 Course Builder UX PHASE 5 AI Studio UX PHASE 6 Management Screens PHASE 7 Learner + Responsive Experience PHASE 8 Dark Mode + Accessibility + Final Polish ``` هر Phase را جداگانه انجام بده. بعد از پایان هر Phase: 1. تغییرات را کامل کن. 2. صفحات مرتبط را بررسی کن. 3. Responsive را بررسی کن. 4. RTL/LTR را بررسی کن. 5. Dark Mode را تا حد امکان regression test کن. 6. lint را اجرا کن. 7. typecheck را اجرا کن. 8. تست‌های مرتبط را اجرا کن. 9. build را اجرا کن. 10. فایل‌های تغییرکرده را گزارش کن. 11. Before/After UX Summary ارائه کن. 12. متوقف شو. تا زمانی که من نگفته‌ام: > برو فاز بعد نباید Phase بعدی را شروع کنی. --- # Product Design Direction زبان بصری اصلی پروژه باید: **Modern Enterprise + Flat UI + Soft Depth** باشد. نباید ظاهر پروژه تبدیل به Landing Page یا UI نمایشی شود. محصول یک ابزار روزمره سازمانی است. بنابراین: * خوانایی * سرعت * hierarchy * density * consistency * discoverability مهم‌تر از decoration هستند. --- # Visual Principles از موارد زیر استفاده کن: * Flat surfaces * Subtle borders * Minimal shadows * Clear hierarchy * Moderate border radius * Neutral backgrounds * Limited accent colors * High quality typography * Lucide Icons * Clear interactive states از موارد زیر بیش از حد استفاده نکن: * Gradient * Glassmorphism * Glow * Huge shadows * Decorative illustrations * Oversized cards * excessive rounded corners * excessive animation --- # Typography برای فارسی: **Dana** را حفظ کن. Hierarchy پیشنهادی: ```text Page Title 24–28px Section Title 18–20px Card Title 15–16px Body 14px Secondary 12–13px Caption 11–12px ``` Weightها را محدود نگه دار. مثلاً: ```text Regular Medium SemiBold Bold ``` از Font Weightهای زیاد بدون ضرورت استفاده نکن. --- # Spacing System Spacing باید بر اساس scale ثابت باشد. مثلاً: ```text 4 8 12 16 20 24 32 40 48 ``` Spacing تصادفی در Componentها ایجاد نکن. --- # Radius System حداکثر چند radius مشخص داشته باش: ```text Small 8px Medium 12px Large 16px XL 20px ``` Radius خیلی زیاد ایجاد نکن. --- # Surface System حداقل این سطح‌ها مشخص باشند: ```text App Background Surface Elevated Surface Interactive Surface Overlay ``` Dark Mode نیز همین hierarchy را داشته باشد. --- # Color System Colorها را Semantic کن. حداقل: ```text Primary Neutral Success Warning Danger Info ``` رنگ UI فقط برای decoration استفاده نشود. رنگ باید meaning داشته باشد. --- # Button System Button Variantها را استاندارد کن: ```text Primary Secondary Outline Ghost Danger Icon Button ``` Button sizeها: ```text Small Medium Large ``` هر صفحه حداکثر یک Primary CTA اصلی داشته باشد، مگر اینکه UX واقعاً نیاز داشته باشد. --- # Shared State Components Component استاندارد برای موارد زیر ایجاد یا تثبیت کن: ```text Loading Skeleton Empty State Error State Offline State Permission Denied Not Found Retry Success State ``` هر صفحه نباید طراحی متفاوتی برای این stateها داشته باشد. --- # PHASE 1 — UI Audit + Design System Foundation ## هدف قبل از تغییر صفحات اصلی، کل UI فعلی را Audit و Design System را تثبیت کن. --- ## UI Audit تمام UI را بررسی کن. حداقل صفحات: * Login * Dashboard * Courses * Course Workspace * Builder * Library * Templates * Question Bank * Users * Teams * Assignments * Monitoring * Reports * Skills * Reviews * Certificates * Subscription * Settings * AI Studio * Learner pages * Player * Assessments مشکلات را دسته‌بندی کن: ```text Consistency Hierarchy Density Spacing Typography Navigation Forms Tables Cards Dialogs Mobile Accessibility RTL/LTR Dark Mode ``` --- ## Design Tokens بررسی کن Design Tokenهای فعلی چگونه تعریف شده‌اند. اگر Design Token وجود دارد، از همان ساختار استفاده کن. Tokenهای لازم: ```text colors spacing radius shadow typography z-index motion breakpoints ``` از hard-coded style جدید جلوگیری کن. --- ## Core Components این Componentها را audit و استاندارد کن: ```text Button IconButton Input Textarea Select Checkbox Radio Switch Tabs Badge Chip Tooltip Card Modal Dialog Drawer Popover Dropdown Toast Table Pagination SearchInput Filter Breadcrumb PageHeader Skeleton EmptyState ``` --- ## Forms برای فرم‌ها استاندارد مشخص کن: ```text Label Required marker Helper text Validation Error Disabled Loading Success ``` Error باید دقیقاً نزدیک field مربوطه نمایش داده شود. --- ## Interaction States هر Component interactive حداقل این حالت‌ها را داشته باشد: ```text default hover active focus disabled loading error ``` Focus Ring را حذف نکن. --- ## Acceptance Criteria Phase 1 * UI Audit کامل شده باشد. * Design Tokens یکپارچه باشند. * Core Components مشخص باشند. * duplicate styles کاهش یافته باشد. * Typography hierarchy مشخص باشد. * Button hierarchy مشخص باشد. * Form pattern استاندارد باشد. * RTL/LTR خراب نشده باشد. * build موفق باشد. بعد متوقف شو. --- # PHASE 2 — App Shell + Navigation Redesign ## هدف ساختار اصلی کل محصول را ساده و حرفه‌ای کن. --- # App Shell ساختار مطلوب: ```text Sidebar + Top Header + Page Context + Main Content ``` Main Content باید width و spacing مناسب داشته باشد. --- # Sidebar Sidebar فعلی را audit کن. Navigation نباید لیست بسیار طولانی flat باشد. Grouping پیشنهادی: ## Create * Dashboard * Courses * Learning Paths * Library * Templates * Question Bank * AI Studio ## People * Users * Teams * Assignments ## Insights * Monitoring * Skills * Reports ## Manage * Reviews * Certificates * Subscription * Settings اما ساختار نهایی را بر اساس featureهای واقعی پروژه تعیین کن. --- # Sidebar Interaction Sidebar باید: * Collapsible باشد. * حالت icon-only داشته باشد. * Tooltip در collapsed mode داشته باشد. * Active State واضح داشته باشد. * groupها قابل collapse باشند در صورت نیاز. * scrolling صحیح داشته باشد. Active item را بیش از حد پررنگ نکن. پیشنهاد: ```text soft background + accent indicator + stronger text ``` --- # Role Based Navigation منو بر اساس: ```text Role Permission Organization capabilities Subscription ``` نمایش داده شود. کاربر نباید گزینه‌ای را ببیند که هیچ دسترسی به آن ندارد. --- # Header Global Header باید فقط عناصر موردنیاز داشته باشد. پیشنهاد: ```text Page context Global search Notifications AI shortcut if needed User menu ``` Header را شلوغ نکن. --- # Breadcrumb برای صفحات عمیق Breadcrumb اضافه کن. مثلاً: ```text Courses / Leadership Essentials / Builder ``` --- # Page Header همه صفحات اصلی pattern ثابتی داشته باشند: ```text Title Description / Context Actions ``` مثلاً: ```text دوره‌ها دوره‌های سازمان را ایجاد، مدیریت و منتشر کنید. [ایجاد دوره] ``` --- # Mobile Navigation Learner و Admin/Designer navigation یکسان نباشد. ### Learner Bottom Navigation مناسب است. ### Designer / Admin Drawer یا adaptive sidebar مناسب است. --- ## Acceptance Criteria Phase 2 * Navigation ساده‌تر است. * Sidebar grouped است. * Collapsed mode دارد. * Role-aware است. * Header استاندارد است. * Page Header pattern ایجاد شده. * Breadcrumb consistent است. * responsive navigation صحیح است. متوقف شو. --- # PHASE 3 — Dashboard + Home Experience ## هدف Dashboard از یک صفحه آماری به **Action Center** تبدیل شود. --- # Dashboard Hierarchy پیشنهاد layout: ```text Greeting / Context ↓ Quick Actions ↓ Compact KPIs ↓ Needs Attention ↓ Continue Working ↓ Recent Courses ↓ Pending Reviews / AI Jobs ↓ Recent Activity ``` --- # Quick Actions مثلاً: ```text ایجاد دوره ساخت دوره با AI آپلود محتوا ایجاد مسیر یادگیری دعوت کاربران ``` همه را Primary Button نکن. یک Primary و بقیه Secondary/Ghost باشند. --- # KPI Cards KPI Cardها: * compact باشند. * ارتفاع زیاد نداشته باشند. * فقط اطلاعات actionable داشته باشند. مثلاً: ```text Active courses Learners Completion rate Pending reviews ``` اگر Trend واقعی وجود دارد نمایش بده. Trend ساختگی ایجاد نکن. --- # Needs Attention یکی از مهم‌ترین بخش‌های Dashboard باشد. مثلاً: ```text 3 courses waiting for review 14 learners behind schedule 2 failed AI jobs 5 assignments overdue ``` هر مورد CTA مستقیم داشته باشد. --- # Continue Working Draftها و کارهای نیمه‌تمام را نمایش بده. مثلاً: ```text Leadership Essentials Last edited 2h ago 65% [Continue] ``` --- # Activity Feed Activity را بیش از حد شلوغ نکن. مثلاً: ```text Course published User enrolled Review requested AI generation completed ``` --- # Empty Dashboard برای سازمان جدید Dashboard نباید خالی باشد. Onboarding state طراحی کن. مثلاً: ```text Welcome to MicroLearning 1. Create your first course 2. Invite users 3. Publish learning ``` --- ## Acceptance Criteria Phase 3 * Dashboard action-oriented شده. * whitespace غیرضروری کاهش یافته. * KPIها compact هستند. * Needs Attention وجود دارد. * Continue Working وجود دارد. * onboarding state وجود دارد. * mobile layout صحیح است. متوقف شو. --- # PHASE 4 — Course Builder UX Redesign ## هدف Builder باید به بهترین و مهم‌ترین تجربه UI محصول تبدیل شود. --- # Builder Layout چهارپنل همزمان را audit کن. Architecture پیشنهادی: ```text Left: Block Library Center: Canvas Right: Tabbed Panel ``` Right Panel: ```text Properties Structure Review ``` --- # Canvas Priority Canvas باید dominant area باشد. در Desktop معمولی بهتر است تقریباً: ```text 55–65% ``` فضا را بگیرد. --- # Block Library Block Library: * Search داشته باشد. * Category داشته باشد. * collapse شود. * Recent Blocks داشته باشد. * Favorites در صورت منطقی بودن. * Drag & Drop واضح باشد. Categoryهای احتمالی: ```text Text Media Interactive Assessment Layout AI ``` --- # Slash Command در Editor امکان: ```text / ``` اضافه کن. مثلاً: ```text /text /image /video /quiz /flashcard /divider /ai ``` Command Palette باید searchable باشد. --- # Block Selection Selected block کاملاً مشخص باشد. اما border خیلی سنگین ایجاد نکن. پیشنهاد: ```text subtle outline + floating mini toolbar ``` --- # Floating Block Toolbar برای block انتخاب‌شده: ```text Move Duplicate Delete Settings AI Assist ``` بسته به Block Type. --- # Right Inspector Inspector باید context-sensitive باشد. مثلاً برای Image: ```text Image Alt text Caption Alignment Size Link ``` برای Quiz: ```text Question Answers Correct answer Feedback Score ``` --- # Structure Panel Structure باید hierarchy واقعی دوره را نشان دهد. مثلاً: ```text Course ├─ Module │ ├─ Lesson │ │ ├─ Block ``` Drag & Drop structure در صورت وجود support شود. --- # Save Status همیشه نمایش داده شود: ```text Saved Saving... Unsaved Offline Conflict Save failed ``` --- # Publish Publish باید primary action باشد، اما قبل آن Readiness check وجود داشته باشد. مثلاً: ```text Ready to publish ``` یا: ```text 3 issues before publishing ``` Problems قابل click باشند. --- # Builder Top Toolbar Toolbar را سبک نگه دار. مثلاً: ```text Back Course title Device preview Undo Redo Save status Preview Publish ``` گزینه‌های فرعی داخل More Menu. --- # Keyboard Shortcuts در صورت سازگاری: ```text Ctrl/Cmd + S Ctrl/Cmd + Z Ctrl/Cmd + Shift + Z Ctrl/Cmd + D Delete Escape / ``` --- # Inline Editing Text Block تا حد امکان inline edit داشته باشد. کاربر نباید برای هر تغییر کوچک Inspector را باز کند. --- # Empty Canvas Empty Canvas مفید باشد: ```text شروع ساخت درس بلوک را از پنل کناری بکشید یا / را فشار دهید [افزودن اولین بلوک] ``` --- ## Acceptance Criteria Phase 4 * Canvas فضای بیشتری دارد. * Builder cognitive load کمتری دارد. * Inspector و Structure بهتر مدیریت شده‌اند. * Block insertion سریع‌تر شده. * save status واضح است. * publish readiness واضح است. * keyboard UX بهتر شده. * responsive regression ندارد. متوقف شو. --- # PHASE 5 — AI Studio UX Redesign ## هدف AI Studio باید ساده، قابل اعتماد و قابل کنترل باشد. AI نباید حس Black Box داشته باشد. --- # Workflow AI Studio را به Wizard تبدیل کن: ```text 1. Source 2. Learning Design 3. Generate 4. Review ``` Step indicator واضح باشد. --- # STEP 1 — Source Sourceهای ممکن را براساس امکانات واقعی نمایش بده: ```text Upload File Paste Text URL Existing Content ``` --- # File Upload Native file input خام نمایش نده. Component اختصاصی: ```text Drag & Drop your file or [Browse files] PDF • DOCX • PPTX ``` بعد از انتخاب: ```text Safety Training.pdf 4.2 MB Uploaded [Remove] ``` --- # STEP 2 — Learning Design تنظیمات اصلی را مرتب نمایش بده: ```text Language Audience Difficulty Duration Tone Learning Objective Course Type ``` Advanced settings را داخل Accordion قرار بده. --- # AI Provider Provider selection نباید برای کاربران غیرتکنیکال بیش از حد برجسته باشد. اگر سیستم Default Provider دارد، آن را استفاده کن. Advanced users بتوانند Provider را تغییر دهند. --- # STEP 3 — Generate Progress واقعی نمایش بده. مثلاً: ```text ✓ Uploading ✓ Extracting content ● Analyzing material ○ Designing learning flow ○ Generating activities ○ Validating ``` Percentage فقط اگر واقعی است نمایش بده. --- # Generation Error به‌جای generic error: ```text Ollama is unavailable. Check: • Ollama is running • Selected model exists [Retry] [Connection settings] ``` Error باید actionable باشد. --- # STEP 4 — Review Output را یکباره و بدون review وارد Builder نکن. Review قابل کنترل باشد. مثلاً: ```text Lesson 1 Introduction to Safety AI created: 5 blocks 1 quiz 2 flashcards [Preview] ``` --- # Block Level Review در صورت سازگاری architecture: ```text AI Suggestion [Accept] [Edit] [Reject] ``` --- # AI Confidence / Warning در موارد مناسب warning بده: ```text This section may require human review. ``` اما confidence جعلی تولید نکن. --- # AI History Generationهای اخیر قابل مشاهده باشند: ```text Course Status Model Created Action ``` --- ## Acceptance Criteria Phase 5 * AI Studio wizard-based است. * Upload UI حرفه‌ای است. * settings ساده‌تر شده. * advanced settings جدا شده. * progress واضح است. * errors actionable هستند. * review قبل از قبول خروجی وجود دارد. * mobile UX مناسب است. متوقف شو. --- # PHASE 6 — Courses, Users, Teams & Management Screens ## هدف تمام صفحات مدیریتی یک الگوی ثابت داشته باشند. --- # Standard Management Page Pattern پیشنهادی: ```text Page Header ↓ Search + Filters + View ↓ Table / Cards ↓ Pagination ``` --- # Tables Table Design استاندارد کن. نیازها: * Sticky header * Row hover * Sorting * Filters * Search * Pagination * Bulk selection * Bulk actions * Empty State * Loading Skeleton * Error State --- # Row Actions Actionهای پرتکرار مستقیم. Actionهای کم‌استفاده داخل: ```text ... ``` مثلاً: ```text Edit Duplicate Archive Delete ``` --- # Courses Course Card/Table باید اطلاعات اصلی را سریع نشان دهد: ```text Title Status Author Learners Progress Last updated ``` Statusها semantic باشند: ```text Draft Review Scheduled Published Archived ``` --- # Filtering Filterهای active قابل مشاهده باشند. مثلاً: ```text Status: Published × Owner: Me × ``` و: ```text Clear all ``` --- # Users User management باید سریع باشد. Columns مهم: ```text Name Role Team Status Last activity ``` --- # Bulk Actions مثلاً: ```text Assign to team Change role Activate Deactivate Enroll ``` فقط اگر backend support دارد. --- # Drawers vs Modals Editهای سبک: Drawer Confirmationها: Dialog Workflowهای پیچیده: Dedicated Page --- # Settings Settings را به sectionهای منطقی تقسیم کن. مثلاً: ```text General Branding Learning AI Notifications Security Integrations ``` از یک صفحه بسیار طولانی جلوگیری کن. --- ## Acceptance Criteria Phase 6 * Management pages consistent هستند. * Table system استاندارد است. * Filter UX بهتر شده. * Bulk actions واضح‌اند. * settings architecture بهتر شده. * duplicate UI patterns کاهش یافته. متوقف شو. --- # PHASE 7 — Learner Experience + Responsive UI ## هدف Learner Experience باید از Admin Experience جدا و ساده‌تر باشد. --- # Learner Home تمرکز: ```text Continue Learning Assigned Courses Progress Due Soon Completed Achievements if applicable ``` --- # Course Player Player باید distraction-free باشد. Layout پیشنهادی: ```text Lesson Content + Minimal Navigation + Progress ``` --- # Progress Progress همیشه قابل فهم باشد. مثلاً: ```text Lesson 3 of 8 42% complete ``` --- # Continue Learning سیستم باید واضحاً نشان دهد کاربر آخرین بار کجا بوده است. ```text Continue from: Handling Workplace Conflict ``` --- # Mobile Navigation برای Learner: ```text Home Learn Progress Profile ``` Bottom Navigation مناسب است. --- # Mobile Builder Builder را کاملاً disable نکن. یک **Quick Edit Mode** ایجاد کن. Workflow: ```text Course ↓ Lesson ↓ Blocks ↓ Block Editor ``` حداقل قابلیت‌ها: * Edit text * Add common block * Reorder * Delete * Edit quiz * Image selection * Preview * Save --- # Responsive Breakpoints حداقل بررسی کن: ```text 375 430 768 1024 1280 1440 1920 ``` --- # Tables on Mobile فقط horizontal scroll استفاده نکن. Column priority یا Card View در نظر بگیر. --- # Touch UX Touch target حداقل تقریباً: ```text 44×44px ``` باشد. --- # Mobile Drawers Drawer: * full or near-full height * clear close action * swipe behavior فقط اگر implementation مطمئن است * focus management صحیح --- ## Acceptance Criteria Phase 7 * Learner Experience ساده‌تر شده. * Player reading-friendly است. * mobile navigation مناسب است. * Builder Quick Edit دارد. * tables mobile-friendly هستند. * touch targets مناسب‌اند. * تمام viewportها بررسی شده‌اند. متوقف شو. --- # PHASE 8 — Dark Mode + Accessibility + Final UI Polish ## هدف تکمیل UI قبل از Release. --- # Dark Mode Dark Mode نباید فقط inversion باشد. تعریف کن: ```text Background Surface Elevated surface Border Text primary Text secondary Interactive ``` Contrast را بررسی کن. --- # Accessibility حداقل WCAG AA را هدف قرار بده. Audit کن: ```text Keyboard Focus Contrast Labels ARIA Semantic HTML Headings Alt text Tabs Dialogs Drawers Tooltips Forms Error messages ``` --- # Keyboard Navigation UI اصلی باید بدون mouse قابل استفاده باشد. --- # Focus Focus visible باشد. Modal/Drawer: * focus trap * Escape close * focus return --- # Tabs Tabs باید: ```text ArrowLeft ArrowRight Home End ``` را در صورت implementation استاندارد پشتیبانی کنند. --- # Reduced Motion اگر user: ```text prefers-reduced-motion ``` فعال دارد animationها کاهش یابند. --- # Final Micro Interactions Animationها کوتاه و subtle باشند. مثلاً: ```text 120–200ms ``` برای: * Hover * Drawer * Dropdown * Toast * Accordion Animation نمایشی و کند ایجاد نکن. --- # Loading از Skeleton برای layoutهای content-heavy استفاده کن. Spinner برای عملیات کوچک مناسب است. --- # Toast Toastها: ```text Success Error Warning Info ``` زمان نمایش مناسب داشته باشند. Error مهم سریع ناپدید نشود. --- # Final UX Review تمام Product Flowهای اصلی را بررسی کن. ## Designer ```text Login → Dashboard → Create Course → Builder → Preview → Publish ``` ## AI ```text AI Studio → Upload → Configure → Generate → Review → Builder ``` ## Admin ```text Users → Create User → Assign → Monitor ``` ## Learner ```text Login → Assigned Course → Learn → Quiz → Complete ``` --- # Final UI Quality Gate قبل از پایان: ```bash npm run lint npm run typecheck npm test npm run build ``` باید موفق باشند. --- # Final Report در انتهای Phase 8 گزارش بده: ## UI Improvements ## UX Improvements ## Builder Improvements ## AI Studio Improvements ## Responsive Improvements ## Learner Improvements ## Accessibility Improvements ## Dark Mode Improvements ## Remaining UX Debt برای موارد باقی‌مانده Severity بده: ```text High Medium Low ``` --- # UI Score به این موارد از 10 امتیاز بده: ```text Visual Consistency Navigation Information Hierarchy Dashboard Builder UX AI UX Management UX Learner UX Responsive Accessibility Dark Mode ``` و امتیاز کلی: ```text UI/UX Score: XX/100 ``` --- # مهم‌ترین قوانین اجرا در تمام ۸ فاز: ### 1 UI جدید نباید Feature موجود را حذف کند. ### 2 Backend Contract را بدون ضرورت تغییر نده. ### 3 قبل از ساخت Component جدید، Componentهای موجود را بررسی کن. ### 4 Duplicate Component ایجاد نکن. ### 5 Design Token استفاده کن. ### 6 RTL و LTR را همزمان در نظر بگیر. ### 7 Mobile را به آخر کار موکول نکن. ### 8 Accessibility را جزئی از Component Design بدان. ### 9 از Decoration غیرضروری جلوگیری کن. ### 10 هر صفحه باید Primary Action واضح داشته باشد. ### 11 هر Async Flow باید: ```text Loading Success Error Empty ``` را مدیریت کند. ### 12 هر تغییر UI باید usability را بهتر کند، نه صرفاً ظاهر را. --- # Final Phase Order ```text PHASE 1 Design System ↓ PHASE 2 App Shell & Navigation ↓ PHASE 3 Dashboard ↓ PHASE 4 Course Builder ↓ PHASE 5 AI Studio ↓ PHASE 6 Management Screens ↓ PHASE 7 Learner + Responsive ↓ PHASE 8 Dark Mode + Accessibility + Final Polish ``` **هر فاز را کامل کن، تست کن، گزارش بده و سپس منتظر دستور من بمان.**