26 KiB

خام سرزنش تاریخچه

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 باید دقیقاً در ۸ فاز انجام شود.

فازها:

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:

تغییرات را کامل کن.
صفحات مرتبط را بررسی کن.
Responsive را بررسی کن.
RTL/LTR را بررسی کن.
Dark Mode را تا حد امکان regression test کن.
lint را اجرا کن.
typecheck را اجرا کن.
تست‌های مرتبط را اجرا کن.
build را اجرا کن.
فایل‌های تغییرکرده را گزارش کن.
Before/After UX Summary ارائه کن.
متوقف شو.

تا زمانی که من نگفته‌ام:

برو فاز بعد

نباید 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 پیشنهادی:

Page Title        24–28px
Section Title     18–20px
Card Title        15–16px
Body              14px
Secondary         12–13px
Caption           11–12px

Weightها را محدود نگه دار.

مثلاً:

Regular
Medium
SemiBold
Bold

از Font Weightهای زیاد بدون ضرورت استفاده نکن.

Spacing System

Spacing باید بر اساس scale ثابت باشد.

مثلاً:

Spacing تصادفی در Componentها ایجاد نکن.

Radius System

حداکثر چند radius مشخص داشته باش:

Small       8px
Medium      12px
Large       16px
XL          20px

Radius خیلی زیاد ایجاد نکن.

Surface System

حداقل این سطح‌ها مشخص باشند:

App Background
Surface
Elevated Surface
Interactive Surface
Overlay

Dark Mode نیز همین hierarchy را داشته باشد.

Color System

Colorها را Semantic کن.

حداقل:

Primary
Neutral
Success
Warning
Danger
Info

رنگ UI فقط برای decoration استفاده نشود.

رنگ باید meaning داشته باشد.

Button System

Button Variantها را استاندارد کن:

Primary
Secondary
Outline
Ghost
Danger
Icon Button

Button sizeها:

Small
Medium
Large

هر صفحه حداکثر یک Primary CTA اصلی داشته باشد، مگر اینکه UX واقعاً نیاز داشته باشد.

Shared State Components

Component استاندارد برای موارد زیر ایجاد یا تثبیت کن:

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

مشکلات را دسته‌بندی کن:

Consistency
Hierarchy
Density
Spacing
Typography
Navigation
Forms
Tables
Cards
Dialogs
Mobile
Accessibility
RTL/LTR
Dark Mode

Design Tokens

بررسی کن Design Tokenهای فعلی چگونه تعریف شده‌اند.

اگر Design Token وجود دارد، از همان ساختار استفاده کن.

Tokenهای لازم:

colors
spacing
radius
shadow
typography
z-index
motion
breakpoints

از hard-coded style جدید جلوگیری کن.

Core Components

این Componentها را audit و استاندارد کن:

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

برای فرم‌ها استاندارد مشخص کن:

Label
Required marker
Helper text
Validation
Error
Disabled
Loading
Success

Error باید دقیقاً نزدیک field مربوطه نمایش داده شود.

Interaction States

هر Component interactive حداقل این حالت‌ها را داشته باشد:

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 موفق باشد.

بعد متوقف شو.

هدف

ساختار اصلی کل محصول را ساده و حرفه‌ای کن.

App Shell

ساختار مطلوب:

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 را بیش از حد پررنگ نکن.

پیشنهاد:

soft background
+
accent indicator
+
stronger text

منو بر اساس:

Role
Permission
Organization capabilities
Subscription

نمایش داده شود.

کاربر نباید گزینه‌ای را ببیند که هیچ دسترسی به آن ندارد.

Header

Global Header باید فقط عناصر موردنیاز داشته باشد.

پیشنهاد:

Page context
Global search
Notifications
AI shortcut if needed
User menu

Header را شلوغ نکن.

برای صفحات عمیق Breadcrumb اضافه کن.

مثلاً:

Courses
/
Leadership Essentials
/
Builder

Page Header

همه صفحات اصلی pattern ثابتی داشته باشند:

