记录分享一下我用Cursor学习构建心流日志App的过程。

与许多爱好笔记软件的派友一样，我也是各种笔记软件几乎都玩了个遍……

Roam Research、Obsidian、Logseq、Tana、Anytype、wolai、思源、flomo……也常年混迹于各笔记软件的用户交流群

初心闪现

经历了N多折腾，心底总有一个小念头在不断往外涌现——我能不能自己也写个简单的小应用？

与派友Note-taking同好们很有共鸣的一个点：使用笔记软件本身是一种思考——如何记录瞬间的灵感？如何回顾笔记？如何管理数据存储？如何与群友分享自己的思考？

于是一个一直要解决的场景浮上心头：能不能自己订制化地做一个款笔记软件，来彻底无压力的记录心流想法？（心流：一种注意力高度集中的心理状态，让人可以高效、忘我地工作和学习）

人一旦有了想法，就会心痒难耐

咱们说干就干，马上行动起来。可是完全不会代码和编程怎么办？

首先要了解一些技术框架。我们在面对全新的领域时，可以去搜索，也可以去问AI

最近最火的AI工具就是Cursor了

Cursor 是一款AI编程工具，采用了Claude 3.5在内的最新的大模型。当然它也可以作为问答机器人来使用了。

我们问一下Cursor，如何搭建一款无压记录的心流日志，应该使用什么技术框架、学习路径是怎样的？

问一个好问题，是一切良好学习体验的开端

大致搜索学习一下，就会了解到非常专业的学习指导，我们选择了NextJS + shadcn/ui 这一套全栈技术栈组合去学习

首先是大名鼎鼎的NextJS，也是目前最热门的全栈框架，最主要的优点可以实现SSG服务器端渲染，blabla……去它的官网上快速浏览一遍官方文档，这是个非常好的学习习惯，如果时间允许，把它的官方示例在Cursor或VS Code里跑一下。因为我们不是要专门介绍编程（我水平也有限，就不献丑了。主要有Cursor，也不需要过多深入学习，了解个框架就可以了）

然后是shadcn/ui，这是个非常新且热门的组件集，有许多优雅设计的组件可以乐高式地来使用

部署 NextJS 15 + shadcn/ui

接下来，把这两大法宝部署起来，就可以和Cursor愉快地互动起来了。

一个好的开始：

“使用NextJS 14和shadcn/ui 帮我设计一款web应用，要求：

1. 可以快速记录日志
2. 日志以列表的形式呈现
3. 组件使用shadcn/ui，要求现代简洁设计
4. 具有亮/暗模式切换
5. 日志列表可以切换顺序排列/逆序排列

再加上亿点点耐心……

让Cursor帮我们回顾一下目前我们生成的代码结构

在和Cursor配合构建的过程中，我也学到了不少技术概念，这又对我继续开发项目起到了很好的推动作用：一个良好的正反馈循环形成了

目前「心流日志」项目可以实现的主要功能：

• 心流模式快速记录
• url网址链接的识别
• [[]]wikitext语法识别、双向链接
• 多行文本支持
• Local Storage 数据持久化

下一步的开发计划：

• 更多语法支持（考虑代码块）
• 数据库
• 注册和登录功能

目前项目我已经上传GitHub并部署到Zeabur了。最近我派和Zeabur搞联名活动，我也是毫不犹豫地入手了

这是我的项目地址和Zeabur的推广活动链接，都在下方了，大家可以去体验一下，尽早享受Cursor AI编程给我们带来的认知加速的快感。