【Hello AI 科技致善】用 Trae SOLO 打造计算机科学快速学习系统

SOLO挑战赛专区
,
1

摘要

面向计算机科学自学者，在学习路径规划场景下提供系统化的课程导航与进度追踪能力，目前通过 18 个专业方向、138 门课程、完整的进度管理系统验证有效。

真实场景与需求

目标人群

计算机科学自学者，包括：

  • 非科班出身想转行的职场人士

  • 在校学生希望系统化补充课外知识

  • 技术从业者想要拓展技能树

痛点描述

在学习过程中，他们常常遇到以下困境：

  1. 学习路径混乱 — 不知道该学什么、先学什么后学什么，今天看点前端、明天看点后端，知识碎片化严重

  2. 资源选择困难 — 网上教程太多，质量参差不齐，不知道哪个适合自己当前水平

  3. 进度难以追踪 — 学完就忘，不知道自己掌握了多少，缺乏成就感

  4. 缺乏学习动力 — 一个人学习太孤独，没有激励机制，容易半途而废

现有做法

目前通常的解决方案：

  • 搜索引擎 — 搜索"前端学习路线"等关键词，但结果零散、缺乏系统性

  • 在线课程平台 — 如慕课网、Coursera，但课程之间缺乏关联，难以形成完整知识体系

  • GitHub 路线图 — 如 developer-roadmap，内容丰富但只有静态图片，无法追踪进度

为什么不够？

  • 缺乏个性化：无法根据用户当前水平推荐学习内容

  • 缺乏互动性：无法记录学习进度，无法获得反馈

  • 缺乏激励：没有经验值、徽章等游戏化元素维持学习动力

作品介绍

CS-Stack 是一个基于 ACM/IEEE CS2023 标准的计算机科学学习路径平台。

核心功能

功能模块 说明
学习方向选择器 18 个专业方向（前端、后端、AI、安全等），122 个子方向
技能树可视化 展示课程依赖关系，清晰呈现学习路径
课程内容系统 138 门课程，采用三层漏斗学习法（核心层 20% + 重点层 20% + 扩展层 60%）
学习计划管理 添加整个方向或单独课程到学习计划，追踪完成进度
技能档案 展示已掌握的技能，按方向分组
激励机制 经验值、成就徽章、连续打卡
AI 管理后台 通过 AI API 持续发现并添加新课程

技术架构

前端：React 18 + Vite + TypeScript + TailwindCSS
后端：Python 3.11+ + FastAPI + Pydantic
存储：JSON 文件持久化
认证：JWT

用 Trae SOLO 实现的过程

任务拆解

整个项目采用渐进式开发，主要分为以下阶段：

  1. 基础设施搭建 — 脚手架、存储层、认证系统、基础 API

  2. 课程系统开发 — 前端展示、详情页、进度追踪

  3. 学习方向与技能树 — 方向选择器、技能树可视化、学习计划

  4. 激励机制 — 经验值、徽章、打卡系统

  5. 课程内容生成 — 使用 course-designer skill 批量生成课程

使用的 SOLO 能力

能力 使用场景
代码生成 快速生成 React 组件、FastAPI 路由、数据模型
代码重构 优化组件结构、提取公共逻辑、修复 TypeScript 类型错误
文件操作 创建、修改、删除文件，批量生成课程 Markdown 文件
搜索与理解 理解现有代码结构，定位需要修改的代码位置
Skill 系统 创建 course-designer skill，用于生成标准化的课程内容
调试辅助 分析错误日志，定位并修复 bug

关键 Prompt 示例

1. 设计学习计划功能

需要设计一个我的学习计划，它就是一个学习方向清单，清单下的课程，已经学了多少，学习中多少，未学多少。
可以进入学习方向。学习方向页面要加几个功能：
1. 可以学习整个学习方向
2. 可以学习学习方向下的任意课程

2. 创建课程生成 Skill

你是一位资深计算机教育专家，精通认知负荷理论与费曼教学法。
你的唯一任务是：当用户指定任意计算机技术领域时，为其生成一份深度、可自学、带完整代码示例的三层漏斗学习教程。

核心教学模型：三层漏斗学习法
| 层级 | 占比 | 定义 |
|核心层 | 20% | 基石内容，不掌握则后续学习完全无法推进 |
| 重点层 | 20% | 进阶内容，掌握后能显著提升效率 |
| 扩展层 | 60% | 广度内容，特定场景下才需要的边缘知识 |

3. 批量生成课程内容

遍历所有学习方向，按子学习方向，补充完整所有的课程。
比如前端开发，有了 React，就漏了 Vue。少了非常多。
你一个个仔细补全。

踩过的坑

  1. TypeScript 类型错误 — 生成的代码有时缺少类型定义，需要补充 interface

  2. Markdown 渲染问题 — 表格和代码块需要额外的 remark/rehype 插件支持

  3. 状态管理 — 组件间状态传递需要仔细设计，避免 prop drilling

  4. 文件路径问题 — Skill 生成的文件需要指定正确的输出目录

解决方案

  • 使用 GetDiagnostics 工具检查 TypeScript 错误

  • 添加 remark-gfm 和 rehype-highlight 插件

  • 通过 props 和 API 调用管理状态

  • 在 Skill 中明确定义文件输出路径规则

成果展示

我的学习计划

my plan
my plan1920×1032 61.6 KB

学习方向

direction
direction1920×1032 138 KB

课程列表

course
course1920×1032 94.4 KB

课程详情

course detail
course detail1920×1032 128 KB

仪表盘

dashboard
dashboard1920×1032 71.8 KB

管理后台

admin
admin1920×1032 41.9 KB

项目链接

GitHub: https://github.com/AlanHuangYan/CS-Stack

技术栈: React + FastAPI + JSON Storage

总结

18

专业方向

138

课程数量

122

子方向

通过 Trae SOLO，我在短时间内完成了一个完整的计算机科学学习平台开发：

  • 18 个专业方向，覆盖前端、后端、AI、安全等热门领域

  • 138 门课程，每门课程都包含完整的代码示例和知识点讲解

  • 完整的用户系统，支持注册、登录、进度追踪

  • 激励机制，通过经验值、徽章、打卡维持学习动力

Trae SOLO 大幅提升了开发效率，让我能够专注于产品设计而非重复性编码工作。特别是在课程内容生成方面，通过自定义 Skill 系统，实现了标准化、高质量的课程内容批量生成。

Created with Trae SOLO

CS-Stack - 计算机科学学习路径平台