01 · UI 规范与组件描述

用语言描述视觉风格

不需要设计软件，只需要描述你想要的效果：

帮我设计一个在线教育平台的视觉风格，作为我们的设计基调：

品牌感：专业但不死板，有温度，面向技术人群
色彩方向：深色主色调（不是黑色，有点蓝或紫的感觉）+ 鲜亮强调色
字体：无衬线，代码区域用等宽字体
整体感：干净、有呼吸感，留白要充足

给我：
1. 推荐的主色 / 辅色 / 强调色（Hex 值）
2. 字体推荐（系统字体栈，不用引入字体文件）
3. 间距和圆角规范
4. 用 Tailwind CSS 的 CSS 变量实现这套规范

从描述到组件代码

写一个课程卡片组件（CourseCard），视觉要求：

- 白色卡片，圆角 12px，轻微阴影
- 课程封面图（宽高比 16:9，懒加载）
- 分类标签（小丸子样式，和主题色对应）
- 课程标题（2 行截断）
- 讲师名字 + 头像（小）
- 价格（大，强调色）/ 如果是免费显示「免费」
- 底部：学员数、课时数、评分（星级）
- Hover 时卡片轻微上浮（transform + shadow 变化）

用 TypeScript 写，props 要有完整类型定义。

生成页面布局

写课程详情页的整体布局（只写骨架，不填细节内容）：

布局：左右两栏
- 左栏（宽 65%）：课程信息、简介、课程大纲
- 右栏（宽 35%，固定定位）：购买卡片

移动端：两栏变单栏，购买卡片移到底部（sticky）

用 Tailwind CSS，组件名 CourseDetailLayout，接受 leftContent 和 rightContent 两个 slot。

设计审查

读 /src/components/ 下的所有组件文件，
检查 UI 一致性问题：

重点找：
- 圆角值不统一（有用 4px 有用 8px 的地方）
- 颜色硬编码（不走 CSS 变量或 Tailwind 主题色）
- 间距不遵循 4px 栅格
- 按钮样式不统一

输出问题列表，按严重程度排序。