前言

最近刚刚进行期末考试，我呢喜欢捣鼓计算机的玩意，反正看书是不可能看书的。最后就尝试用 Gemini 配合 Cursor 来构建一个知识库站点。「嗯，我写文章废话比较多，可以先看完一次后再实际操作，我不喜欢做纯教程」

需要准备的内容

Gemini 站点
Cursor 编辑器
Node.Js 用于框架开发（具体为什么可以看编写前端）
Cloudflare / Vercel页面部署

不需要你准备自己的服务器与域名，内容可以通过 Cloudflare 进行解决或者 Vercel

请注意，Vercel 有每个月额度，在目前（2025-07）是每个月 100G 的流量给你，Cloudflare 可以直接部署，没有其他任何限制。但是 Vercel 对国内有一些优化，国内的访问速度还不错，Cloudflare 的话有概率是上不去的，如果想无脑给别人的话还是建议搭建在 Vercel 上（因为不能保证所有人都有魔法上网或者所有人都会改 Cloudflare 的 HOST 解析或 DNS）

这是 Cloudflare

这是 Vercel

准备

Gemini

Emmmm，我感觉嘛其实挺简单的。不过主要依赖还是 Gemini 的深度研究(Deep Research)，这个功能是真的强。

主要还是今年（2025 年）Gemini 的底层模型 Gemini 2.5 模型增强推理能力、原生多模态和扩展长上下文窗口，可以进行更加深入更全面的分析。

需要自己准备一个 Google 账号，然后还需要一个魔法上网的工具。

由于我已经有 Google One 的学生权益，所以 Gemini 我是带 Pro 版本的，差不多对深度研究的使用和 Pro 模型的使用多很多哈。

直接注册一个谷歌账号我记得应该是可以直接用的，只是额度不多而已。另外可以在其他站点搜索一下如何白嫖一些 Google One 的资源（至少学生的目前是无法白嫖的，已经过了时间了）。

Cursor

Cursor 是一款专为开发者设计的 AI 代码编辑器。它旨在通过集成强大的 AI 功能（如代码生成、重构、调试辅助等）来提高编程效率。你可以把它想象成一个智能助手，在你编写代码时提供实时的建议和帮助，让你的开发工作更加顺畅。

接着就是要准备 cursor 编辑器了，用这玩意其实主要是用其 Claude 模型。

吐槽

这个 Cluade B 玩意，很容易封号，而且免费注册的额度巨少，还不如用差不多的 Cursor 可以自选模型，虽然比官方的笨一点，不过也还算可以用。

而且现在的 Cursor 已经没有额度限制了，只有使用量限制。在使用下来的感受下，确实比原来的 500 次的额度舒服很多。

白嫖守则

想白嫖的话，可以准备很多邮箱，每一个新用户可以拿到两周的 Pro 权限 我不知道这个 Pro 权限和直接买的 Pro 有什么具体的差别（但是肯定有差别）

其实可以的话，可以找认识的人一起 AA，一个月 20 美元算够用了，不超过 3 个人「这个 Cursor 只允许三个设备同时登录」，平分一下 20 美元其实还可以说得过去的。

Cloudflare

自己去注册就行了 Cloudflare
或者去注册 Vercel

在这里我只进行 Cloudflare 的演示，毕竟 Cloudflare 的功能比较多，Vercel 就是静态页面的托管平台，比 Cloudflare 操作简单多了，愿意捣鼓的话很快就可以会了（看不懂就机翻，Google 或 Bing 的机翻还是可以的）。

搭建知识库

在这里我主要选定的是我大学课程需要期末考试复习的一个内容（其实我为了写这一篇博文还是从头搭建了一个，之前的没有留下任何截图记录就直接弄完了，因为要期末考试「就两三天时间」，还是比较赶的）。

这里选的是《软件项目管理》，属于我的软件工程专业的一门必修课内容。

请注意，如果您有对应教材的电子版，请你确定你的电子版不是扫描件类型，因为扫描件全部都是图片，没有可复制的文字。虽然 Gemini 模型是多模态模型，但是对于几百页的图片他也不会去识别的。

最好就是看看你的教材第一页第二页有没有二维码可以找到电子版教材（可以复制的文字）、电子 PPT 或者老师在群文件发的 PPT 等。如果有 PPT 的话请务必转为 PDF，Gemini 虽然可以上传 PPT(X) 但是在深度研究模式下不会去解析 PPT，所以需要转为 PDF。

另外，Gemini 一次对话中最多只可以上传 10 份文件（不包括他自己创建的文件），所以对于文件很多的东西，可以适当整理成一份 PDF。

与 Gemini 对话

