5天从0上线一个会"因材施教"的分龄AI研学助手

SOLO挑战赛专区
, ,
1

【Code with SOLO】

用 SOLO 从 0 到 1 打造场景化智能分龄 AI 研学助手

YExplorer · 中国海洋大学文旅 AI 助手 · 2026.05

一、摘要

用 TRAE SOLO 仅通过自然语言描述，从零搭建了一个面向中国海洋大学文旅研学场景的 AI 智能助手 YExplorer。它具备分龄适配能力——同一个问题，对小学生、高中生、大学生给出不同深度的回答；支持深度思考（Thinking）模式，AI 会在给出答案前先展示推理过程；同时内置了完整的研学知识库，涵盖海大特色场馆、科研计划解读等内容。

从构思到上线，整个开发周期不到一周。核心代码（Flask 后端 + 纯前端）全部由 SOLO Coder 辅助完成，我只负责需求描述、效果验证和少量微调。

~5天开发周期

3档分龄适配

0前端框架依赖

1人产品经理

二、背景

我是新核创研社的产品经理，日常聚焦于 AI 编程工具、教育产品和 Web 应用的孵化。当时面临的挑战是：

  • 场景需求明确——中国海洋大学（OUC）拥有丰富的海洋科普资源（海洋博物馆、山实验室、深海圈层前沿科学中心等），但缺乏一个让访客能"先了解、再实地参观"的数字化入口。

  • 目标用户跨年龄段——研学活动的参与者从小学生到高中生不等，不同年龄段对同一知识的理解深度和需求完全不同。

  • 希望用 AI 提效——作为一个产品经理，我不是专业前端工程师。传统开发一个完整的 AI 对话应用需要搭建前端、后端、部署、联调……我希望借助 AI 编程工具，让我能专注于产品定义而非代码实现。

基于这些诉求，我确定了产品的核心定位：

YExplorer（研探）——中国海洋大学场景化智能分龄 AI 研学助手。它不是一个通用聊天机器人，而是深度绑定海大特色资源、根据用户年龄段智能适配回答深度的垂直 AI 产品。

三、实践过程

3.1 任务拆解

我将整个项目拆解为 5 个阶段，每个阶段通过自然语言与 SOLO Coder 协作完成：

阶段 任务 SOLO 能力使用
Phase 1 产品方案设计 & UI 规范定义 文档生成 + 设计系统构建
Phase 2 前端页面开发（HTML/CSS/JS） Web 开发 + 代码生成
Phase 3 Flask 后端 + GLM API 接入 后端开发 + API 集成
Phase 4 功能迭代 & Bug 修复 代码审查 + 自动修复
Phase 5 部署上线（Render） 自动化脚本 + 部署配置

3.2 关键操作过程

Phase 1：产品方案设计

我没有写一行代码，而是直接用自然语言向 SOLO 描述了产品愿景。SOLO 生成了一份 1200+ 行的完整产品设计方案，包含：

  • 设计原则（对话即一切、克制设计、零干扰、直觉操作）

  • 完整的 Design Tokens 系统（色彩、字体、间距、圆角、动效）

  • 布局规范（精确到像素级别）

  • 组件设计规范（侧边栏、对话气泡、输入区）

  • 技术选型方案（原生 JS + Flask + marked.js）

  • 分阶段实施计划

这份方案本身就成了后续开发的"蓝图"，SOLO 根据它来生成代码，确保一致性。

Phase 2：前端开发

我的核心指令是：

“帮我做一个AI对话助手的前端页面，风格参考豆包和通义千问的极简设计。左侧是侧边栏（280px），包含新建对话按钮和历史对话列表，底部有地图指引、研学资源、联系我们三个入口。右侧主区域是对话界面，包括消息气泡和输入框。要用纯HTML/CSS/JS实现，不用任何框架。配色用海大蓝（#1E88E5），整体风格要克制、留白多、没有多余装饰。”

SOLO Coder 自动创建了完整的文件结构：index.html、css/ 目录下 8 个 CSS 文件（tokens、reset、layout、sidebar、chat、input、welcome、responsive），以及 js/ 目录下的核心逻辑文件。

Screenshot_20260427162641
Screenshot_202604271626411919×980 164 KB

▲ YExplorer 对话界面 — 小学低段用户询问"什么是透明海洋计划"

Phase 3：后端开发 & API 集成

