# 教育 UI 设计技能 ## 何时使用创建时使用此技能： * 面向学生的界面 * 教师仪表板 * 学习活动 * 评估组成部分 * 进度跟踪用户界面 ## 核心原则 ### 1\.学习科学 * **明确的目标**：始终展示学生将学到什么 * **进度可见性**：显示目标的进展情况 * **即时反馈** ：立即响应互动 * **脚手架**：将复杂的任务分解为步骤 * **间隔检索**：支持复习和练习 ### 2\.辅助功能（WCAG 2.1 AA） * 文本对比度至少为 4.5:1 * 键盘可导航 * 兼容屏幕阅读器 * 焦点指示器可见 * 表单标签和错误信息 ### 3\.移动优先 * 触摸目标≥44px * 无需缩放即可读取 * 方便拇指放置 * 响应式断点 ## Elon 品牌代币 // 始终使用设计标记，切勿使用十六进制代码 className="bg-maroon text-white" // 主要品牌 className="bg-gold text-black" // 次重音 className="bg-surface-dark" // 深色背景 className="text-muted-foreground" // 柔和的文本 // 在 SVG/图表中填充=“var（--颜色栗色）” 描边=“var（--颜色-金色）” ## 组件模式 ### 进度指示器从'@/components/ui/progress'导入{进度}； function LessonProgress({ 完成, 总计 }: { 完成: 数量; 总计: 数量 }) { const 百分比 = Math.round((已完成 / 总计) * 100); 返回（

进度 {百分比}%

<进度值={百分比} className="h-2" />

已完成 {completed} 项活动（共 {total} 项）

）； } ### 学习目标卡从 '@/components/ui/card' 导入 { Card, CardContent, CardHeader, CardTitle }; 从 'lucide-react' 导入 { Target }；函数 LearningObjective({ 目标 }: { 目标: 字符串 }) { 返回（学习目标 <卡片内容>

{目标}

）； } ###反馈留言从 'lucide-react' 导入 { CheckCircle, XCircle, AlertCircle }; 从 '@/lib/utils' 导入 { cn }；类型反馈类型 = '成功' | '错误'| '暗示'; 函数反馈（{ 类型，消息 }：{ 类型：反馈类型；消息：字符串 }）{ 常量配置= { 成功：{ 图标：CheckCircle，className：'bg-green-50 border-green-200 text-green-800' }，错误：{ 图标：XCircle，className：'bg-red-50 border-red-200 text-red-800' }，提示：{ icon: AlertCircle, className: 'bg-amber-50 border-amber-200 text-amber-800' }, }; const { icon: 图标, 类名 } = config[类型]; 返回（

{消息}

）； } ### 流式人工智能响应 '使用客户端'；从 'ai/react' 导入 { useChat } ；从 '@/components/streamdown-content' 导入 { StreamdownContent }；函数 AITutor({ AssistantId }: { AssistantId: string }) { const { 消息、输入、handleInputChange、handleSubmit、isLoading } = useChat({ api: '/api/聊天', 主体：{assistantId}， }); 返回（

{messages.map((m) => (

{m.role === '助理' ? （ ) : (

{m.content}

)}

))}

{/* 输入区域 */}

）； } ## 图表样式（Tremor/Recharts） // 始终对 Elon 品牌颜色使用 CSS 变量常量图表颜色 = { 主要： 'var(--color-maroon)', 次要： 'var(--color-gold)', 第三级： 'hsl(var(--muted))', }; // 颤抖示例 <条形图数据={数据} 索引=“名称” 类别={['值']} color={['rose']} // 映射为栗色 valueFormatter={(v) => `${v}%`} /> ## 清单 * 学习目标看得见 * 存在进度指示器 * 实施即时反馈 * 使用shadcn/ui组件 * 颜色标记（无十六进制代码） * 符合 WCAG AA 标准 * 移动响应 * 键盘可导航 * 屏幕阅读器标签 * 加载带有 Suspense 的状态

教育用户界面

包含技能