可以尝试下面的对话内容发送给 AI（记得需要开深度研究模式哈），请记得勾选模型 Gemini 2.5 Pro 对于处理的东西比较多还需要模型继续大量整理归纳的，推荐用比较好的模型。如果是比较简单的内容，例如只需要对内容进行处理，不需要详细整理归纳的话还是可以用 Gemini 2.5 Flash 模型，这个模型额度开销没那么大，如果没有 Pro 会员的话可以酌情考虑。

这是一个软件工程专业大学生《软件项目管理》课程，现在我需要进行期末复习，请你对上述文件进行知识点分析，整理，归纳，处理。对于不重要的内容适当简化，对于描述不清楚的内容可以加深描述，对于上述内容不完整的内容可以从互联网进行知识库获取。最后请你整理一份完整的复习资料给我，这个复习资料最终会被转换为其他形式（例如 HTML 站点）所以请表达清晰，完善！

随后可以发送出去，等待 Deep Research 给出的研究方案，你需要详细确认研究方案是否符合你的预期，如下述截图所示，确定是否大概的研究范围可以包含你需要整理的内容，如果研究方案不明显或不完善，请务必修改研究方案，直到研究方案符合你的预期「符合知识库构建」

最终确认无误后，可以开始让 Gemini 进行深度研究去分析去啦～

等待最终的分析结果，结果需要导出到 Google 文档，通过 Google 文档复制或下载下来 docx 文档

你可以继续往下看，深度研究的速度如果没有查询互联网的话速度还算不错，如果进行互联网查询的话，速度还是比较慢的。可以先搭建前端，把框架搭建出来。

编写前端

实际上，对于写知识库，我推荐用前端框架的，例如 Vue 啊 React 都可以，但是不建议直接用一个 HTML 页面直接解决（就算用多个 HTML 页面拼凑起来都可以）。

另外，你还有另外一个可以选 Material for MkDocs（请注意，我在这里不会介绍这个框架的使用方法，你可以自行研究或在我的群里问大佬们），直接用一个文档框架直接解决，但是这一类框架样式比较固定，没法做一些很自定义的东西，如果你确定你的知识库不需要这一类东西，完全可以选择这一类框架进行直接搭建，这样也方便。

除非你的知识库就一点点大，不管是什么的知识库，还是有一些小规模的，加上代码的话很容易就上万行代码了。

第一首先不符合编码规范。

第二对于上万行的代码来说，AI 的处理能力其实是直线下降的。

所以我还是建议用框架的形式来处理。

你跟我说你不会框架开发？那没关系，AI 会啊就行了

搭建前端框架

我这里使用 React 为前端框架（基于 Vite 的）。对于 Vue 开发用户来说，你可以简单参考一下

找一个位置打开终端(iTerm/CMD等)

# 我习惯使用 Yarn，npm 用户参考下面（对于如何安装 yarn 请自行解决）
yarn create vite
# npm 创建指令
npm create vite@latest

Project Name 你需要在这里输入项目名字。项目名字建议英文小写，不要出现空格用 - 或 _ 进行替代空格
Select a framework 用 ⬆ 或 ⬇ 选择需要的框架 React 或Vue
Select a variant 如果你跟我一样选择 React 的话，在你不确定的情况下，直接选择 TypeScript 这样方便定义数据类型，也方便 AI 后续读取数据类型。不要选择 TypeScript + SWC 其他也不需要选。默认 TypeScript 就可以了。
在这里，你的基于 Vite 的 React 就搭建好了

你可以继续输入下面给出的指令进行项目初始化，也可以直接通过 Cursor 打开本项目，初始化也交给 AI 进行处理

安装基础库

首先，我们分析一下，我们需要什么。对于 React 来说，不同于 Vue ，Vue 框架默认很多内容给你安装好了，所以可以安装一些扩展的内容就好了，而 React 一般来说就是单页面，什么都没有，需要自己配置「因为自定义比较高我也比较喜欢 React」。

我们需要一个路由跳转库
一个 CSS 美化库「你可以选择 Ant Design，但是我喜欢基于 TailwindCSS 的 DaisyUI（原因也是自定义程度很高，并且 AI 也喜欢）」
想想我的知识库如果可能存在需要画图的内容（例如条形图等等图），还需要一个 EChart

那么最基础的就已经确定好了，直接告诉 AI 就可以了（推荐选择 claude 3.7 sonnet 或 claude 4.0 sonnet 比较聪明「不要用 MAX 模型，没必要，我不知道免费给的 Pro 模型开销多大」）

这是一个 React 项目，刚刚创建的，我需要你帮我初始化使用 yarn。随后帮我安装库 （链接需要单独复制，不然 Cursor 不会搜索这个页面）