后端的实现同样通过自然语言完成。核心逻辑是：

  1. 启动时从 knowledge_base/ 目录动态加载 Markdown 知识库文件到内存

  2. 接收前端发来的消息 + 年龄段参数

  3. 将知识库内容 + 用户问题 + 年龄段提示词组装成 system prompt

  4. 调用智谱 GLM-4.1V-Thinking-Flash API（支持深度思考模式）

  5. 返回 AI 回复（包含思考过程和最终回答）

# 关键 Prompt 组装逻辑（简化版） system_prompt = f"“” 你是研探（小探），中国海洋大学文旅AI研学助手。 【你的知识库】 {KNOWLEDGE_BASE} 【用户年龄段】 {age_group} 请根据用户年龄段调整回答深度： - 小学低段：用简单有趣的语言，多用比喻和emoji - 高中阶段：结合高中教材（生物、地理、物理、化学）深度解读 - 大学阶段：专业学术级别，可涉及前沿研究 “”"

Screenshot_20260427162750
Screenshot_202604271627501919×972 200 KB

▲ 高中段用户询问"海洋大学研学推荐"，AI 结合高中学科知识给出分门别类的研学路线

Screenshot_20260427162816
Screenshot_202604271628161919×980 173 KB

▲ 研学推荐详情 — 将海洋博物馆资源与高中生物/化学教材章节精准对应

Phase 4：迭代 & 修复

这一阶段是我与 SOLO 交互最频繁的部分。我会用截图 + 口语化描述指出问题，SOLO 自动定位并修复：

Screenshot_20260503114111
Screenshot_202605031141111099×973 63.7 KB

▲ 用自然语言向 SOLO 描述功能问题，SOLO 自动分析代码并修复

例如，我发现侧边栏有一些没用的功能键（AI 浏览器、AI 创作），直接用口语告诉 SOLO：

“现在基本没什么大问题，就是去除一下目前的网站上有很多那种没用的功能键。你像那个侧边框里的 AI 浏览器和 AI 创作，它是完全没有有用的，对吧？AI 创作你可以替换掉，替换一下，就之前旧网站不是有首页有那个什么宣传片之类的东西，对吧？你就可以把它替换掉……”

SOLO 自动理解了意图，执行了以下操作：

  • :white_check_mark: 查看网站结构，找到侧边栏的 AI 浏览器和 AI 创作功能键

  • :white_check_mark: 删除或替换无用的 AI 浏览器功能键

  • :white_check_mark: 将 AI 创作替换为旧网站的宣传片等内容

  • :white_check_mark: 检查语音输入功能，能实现就实现，不能实现就删除语音图标

  • :white_check_mark: 测试网站是否正常工作

3.3 踩过的坑

① Render 部署时找不到模块——最初 Flask 应用没有用标准的包结构（app/_init_.py），导致 Render 部署时报错 ModuleNotFoundError: No module named 'app'。SOLO 帮我把入口文件重构为 Flask 应用工厂模式（create_app()），问题解决。

② API Key 安全——最初 API Key 硬编码在代码中。SOLO 帮我改成了环境变量 + .env 文件的方式，并创建了 .env.example 模板和 .gitignore 排除规则。

③ 免费服务器休眠——Render 免费版 15 分钟无访问会休眠。SOLO 给出了使用 cron-job.org 每 5 分钟 ping 一次的解决方案。

Phase 5：部署上线

SOLO 自动生成了一键部署指南，包含完整的 render.yaml 配置文件和 5 步部署流程：

  1. Git 初始化 + commit

  2. 创建 GitHub 私有仓库

  3. 推送到 GitHub

  4. 在 Render 上创建 Web Service（自动读取 render.yaml）

  5. 配置环境变量 GLM_API_KEY → 上线！

四、成果展示

4.1 产品形态

YExplorer 是一个沉浸式 AI 对话应用，首页即对话，零跳转：

Screenshot_20260427163556
Screenshot_202604271635561919×989 197 KB

▲ 欢迎页 — “有什么我能帮你的吗？” 配合快捷 prompt 卡片引导用户开始对话

4.2 核心功能

① 分龄智能适配

同一个问题"什么是透明海洋计划"，不同年龄段得到的回答完全不同：

  • 小学低段：“透明海洋计划呀，就像给海洋戴了一副’超级透明眼镜’一样:magnifying_glass_tilted_left: 它可不是真的让海洋变得透明哦，而是科学家们想更清楚地看到海洋里的秘密！比如，海洋里有多少可爱的小鱼:fish:、小螃蟹:crab:？”

  • 高中阶段："透明海洋计划"是我国国家级海洋科技专项，由中国科学院、教育部等多部门联合推进，目标是构建"从空间到过程、从数据到应用"的全链条海洋认知体系。以下结合高中学科知识（地理、物理、化学）详细说明……

