世界 1 / 新手区
构建一个小型 React Native UI kit：design tokens、buttons、badges、stat cards、progress bars、course cards、empty states、loading/error states、skeletons、notices、segmented controls 和 final UI Kit screen。 完成课程以解锁下一个区域. Boss 项目在世界终点等待。
UI 森林训练可读屏幕、导航和可复用组件。
向导: Layout Scout
奖励技能: UI pathfinding
目标: 完成课程、解决任务、获得 XP，并打开地图下一段。
免费任务
0 / 12 节课
状态
世界
时长
地图
课时
登录后可保存进度和 XP。
世界目标: 构建在移动尺寸上稳定的屏幕路线。
已收集技能: UI pathfinding
/course-assets/lessons/ui-components/design-tokens.svg
本 module 构建 UI Components 的一个聚焦实战部分。每节 lesson 都包含 task、validation rules 和 hidden solution。
区域 1：Tokens, buttons и badges。完成区域任务，继续推进地图。
任务 1
任务 1：Design tokens: цвета и отступы。阅读简报，完成练习任务，获得 XP。
任务 1：Design tokens: цвета и отступы。阅读简报，完成练习任务，获得 XP。
任务 2：Button variants: primary и secondary。阅读简报，完成练习任务，获得 XP。
任务 3：Badge component: FREE, PRO, NEW。阅读简报，完成练习任务，获得 XP。
/course-assets/lessons/ui-components/stat-card.svg
本 module 构建 UI Components 的一个聚焦实战部分。每节 lesson 都包含 task、validation rules 和 hidden solution。
区域 2：Карточки и progress。完成区域任务，继续推进地图。
任务 4：StatCard: 卡片 метрики。阅读简报，完成练习任务，获得 XP。
任务 5：ProgressBar: 进度 курса。阅读简报，完成练习任务，获得 XP。
任务 6：CourseCard UI: 卡片 курса。阅读简报，完成练习任务，获得 XP。
/course-assets/lessons/ui-components/empty-state-component.svg
本 module 构建 UI Components 的一个聚焦实战部分。每节 lesson 都包含 task、validation rules 和 hidden solution。
区域 3：Состояния интерфейса。完成区域任务，继续推进地图。
任务 7：EmptyState: 空状态。阅读简报，完成练习任务，获得 XP。
任务 8：Loading и Error states。阅读简报，完成练习任务，获得 XP。
任务 9：Skeleton card。阅读简报，完成练习任务，获得 XP。
任务 10：NoticeCard: info/warning/error。阅读简报，完成练习任务，获得 XP。
Boss 关卡
本 module 构建 UI Components 的一个聚焦实战部分。每节 lesson 都包含 task、validation rules 和 hidden solution。
Boss 区域：Композиция и финальный UI Kit。这里会把学习内容变成作品集证明。 最终 Boss 项目.
Boss 任务：SegmentedControl: tabs-переключатель。把本区域模式组合成最终成果。 构建在移动尺寸上稳定的屏幕路线。
Boss 任务：最终项目: UI Kit screen。把本区域模式组合成最终成果。 构建在移动尺寸上稳定的屏幕路线。