1. React Router 路由跳转
2. TailwindCSS 和 DaisyUI(5.0:latest)【https://daisyui.com/docs/install/vite/】
3. React EChart 库

不出意外过一会，你需要同意指令操作，然后全部内容都会给他处理完啦。

另外请注意，对于 Tailwindcss 因为最近版本出现了更新，属于较大规模的更新。所以请注意最终生成的 xxx.css 是不是存在如下内容
1
2
+ @import "tailwindcss";
+ @plugin "daisyui";

全部操作完毕后，可以在终端输入 yarn dev 或者 AI 可能也会让你执行 yarn dev 指令，可以直接执行，执行后打开浏览器页面输入地址，查看页面是否加载正常，没有抛出报错内容。

设计项目基础框架

在你创建项目的时候，他会给你一个简单的示例页面。所以会创建一些不必要的内容进去。现在我们需要修改一下。

跟 AI 对话输入内容

现在要求你删除新建项目的基础内容，换成我给你定义的内容。
删除文件 App.css, App.tsx 删除 index.css 没用的数据，保留 tailwindcss 和 daiysui 的导入。
另外 index.css 需要移动到下述的 assets/css 中，然后所有的 CSS 都要用 DaisyUI 完成，不能自定义 CSS

另外，我重新给你定义我的项目的基础框架
- views 用于存放基础页面
- components 
    - knowledge 用于存放知识库分段内容
    - base  用于存放一些拆分的基础组件
- assets 用于存放资源
    - ts 用于存放 ts 资源
    - css 用于存放 css 资源
- route.tsx 用于存放路由表
- main.tsx 主要
- vite-env.d.ts

接着，我们需要自定义一些内容。定义这个项目长什么样子。

1
2
3

现在我需要一个 layout 风格知识库界面，你需要拆分各个组件放在 components 中，其中路由的页面应该在 views 下。左侧是菜单，顶部是 menu 栏，右侧部分都是放知识库的地方。请注意，你还需要额外定制一些知识库一些可能用到的小组件，例如 InfoCard,WarningCard,DangerCard,SuccessCard 到 base 中，这个卡片要求左侧用 border 加粗，中间部分较为浅色（不使用 DaisyUI 的样式，比较难看）。要求输入标题和正文即可。其余部分你可以参考按需加入。

另外请修改 DaisyUI 的主题为 emerald，在 menu 可以切换多种主题，包括暗色和亮色（最新 daisyui 不存在 tailwindcss.config.js，查看文件 index.css，查看网页 @https://daisyui.com/docs/themes/ ）

至此，基础的项目大纲就建设完毕了。现在可以看看你的 Gemini 的深度研究是否研究完毕了吧。记得需要看前端页面，如果某些地方太难看了，需要让 AI 进行调整哦。

编写 Cursor Rule

这里编写 Cursor Prompt 是为了能够让 AI 更好理解你的项目，以及你后续对话意图期望做什么内容。接着，我们可以根据目录结构信息开始编写内容。可以参考下述内容。

请参考我的项目结构，为我写一个 cursor rule （中文写） @/my_debug_website 目的是以后引入 Cursor Rule 你能够更好的理解这个项目意图 写在 @my-project-rule.mdc  需要把通用组件也写入，告知 AI 可以使用某些组件以替代代码自定义编码。包含 Base 内的文件

最后顶部选择 Always 让 AI 总是获取这个规则，需要匹配这个规则才可以。

请注意，你需要检查一下 Cursor Rule 是否存在对于知识库前端的拆分规则，如果不存在，可以大致手动添加，如：如果对话中给你发送的内容属于知识（知识库），你需要按照章节进行拆分。每一章对应一个 page 保证代码和文字不会过于冗长。

这一点比较重要，否则还是容易全部内容堆在一个文件中，导致效率和最终质量变差。

导入知识库

现在，前端的基础搭建工作已经完成了。接下来就可以把准备好的前端和新开一个 cursor 对话。将知识库发给 AI 就可以啦（如果知识库实在太长太长，请注意需要按一定规模拆分分别投喂给 AI）

最终生成完毕的结果如下所示，一个粗略好看的知识库就搭建好了。

优化内容

由于大模型也是自然语言模型，生成的都是文字，很多东西看起来皱巴巴的，很不好看。也很不方便我们阅读，使用一些图画就可以很方便我们理解一些内容。所以我们可以对 AI 进行内容优化发送。

1	现在对每一章节进行读取（不要刻意优化内容），对于可以加入 EChart 地方添加 EChart 合理进行图像图画图表展示，让知识库更加完善。