用途：为 LessonPlay 构建课堂优化的界面，包括首页、主持端视图、学生端视图等页面布局，以及计时、计分、排行榜、反馈浮层等游戏外层 UI（父应用负责，而非 iframe 内部）。
主要能力：使用 shadcn/ui 基础组件与 Tailwind 工具类，主要组件含 Button（主持控制）、Card（玩家卡片、结果容器）、Input（游戏码、姓名、目标文本）、Badge（玩家名、分数标签）、GameIframe（承载 AI 生成游戏的沙箱 iframe）。设计上强调投影优先（大字号、高对比、远处可读）、触控优先（最小 48px 点击区、不依赖 hover）、极简外观（单流程，弱化导航）。
响应式断点：移动端 <768px 堆叠布局、按钮全宽；平板 768–1024px 接近桌面但略紧凑；桌面 >1024px 完整布局与 2x2 答案网格。
颜色系统：主色 #6C5CE7，成功 #00B894，警告 #FDCB6E，错误 #E17055；选项色 A #E74C3C、B #3498DB、C #F39C12、D #27AE60。
使用方式：在页面与容器组件中按上述模式实现布局、反馈浮层与动画；游戏本身由 AI 生成 HTML，运行在沙箱 iframe 中，外层由父应用包裹。相关文件包括 docs/design.md（线框与设计规范）、app/ 目录页面组件，以及 reference.md 组件代码示例。
适用场景：搭建页面布局、创建外层 UI、构建 GameIframe 及容器、实现反馈浮层与动画、适配课堂响应式、补充加载/错误/空状态。
限制：资料未提供安装命令、依赖版本、收费与价格、性能或效果数据；游戏逻辑不在此技能内，属于 game-engine 技能。