② 深度思考（Thinking）模式

接入智谱 GLM-4.1V-Thinking-Flash 模型，AI 在给出答案前会先展示完整的推理过程：

  • 识别用户问题的类型（概念性/推荐类/操作性）

  • 结合用户年龄段确定回答策略

  • 关联知识库中的相关内容

  • 组织回答结构

这让用户能清楚看到 AI 是怎么"想"的，不仅增加了可解释性，也让回答质量更高。

③ 研学知识库

内置了完整的海大研学知识库，包括：

  • 海大特色场馆介绍（海洋博物馆、山实验室、深海圈层前沿科学中心等）

  • 国家重大海洋科技计划解读（透明海洋计划、深海极地科考等）

  • 研学路线推荐（按学科、按年龄段）

  • 升学/选科建议

④ 多页面体系

除了 AI 对话主页，还包含三个辅助页面：

  • 地图指引（map.html）— 海大校园地图导览

  • 研学资源（resources.html）— 研学资料、PDF 文档下载

  • 联系我们（contact.html）— 反馈与建议

4.3 技术架构

层级 技术选型 说明
前端 原生 HTML/CSS/JS 零框架依赖，轻量高效
Markdown 渲染 marked.js + highlight.js AI 回复富文本展示
本地存储 IndexedDB + localStorage 历史对话持久化
后端 Flask 3.0 Python 轻量 Web 框架
AI 模型 智谱 GLM-4.1V-Thinking-Flash 支持深度思考模式
部署 Render (Free Tier) gunicorn 生产级服务器

五、效果与总结

5.1 提效对比

传统完整 Web 项目
需要 2-4 周

SOLO完整 Web 项目
仅需 ~5 天

作为一个产品经理（非专业前端工程师），我从构思到上线一个完整的 AI 对话应用，只用了大约 5 天时间。其中绝大部分时间花在需求验证、效果测试和微调上，而非写代码。

5.2 SOLO 在流程中做了什么

  • 需求转代码——我将产品想法用自然语言描述，SOLO 将其转化为可运行的 HTML/CSS/JS/Python 代码。

  • 自动化文档——自动生成完整的产品设计方案、技术架构文档、部署指南。

  • 智能调试——我用口语化描述问题 + 截图，SOLO 自动定位代码位置并修复。

  • 部署自动化——生成 render.yaml 配置文件，一键部署到 Render 云平台。

  • 安全加固——自动识别 API Key 硬编码风险，改为环境变量方案。

5.3 可复用的方法

通过这次实践，我总结了一套 "产品经理 + AI 编程"的协作范式：

  1. 先设计，后编码——用自然语言让 AI 先生成完整的产品设计方案，作为后续开发的"蓝图"，确保一致性。

  2. 分阶段推进——不是一次性让 AI 完成所有事，而是按 Phase 1→5 逐步推进，每步验证后再进入下一步。

  3. 口语化交互——不需要懂代码语法，用日常语言描述需求和问题，AI 能准确理解并执行。

  4. 重视文档——让 AI 生成部署指南、技术文档，方便后续维护和交接。

  5. 安全第一——主动关注 API Key 安全、敏感信息保护等问题，让 AI 帮你加固。

5.4 对 AI 工作方式的思考

SOLO 并没有取代我的产品经理角色——它只是让我从"代码实现者"变成了"产品定义者"。我不再需要纠结 CSS 怎么写、Flask 路由怎么配、IndexedDB 怎么用，而是可以专注于：这个功能用户真的需要吗？这个回答对高中生来说够深入吗？这个研学路线的推荐逻辑合理吗？

AI 编程工具的真正价值不在于"让不会写代码的人写出代码"，而在于让懂业务的人能以最快的速度把想法变成产品。

YExplorer 目前还在持续迭代中。后续计划包括：移动端深度适配、语音交互、研学路线规划算法、以及与海大实际研学活动的线下联动。

项目仓库已开源：GitHub（私有仓库）Elong-svg，部署地址：Render（免费版）。完整技术文档和部署指南见项目仓库。

作者：Elon Wu

项目：YExplorer — 中国海洋大学场景化智能分龄 AI 研学助手