【标签】 学习工作
【学习工作赛道】「时空旅行 —— 以古籍之美，载千年之史」DEMO
【正文】
0. 先和大家打个招呼吧 
我是谁：我是一名零技术背景准备转型的职场人。
我是怎么用 TRAE 把这个 Demo 做出来的：
说实话，参赛前我没想过自己能在几天内把一个完整的解惑工具从“零”推到线上。整个 Demo 从项目最初化、知识获取、页面搭建、规则引擎到可以运行，都是在 TRAE WORK 里跟 AI 一句句"聊"出来的。
我会让 TRAE 一次性爬取大量知识文件，帮我筛选关键信息、理解运行逻辑并设计条件匹配规则，它通常能给出大部分的代码。作为零代码基础的用户，我大部分时间其实是在做测试审查工作——运行代码、确认效果是否符合预期。我把 TRAE 当作协作伙伴，不断把一闪而过的模糊想法丢给它，我们一起讨论细节、确认方案、制定技术路线，快速把想法变成可运行的功能。
这个作品本身也是为我遇到过的痛点做的，所以写起来特别有动力。希望它也能帮到你。
1. Demo 简介
-
是什么：一款移动端风格的应用，采用古朴米黄色调仿古籍装帧设计，包含「历史上的今天」「人物传记」「全局搜索」三大功能，纯前端实现，无需后端。
-
面向谁：
-
对历史感兴趣、想系统了解历史事件和人物的普通用户
-
需要补充课外历史知识的学生群体
-
喜欢中国传统文化、偏好古典美学的文化爱好者
-
利用碎片时间进行知识获取的上班族
-
主要功能：
2. Demo 创作思路
-
灵感来源：每天看日历，总会好奇「历史上今天发生了什么？」。如果能有一个像罗盘一样的工具，每天为我指引一段历史故事，那该多好。再加上我一直很喜欢古籍的装帧美学——泛黄的纸张、古朴的配色——为什么不把这种美感融入一个现代 App 里呢？
-
想解决的问题：现有的历史学习工具要么太学术（维基百科式），要么太娱乐（短视频式），普通人很难找到一个既轻松又有文化底蕴的历史学习入口。我想做一款打开就能看、每天都能学的历史 App，让了解历史变成一件自然且愉悦的事。
-
为什么做这个方向：现有产品要么枯燥要么过度娱乐化，缺乏「每日发现」机制，白话文传记资源稀缺，移动端体验普遍不佳。
3. Demo 体验地址（三选一）
- 交互式可体验的HTML格式文件，链接：
demo.zip (378.6 KB)
4. TRAE 实践过程
1、用自然语言描述想法
在 TRAE Work 的对话框中，用日常语言描述你想做什么 App。不需要懂技术术语，把你的想法说清楚就行。
我对 TRAE 说：
我想做一个移动端风格的历史学习 App，叫"时空旅行"。主要功能有三个：1）历史上的今天——自动展示当天发生的历史事件；2）人物传记——12位中外历史人物的白话文传记；3）全局搜索——能搜索人物、事件、时间。设计风格要古朴典雅，仿古籍装帧，米黄色调。
TRAE 理解后：
好的，我理解了你的需求。我会创建一个纯前端的移动端风格 Web 应用，包含三个标签页（历史上的今天、人物传记、全局搜索），采用古朴的米黄色调仿古籍装帧设计。项目结构包括 index.html、styles.css、data.js、app.js 四个文件。
小贴士
需求描述越具体，AI 生成的效果越好。可以提前想好：App 叫什么名字、有几个功能、什么风格、什么色调。不确定也没关系，TRAE 会在对话中追问细节。
2、确认开发计划
TRAE 会自动将需求拆解为多个步骤，例如：
- 搭建项目结构（创建 4 个文件）
- 编写 HTML 页面骨架（三标签页布局）
- 编写 CSS 样式（古籍装帧风格 + 响应式）
- 编写历史数据（事件 + 人物传记）
- 编写交互逻辑（日期选择、弹窗、搜索）
确认计划后，AI 开始自动执行。
3、实时观察 AI 工作
在 TRAE Work 的 Code 模式下，你可以实时看到 AI 的工作过程：
- 左侧：任务管理面板，显示当前步骤和进度
- 中间：AI 工作台，展示正在执行的命令和代码改动
- 右侧：网页实时预览和文件浏览
AI 会自动创建文件、安装依赖、编写代码，全程白盒化——每一步操作都清晰可见。
我对 TRAE 说：
配色要用古朴的米黄色调，仿古籍装帧效果。桌面端要显示手机外壳，手机端全屏。
TRAE 立刻执行：
正在编写 styles.css…已设置 CSS 变量：–bg: #fdf8ef（纸白）、–accent: #c8a267（土黄）、–accent2: #8b6f47（深棕）。已添加手机外壳容器样式（42px 圆角黑框 + 阴影），并设置 @media 查询实现响应式。
4、实时预览
TRAE Work 内置浏览器预览功能，AI 每写完一段代码，右侧预览区就会自动刷新，你可以边看边改。看到不满意的地方，直接在对话框里提修改意见。
我对 TRAE 说：
传记弹窗从底部滑出的效果不够平滑，加个过渡动画。搜索结果里的关键词要高亮显示。
TRAE 立刻修复：
正在修改 app.js…已为弹窗添加 CSS transition（transform 0.3s ease）。已为搜索结果添加关键词高亮函数，使用正则匹配并包裹 mark 标签。
小贴士
如果 AI 遇到报错，它会自动识别浏览器中的错误信息并修复代码，通常不需要你手动干预。遇到长任务中断，直接输入"继续"即可。
5、填充内容数据
对于内容型应用，历史事件和人物传记需要真实数据。可以通过对话让 TRAE 帮你编写：
我对 TRAE 说：
帮我写 12 位历史人物的白话文传记，每人 6-8 段。中国古代：孔子、李白、李世民；中国近代：鲁迅、毛泽东、邓小平；世界历史：拿破仑、亚历山大大帝；世界科学：爱因斯坦、牛顿、居里夫人。
TRAE 执行：
正在生成人物传记数据…已为 12 位人物各生成 6-8 段白话文传记，存入 data.js 的 biographies 数组中。每位人物包含 name、category、avatar、bio 字段。
6、审核 AI 的代码改动
TRAE 的 DiffView 功能会以 diff 形式展示所有代码变更（新增绿色、删除红色），你可以逐文件审核。每个改动都可以单独接受或拒绝，确保代码质量。
小贴士
虽然 AI 大部分时候写得很靠谱，但还是建议扫一眼关键文件的改动。特别是 CSS 样式和交互逻辑，确认效果符合预期。
7、持续对话迭代
通过多轮对话不断完善细节。以下是我在开发「时光罗盘」时的实际迭代过程：
- 「手机外壳的阴影太重了，调轻一点」→ 调整 box-shadow 参数
- 「标签页切换时加个下划线指示当前页」→ 添加 active 状态样式
- 「搜索加个 200ms 防抖，避免输入时频繁刷新」→ 添加 debounce 函数
- 「传记弹窗里的文字行距太紧了」→ 调整 line-height 为 1.8
- 「加几个预设的热门搜索关键词」→ 添加 chips 数组和渲染逻辑
每次提出修改意见，AI 只修改相关文件，不会破坏已有功能。
8、全功能测试
在预览中逐一验证所有功能：
- 「历史上的今天」页面是否正确读取系统日期
- 日期选择器是否能切换到任意日期
- 人物传记分类筛选是否正常
- 弹窗是否从底部平滑滑入
- 搜索是否支持人物、时间、事件三类
- 关键词高亮是否生效
- 手机端和桌面端的响应式效果
9、获取 Demo 文件
TRAE Work 完成开发后，所有项目文件都会保存在本地工作目录中。对于「时光罗盘」，最终的文件结构为：
- index.html — 页面结构（三标签页布局）
- styles.css — 样式（移动端 App 风格 + 古籍质感）
- data.js — 历史数据（事件 + 人物传记）
- app.js — 交互逻辑（日期、弹窗、搜索）
由于是纯前端项目，直接双击 index.html 即可在浏览器中运行，无需任何服务器或后端服务。
10、核心体会
整个过程中，我一行代码都没有手动写。从需求描述到代码生成、从预览调试到细节打磨，全部通过自然语言对话完成。TRAE Work 真正实现了「你说需求，AI 帮你造」的体验。这正是"世界很大，放手去造"的大赛精神的最好诠释。
2649188751126259:2500fe6a04d5a1d2a65573e8f557e528_6a32a34b9e90f05da44cc76d.6a32a34b9e90f05da44cc770.6a32a34b9e90f05da44cc76e:TRAE Work CN.0.1.25.no_sid.no_ppe.T(2026/6/17 21:38:19)
2649188751126259:2f43b0d807c26f0f9a8a534a2facb393_6a32a34b9e90f05da44cc76d.6a32a5f99e90f05da44cc7cb.6a32a5f99e90f05da44cc7c9:TRAE Work CN.0.1.25.no_sid.no_ppe.T(2026/6/17 21:49:45)
2649188751126259:a9767a8ab4249f5b76f0e8ecc13ec8c3_6a32a34b9e90f05da44cc76d.6a32a7079e90f05da44cc7e3.6a32a7079e90f05da44cc7e1:TRAE Work CN.0.1.25.no_sid.no_ppe.T(2026/6/17 21:54:15)
2649188751126259:a5e76c9f76fe12968f76010f0475c7dc_6a32a34b9e90f05da44cc76d.6a32a96e9e90f05da44cc830.6a32a96e9e90f05da44cc82e:TRAE Work CN.0.1.25.no_sid.no_ppe.T(2026/6/17 22:04:30)
2649188751126259:a422975545b3160ef97f5f9c41354bf3_6a32a34b9e90f05da44cc76d.6a33e8feeb88c6592e77ea8c.6a33e8feeb88c6592e77ea8a:TRAE Work CN.0.1.25.no_sid.no_ppe.T(2026/6/18 20:47:58)
2649188751126259:a31cd5b60731f19ce38dad81cd0b0839_6a32a34b9e90f05da44cc76d.6a33f3d8eb88c6592e77eb28.6a33f3d8eb88c6592e77eb26:TRAE Work CN.0.1.25.no_sid.no_ppe.T(2026/6/18 21:34:16)
2649188751126259:e27f409973e1a6424e762573d34f307d_6a32a34b9e90f05da44cc76d.6a33fc88eb88c6592e77ec5b.6a33fc88eb88c6592e77ec59:TRAE Work CN.0.1.25.no_sid.no_ppe.T(2026/6/18 22:11:20)
2649188751126259:52e7a1841d10647e982b37b5f5bb1d8b_6a32a34b9e90f05da44cc76d.6a3925d619a30f6755adc185.6a3925d619a30f6755adc183:TRAE Work CN.0.1.25.no_sid.no_ppe.T(2026/6/22 20:08:54)
2649188751126259:de2830a4ec5c1dedbe182626212e256c_6a32a34b9e90f05da44cc76d.6a39469919a30f6755adc1dc.6a39469919a30f6755adc1da:TRAE Work CN.0.1.25.no_sid.no_ppe.T(2026/6/22 22:28:41)
2649188751126259:849c4cd3c915ea2369d914edc0fe66c4_6a32a34b9e90f05da44cc76d.6a39481319a30f6755adc202.6a39481319a30f6755adc200:TRAE Work CN.0.1.25.no_sid.no_ppe.T(2026/6/22 22:34:59)
2649188751126259:54da59b47dafc87d1027c54eced0a044_6a32a34b9e90f05da44cc76d.6a3bd825fd8f2203a4febc45.6a3bd825fd8f2203a4febc43:TRAE Work CN.0.1.25.no_sid.no_ppe.T(2026/6/24 21:14:13)
2649188751126259:bb43c25db06712ff9431f6739637a8b0_6a32a34b9e90f05da44cc76d.6a3bd91bfd8f2203a4febc81.6a3bd91bfd8f2203a4febc7f:TRAE Work CN.0.1.25.no_sid.no_ppe.T(2026/6/24 21:18:19)
2649188751126259:6d0218e2e026f8ff7a8f1ba8ab614213_6a32a34b9e90f05da44cc76d.6a3bebb0fd8f2203a4febd19.6a3bebb0fd8f2203a4febd17:TRAE Work CN.0.1.25.no_sid.no_ppe.T(2026/6/24 22:37:36)
真实感受：
做这个软件的过程中：前面软件的搭建其实没有什么，主要是后期扩充知识库的时候，我与TRAE进行了频繁的交互。我一直重复同一个提示词，TRAE不厌其烦的给我扩充了不同知识库，非常的有耐心，才能使这个软件的知识库非常得丰富。TRAE 非常棒，在这表示感谢！！！
5. 对应的报名审核通过的帖子链接