Title
Description / Context
Actions

مثلاً:

دوره‌ها

دوره‌های سازمان را ایجاد، مدیریت و منتشر کنید.

[ایجاد دوره]

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:

Greeting / Context
↓
Quick Actions
↓
Compact KPIs
↓
Needs Attention
↓
Continue Working
↓
Recent Courses
↓
Pending Reviews / AI Jobs
↓
Recent Activity

Quick Actions

مثلاً:

ایجاد دوره
ساخت دوره با AI
آپلود محتوا
ایجاد مسیر یادگیری
دعوت کاربران

همه را Primary Button نکن.

یک Primary و بقیه Secondary/Ghost باشند.

KPI Cards

KPI Cardها:

compact باشند.
ارتفاع زیاد نداشته باشند.
فقط اطلاعات actionable داشته باشند.

مثلاً:

Active courses
Learners
Completion rate
Pending reviews

اگر Trend واقعی وجود دارد نمایش بده.

Trend ساختگی ایجاد نکن.

Needs Attention

یکی از مهم‌ترین بخش‌های Dashboard باشد.

مثلاً:

3 courses waiting for review
14 learners behind schedule
2 failed AI jobs
5 assignments overdue

هر مورد CTA مستقیم داشته باشد.

Continue Working

Draftها و کارهای نیمه‌تمام را نمایش بده.

مثلاً:

Leadership Essentials
Last edited 2h ago
65%

[Continue]

Activity Feed

Activity را بیش از حد شلوغ نکن.

مثلاً:

Course published
User enrolled
Review requested
AI generation completed

Empty Dashboard

برای سازمان جدید Dashboard نباید خالی باشد.

Onboarding state طراحی کن.

مثلاً:

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 پیشنهادی:

Left:
Block Library

Center:
Canvas

Right:
Tabbed Panel

Right Panel:

Properties
Structure
Review

Canvas Priority

Canvas باید dominant area باشد.

در Desktop معمولی بهتر است تقریباً:

55–65%

فضا را بگیرد.

Block Library

Block Library:

Search داشته باشد.
Category داشته باشد.
collapse شود.
Recent Blocks داشته باشد.
Favorites در صورت منطقی بودن.
Drag & Drop واضح باشد.

Categoryهای احتمالی:

Text
Media
Interactive
Assessment
Layout
AI

Slash Command

در Editor امکان:

اضافه کن.

مثلاً:

/text
/image
/video
/quiz
/flashcard
/divider
/ai

Command Palette باید searchable باشد.

Block Selection

Selected block کاملاً مشخص باشد.

اما border خیلی سنگین ایجاد نکن.

پیشنهاد:

subtle outline
+
floating mini toolbar

برای block انتخاب‌شده:

Move
Duplicate
Delete
Settings
AI Assist

بسته به Block Type.

Right Inspector

Inspector باید context-sensitive باشد.

مثلاً برای Image:

Image
Alt text
Caption
Alignment
Size
Link

برای Quiz:

Question
Answers
Correct answer
Feedback
Score

Structure Panel

Structure باید hierarchy واقعی دوره را نشان دهد.

مثلاً:

Course
 ├─ Module
 │   ├─ Lesson
 │   │   ├─ Block

Drag & Drop structure در صورت وجود support شود.

Save Status

همیشه نمایش داده شود:

Saved
Saving...
Unsaved
Offline
Conflict
Save failed

Publish

Publish باید primary action باشد، اما قبل آن Readiness check وجود داشته باشد.

مثلاً:

Ready to publish

یا:

3 issues before publishing

Problems قابل click باشند.

Toolbar را سبک نگه دار.

مثلاً:

Back
Course title
Device preview
Undo
Redo
Save status
Preview
Publish

گزینه‌های فرعی داخل More Menu.

Keyboard Shortcuts

در صورت سازگاری:

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 مفید باشد:

شروع ساخت درس

بلوک را از پنل کناری بکشید
یا / را فشار دهید

