- Demo 简介
是什么： 课搭子是一个 Web + 移动端校园协作 App，以课表为主轴，把任务、文件、通知关联到课节上，让发布方（辅导员/老师/班委）和接收方（大学生）共享同一套结构化信息。本次 Demo 为手机端可交互原型，在浏览器中以 iPhone 外框展示，双击即可体验完整核心流程。
面向谁： 双边用户——
发布方： 辅导员、老师、班委（发布通知、布置任务、收作业、发起填表和抽签）
接收方： 大学生（查看课表、接收任务、提交作业、找回文件、对任务提问）
主要功能（3 个核心）：
课表为主轴的关联结构 —— 课表是主界面，不是一堆 tab。点击任一课节进入详情，该课节关联的任务、文件、通知集中展示。调课信息直接体现在课表上，不再单独发群消息。"下节课前收 XX"这种线下收交任务，直接挂在对应课节上，学生知道是哪节课、什么时间、在哪收。
任务不是消息，是可执行的单元 —— 每个任务有截止时间、轻重缓急标注、所属课程、任务要求正文。任务详情内嵌 QA 问答流：学生看不懂直接在任务下提问，AI 基于任务描述先行回答，答不了的转给发布者。告别反复私聊班委。
文件不过期，永远跟任务/课节绑定 —— 不像 QQ 定期清理群文件。文件关联到任务和课节，知道任务或课节就能找到文件，不用翻聊天记录。文件按课程分类，课件、作业、通知、表单各归其位。
Demo 创作思路
灵感来源
上大学时深受其害——重要任务淹没在群消息里，等催了才发现；文件没及时存就过期了；调课通知没看到走错教室；任务要求不清楚做了返工。QQ、微信、学习通都是聊天工具，本质上无法解决"信息关联"的问题。
想解决的问题
大学校园里辅导员和老师发布的通知、任务、文件、调课信息全部散落在 QQ 群和微信群里。这不是"功能不够"的问题，而是所有信息都是一条扁平的消息流，没有任何"上下文绑定"——文件不跟任务绑定，任务不跟课节绑定，调课不跟课表绑定。
信息从发布者→班委→学生的传递链路，在 QQ/微信里全面崩塌，具体表现为 7 处痛点：
痛点 表现
信息淹没 重要和不重要的通知全混在聊天里，分不清轻重缓急
文件过期 QQ 定期清理群文件，当时不存就没了，且不跟任务/课节绑定
任务不清 辅导员写不清要求，学生理解不了，反复私聊确认、返工
调课散落 调课通知发在群里，不看通知的人到上课时才发现走错教室
线下收交脱节 "下节课前收 XX"跟课节没有任何关联，学生不知道是哪节课
重复劳动 填表、抽签每次都要重新建外部表单或用接龙，散落各处
提问无门 任务看不懂只能私聊班委，班委被问烦，学生不敢问，信息不对称
为什么做这个方向
官方参赛指南有一句话打动了我：“与其做一个面面俱到但功能浅显的大平台，不如聚焦于一个具体的痛点，提供极致流畅的解决方案。”
我没有去做"校园版飞书"这种大而全的东西，而是聚焦一个核心洞察：校园事务的根源问题是"信息没有关联"。课搭子的核心差异化不是"也有课表、也有任务管理"——这些飞书钉钉都有。核心差异化是**“关联”**：
Plain Text
1
文件 ↔ 任务 ↔ 课节 ↔ 事件
把散落的信息重新关联起来，这是一个大学生学术场景特有的、飞书钉钉根本不服务的结构。
飞书/钉钉是企业工具，底层假设是自上而下强制推行、层级组织结构、企业工作流。大学生的现实完全不同：没人强制你用某个工具、组织扁平且每学期都在变、学术工作流（作业截止、课表、课件、小组协作）与社交深度混合。差异化不在功能，而在"为谁、解决什么场景下的什么问题"。
-
Demo 体验地址
体验方式： 交互式 HTML 文件课搭子-手机原型.html (133.3 KB)
TRAE 实践过程
4.0 工具选择
全程使用 TRAE Work 完成。选择 TRAE Work 的原因是：0 门槛，不要求编码背景，把需求描述清楚就能让 AI 帮你把创意落地成可运行的应用。符合大赛"人人都可以创造"的核心理念。
4.1 第一步：从痛点到创意——生成创意提案
目标： 把"校园信息散落"这个痛点，做成一个可可视化的创意提案 HTML 文件。
过程：
向 TRAE Work 描述大学校园信息散落的真实痛点，让它帮我梳理"信息链路崩塌"的 7 处具体表现
让 TRAE 帮我探索产品方向：从"校园版飞书"的大平台思路，收窄到"以课表为主轴的信息关联"这个切口
经过多轮命名探索（课字系→古文典故→自然意象→回归本质），最终确定产品名"课搭子"
让 TRAE 生成创意提案 HTML，采用 Swiss Minimalism 2.0 + 编辑杂志风的视觉风格，把"文↔任↔课↔事"的关联网格做成可交互的核心可视化
关键决策： 放弃"面面俱到的大平台"思路，聚焦"信息关联"这一个核心洞察，做深做透。
Session ID 1： 121404112515300:fe77882d8ae978e682aa15fa1c821035_6a35163cfd80879cc955d32d.6a3900c79ee210a883b837a3.6a3900c79ee210a883b837a1:TRAE Work CN.0.1.32.no_sid.no_ppe.T(2026/6/22 17:30:47)
4.2 第二步：从创意到设计——原型设计文档
目标： 把创意提案落地成可交互的手机端原型，先出设计文档再写代码。
过程：
让 TRAE 帮我把创意提案拆解为 多个具体页面：课表页、课节详情页、任务详情页、任务列表页、文件库页、消息中心页等
定义每个页面的布局、交互逻辑、数据模型
确定 Mock 数据结构：courses / tasks / files / notifications 四张表，用关联 ID 串起来
视觉风格延续创意提案：暖白背景 #FAFAF7 + 近黑文字 #0A0A0A + 朱红强调色 #DC2626
关键决策： 课表是主界面，不是一堆 tab。任务/文件挂在课节或任务详情里，不是独立堆砌。发布者和接收者看到的是同一个东西的不同视角，不是两套系统。
Session ID 2：121404112515300:07e7b249934ebd8d4a140d1193e1e1cb_6a4be0af2ceffbceabf83977.6a4be0af2ceffbceabf8397a.6a4be0af2ceffbceabf83978:TRAE Work CN.0.1.32.no_sid.no_ppe.T(2026/7/7 01:06:55)
4.3 第三步：从设计到实现——手机端可交互原型
目标： 按设计文档实现单文件 HTML 原型，内嵌 CSS + JS，桌面浏览器中展示 iPhone 外框。
过程：
让 TRAE Work 按设计文档生成完整的 HTML 原型，包含 6 个页面、4 个底部 Tab、完整的页面切换交互
实现核心交互流程：课表 → 课节详情 → 任务详情 → QA 问答，页面间有滑入/滑出动画
Mock 数据驱动，每个课节关联的任务、文件、通知通过 courseId 关联，体现"关联"这个核心理念
QA 问答流中，回答来源标记为"AI 回答"或"辅导员回答"，体现 AI QA 辅助能力
踩坑与解决：
初版原型的页面切换交互不够流畅，让 TRAE 优化了动画时序和过渡效果
Mock 数据的关联关系一开始不够清晰，重新梳理了数据模型，确保文件↔任务↔课节的关联在界面上能直观体现
Session ID 3： 121404112515300:5fb3fbfd5a53e9e3190115792c49d5de_6a35163cfd80879cc955d32d.6a4a8150c62dcbacf8beb799.6a4a8150c62dcbacf8beb797:TRAE Work CN.0.1.32.no_sid.no_ppe.T(2026/7/6 00:07:44)
4.4 第四步：视觉打磨——引入 ui-ux-pro-max 技能
目标： 让原型的视觉品质从"能跑"提升到"能打"。
过程：
引入 ui-ux-pro-max 技能，让 TRAE 基于专业 UI/UX 设计系统重写原型的视觉层
从配色、字体、间距、图标、动效五个维度系统性优化
保持"简洁不臃肿"的设计原则，拒绝功能堆全，追求"一个故事闭环能跑通"
Session ID 4： 121404112515300:b43e1e4701eb2f38567bb4b0ff12f636_6a35163cfd80879cc955d32d.6a4bc48e162c8115768d3c3b.6a4bc48e162c8115768d3c39:TRAE Work CN.0.1.32.no_sid.no_ppe.T(2026/7/6 23:06:54)
4.5 开发心得
小切口，深挖掘。 放弃"校园版飞书"的大平台思路，聚焦"信息关联"这一个核心洞察。评审看重的不是功能多少，而是是否真实解决了一个具体痛点。
先想清楚再动手。 在写代码之前，先让 TRAE 帮我梳理了完整的项目文档和设计文档。创意提案→项目文档→设计文档→原型实现，每一步都有明确的输入和输出，避免了"写到一半发现方向不对"的返工。
把"关联"做成可体验的东西。 课搭子的核心是"信息关联"，但如果只是文字描述，评审感受不到。所以把"文↔任↔课↔事"的关联做成了可交互的原型——点击课节能看到关联的任务和文件，点击任务能看到关联的文件和 QA，让"关联"从概念变成可触摸的体验。
AI 是协作者，不是工具。 整个过程不是"我提需求，AI 写代码"，而是和 TRAE 一起想清楚问题、探索方向、做出决策。比如产品命名经过多轮探索，最终"课搭子"是和 AI 一起从十几个方向里筛出来的。
报名帖链接
课搭子 — 新一代大学校园事务协作系统 - TRAE AI 创造力大赛 / 【大赛报名专区】 - TRAE 官方中文社区 报名帖标题：课搭子 — 新一代大学校园事务协作系统
。大学时候深有体会——通知全在QQ群里刷屏，文件过期了才想起来没存，调课信息淹没在聊天记录里。把"文件↔任务↔课节↔事件"做成关联结构，比简单堆功能高明太多，这才是真正的信息架构设计。从产品视角说一句，QA问答流的设计也不错，AI先答、答不了转人工，减轻了班委负担。