New_Micro_Learning/Prompt/UI Prompt.md

# 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
```

**هر فاز را کامل کن، تست کن، گزارش بده و سپس منتظر دستور من بمان.**