[افزودن اولین بلوک]

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 تبدیل کن:

1. Source
2. Learning Design
3. Generate
4. Review

Step indicator واضح باشد.

STEP 1 — Source

Sourceهای ممکن را براساس امکانات واقعی نمایش بده:

Upload File
Paste Text
URL
Existing Content

File Upload

Native file input خام نمایش نده.

Component اختصاصی:

Drag & Drop your file

or

[Browse files]

PDF • DOCX • PPTX

بعد از انتخاب:

Safety Training.pdf
4.2 MB

Uploaded
[Remove]

STEP 2 — Learning Design

تنظیمات اصلی را مرتب نمایش بده:

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 واقعی نمایش بده.

مثلاً:

✓ Uploading
✓ Extracting content
● Analyzing material
○ Designing learning flow
○ Generating activities
○ Validating

Percentage فقط اگر واقعی است نمایش بده.

Generation Error

به‌جای generic error:

Ollama is unavailable.

Check:
• Ollama is running
• Selected model exists

[Retry]
[Connection settings]

Error باید actionable باشد.

STEP 4 — Review

Output را یکباره و بدون review وارد Builder نکن.

Review قابل کنترل باشد.

مثلاً:

Lesson 1
Introduction to Safety

AI created:
5 blocks
1 quiz
2 flashcards

[Preview]

Block Level Review

در صورت سازگاری architecture:

AI Suggestion

[Accept]
[Edit]
[Reject]

AI Confidence / Warning

در موارد مناسب warning بده:

This section may require human review.

اما confidence جعلی تولید نکن.

AI History

Generationهای اخیر قابل مشاهده باشند:

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 پیشنهادی:

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های کم‌استفاده داخل:

...

مثلاً:

Edit
Duplicate
Archive
Delete

Courses

Course Card/Table باید اطلاعات اصلی را سریع نشان دهد:

Title
Status
Author
Learners
Progress
Last updated

Statusها semantic باشند:

Draft
Review
Scheduled
Published
Archived

Filtering

Filterهای active قابل مشاهده باشند.

مثلاً:

Status: Published ×
Owner: Me ×

و:

Clear all

Users

User management باید سریع باشد.

Columns مهم:

Name
Role
Team
Status
Last activity

Bulk Actions

مثلاً:

Assign to team
Change role
Activate
Deactivate
Enroll

فقط اگر backend support دارد.

Drawers vs Modals

Editهای سبک:

Drawer

Confirmationها:

Dialog

Workflowهای پیچیده:

Dedicated Page

Settings

Settings را به sectionهای منطقی تقسیم کن.

مثلاً:

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

تمرکز:

Continue Learning
Assigned Courses
Progress
Due Soon
Completed
Achievements if applicable

Course Player

Player باید distraction-free باشد.

Layout پیشنهادی:

Lesson Content
+
Minimal Navigation
+
Progress

Progress

Progress همیشه قابل فهم باشد.

مثلاً:

Lesson 3 of 8
42% complete

Continue Learning

سیستم باید واضحاً نشان دهد کاربر آخرین بار کجا بوده است.

Continue from:
Handling Workplace Conflict

برای Learner:

Home
Learn
Progress
Profile

Bottom Navigation مناسب است.

Mobile Builder

Builder را کاملاً disable نکن.

یک Quick Edit Mode ایجاد کن.

Workflow:

Course
↓
Lesson
↓
Blocks
↓
Block Editor

حداقل قابلیت‌ها:

Edit text
Add common block
Reorder
Delete
Edit quiz
Image selection
Preview
Save

Responsive Breakpoints

حداقل بررسی کن:

Tables on Mobile

فقط horizontal scroll استفاده نکن.

Column priority یا Card View در نظر بگیر.

Touch UX

Touch target حداقل تقریباً:

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 باشد.

تعریف کن:

Background
Surface
Elevated surface
Border
Text primary
Text secondary
Interactive

Contrast را بررسی کن.

Accessibility

