标本可交互，可以切换不同状态。Interactive specimen — switch between the available states.
适用场景Use cases
课程发现、继续学习、进度回顾课程发现 · 继续学习 · 进度回顾
关键状态Key states
默认Default加载Loading空结果Empty
布局结构Structure
继续学习主入口Continue-learning entry point
分类与难度筛选Category and difficulty filters
课程卡片流Course card flow
个人学习进度Personal progress
视觉特征Visual traits
课程封面服务于识别而非装饰Course covers aid recognition
进度信息靠近继续按钮Progress sits near Continue
筛选条件保持简短Filters stay concise
实现约束Implementation guardrails
需要做到Do
优先展示上次学习位置Prioritize the last learning position
区分未开始、学习中和已完成Distinguish not started, in progress, and complete
空结果给出清除筛选入口Offer a clear path out of empty results
避免Avoid
每张课程卡展示过多营销文案Pack cards with marketing copy
把学习进度藏进详情页Hide progress inside the detail page
AI 风格说明AI design brief
构建一个以继续学习和课程发现为核心的课程目录。
适用场景：课程发现、继续学习、进度回顾。
页面结构：继续学习主入口；分类与难度筛选；课程卡片流；个人学习进度。
视觉特征：课程封面服务于识别而非装饰；进度信息靠近继续按钮；筛选条件保持简短。
关键状态：默认、加载、空结果。
需要做到：优先展示上次学习位置；区分未开始、学习中和已完成；空结果给出清除筛选入口。
避免：每张课程卡展示过多营销文案；把学习进度藏进详情页。Build a course catalog centered on continuing learning and discovering the next course.
Use cases: Course discovery, Continue learning, Progress review.
Structure: Continue-learning entry point; Category and difficulty filters; Course card flow; Personal progress.
Visual traits: Course covers aid recognition; Progress sits near Continue; Filters stay concise.
Key states: Default, Loading, Empty.
Do: Prioritize the last learning position; Distinguish not started, in progress, and complete; Offer a clear path out of empty results.
Avoid: Pack cards with marketing copy; Hide progress inside the detail page.
# 课程学习目录 (Course Learning Catalog)
兼顾课程发现、学习进度和继续学习入口的教育产品首页。
An education home page balancing course discovery, learning progress, and a clear continue-learning entry point.
## 分类
- 产品类型：教育产品 / Education
- 页面类型：列表、工作台 / List, Workspace
- 布局方式：侧边栏、卡片流 / Sidebar, Card flow
- 视觉气质：温和、轻量、专业 / Warm, Lightweight, Professional
- 关键状态：默认、加载、空结果 / Default, Loading, Empty
## 页面结构
- 继续学习主入口 / Continue-learning entry point
- 分类与难度筛选 / Category and difficulty filters
- 课程卡片流 / Course card flow
- 个人学习进度 / Personal progress
## 视觉特征
- 课程封面服务于识别而非装饰 / Course covers aid recognition
- 进度信息靠近继续按钮 / Progress sits near Continue
- 筛选条件保持简短 / Filters stay concise
## AI 风格说明 / AI design brief
构建一个以继续学习和课程发现为核心的课程目录。
适用场景：课程发现、继续学习、进度回顾。
页面结构：继续学习主入口；分类与难度筛选；课程卡片流；个人学习进度。
视觉特征：课程封面服务于识别而非装饰；进度信息靠近继续按钮；筛选条件保持简短。
关键状态：默认、加载、空结果。
需要做到：优先展示上次学习位置；区分未开始、学习中和已完成；空结果给出清除筛选入口。
避免：每张课程卡展示过多营销文案；把学习进度藏进详情页。
Build a course catalog centered on continuing learning and discovering the next course.
Use cases: Course discovery, Continue learning, Progress review.
Structure: Continue-learning entry point; Category and difficulty filters; Course card flow; Personal progress.
Visual traits: Course covers aid recognition; Progress sits near Continue; Filters stay concise.
Key states: Default, Loading, Empty.
Do: Prioritize the last learning position; Distinguish not started, in progress, and complete; Offer a clear path out of empty results.
Avoid: Pack cards with marketing copy; Hide progress inside the detail page.
来源：LearnUI PM 原创示例，MIT License