حداقل WCAG AA را هدف قرار بده.

Audit کن:

Keyboard
Focus
Contrast
Labels
ARIA
Semantic HTML
Headings
Alt text
Tabs
Dialogs
Drawers
Tooltips
Forms
Error messages

UI اصلی باید بدون mouse قابل استفاده باشد.

Focus

Focus visible باشد.

Modal/Drawer:

focus trap
Escape close
focus return

Tabs

Tabs باید:

ArrowLeft
ArrowRight
Home
End

را در صورت implementation استاندارد پشتیبانی کنند.

Reduced Motion

اگر user:

prefers-reduced-motion

فعال دارد animationها کاهش یابند.

Final Micro Interactions

Animationها کوتاه و subtle باشند.

مثلاً:

120–200ms

برای:

Hover
Drawer
Dropdown
Toast
Accordion

Animation نمایشی و کند ایجاد نکن.

Loading

از Skeleton برای layoutهای content-heavy استفاده کن.

Spinner برای عملیات کوچک مناسب است.

Toast

Toastها:

Success
Error
Warning
Info

زمان نمایش مناسب داشته باشند.

Error مهم سریع ناپدید نشود.

Final UX Review

تمام Product Flowهای اصلی را بررسی کن.

Designer

Login
→
Dashboard
→
Create Course
→
Builder
→
Preview
→
Publish

AI

AI Studio
→
Upload
→
Configure
→
Generate
→
Review
→
Builder

Admin

Users
→
Create User
→
Assign
→
Monitor

Learner

Login
→
Assigned Course
→
Learn
→
Quiz
→
Complete

Final UI Quality Gate

قبل از پایان:

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 بده:

High
Medium
Low

UI Score

به این موارد از 10 امتیاز بده:

Visual Consistency
Navigation
Information Hierarchy
Dashboard
Builder UX
AI UX
Management UX
Learner UX
Responsive
Accessibility
Dark Mode

و امتیاز کلی:

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 باید:

Loading
Success
Error
Empty

را مدیریت کند.

12

هر تغییر UI باید usability را بهتر کند، نه صرفاً ظاهر را.

Final Phase Order

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

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

26 KiB خام سرزنش تاریخچه مخزن unescape control characters مخزن escape control characters

Master UI/UX Redesign Prompt — MicroLearning

قانون اجرای پروژه

Product Design Direction

Visual Principles

Typography

Spacing System

Radius System

Surface System

Color System

Button System

Shared State Components

PHASE 1 — UI Audit + Design System Foundation

هدف

UI Audit

Design Tokens

Core Components

Forms

Interaction States

Acceptance Criteria Phase 1

PHASE 2 — App Shell + Navigation Redesign

هدف

App Shell

Sidebar

Create

People

Insights

Manage

Sidebar Interaction

Role Based Navigation

Header

Breadcrumb

Page Header

Mobile Navigation

Learner

Designer / Admin

Acceptance Criteria Phase 2

PHASE 3 — Dashboard + Home Experience

هدف

Dashboard Hierarchy

Quick Actions

KPI Cards

Needs Attention

Continue Working

Activity Feed

Empty Dashboard

Acceptance Criteria Phase 3

PHASE 4 — Course Builder UX Redesign

هدف

Builder Layout

Canvas Priority

Block Library

Slash Command

Block Selection

Floating Block Toolbar

Right Inspector

Structure Panel

Save Status

Publish

Builder Top Toolbar

Keyboard Shortcuts

Inline Editing

Empty Canvas

Acceptance Criteria Phase 4

PHASE 5 — AI Studio UX Redesign

هدف

Workflow

STEP 1 — Source

File Upload

STEP 2 — Learning Design

AI Provider

STEP 3 — Generate

Generation Error

STEP 4 — Review

Block Level Review

AI Confidence / Warning

AI History

Acceptance Criteria Phase 5

PHASE 6 — Courses, Users, Teams & Management Screens

هدف

26 KiB

خام سرزنش تاریخچه