背景介绍

使用AI开发个人网站的想法来源是个人的矫情。对于我的需求，其实有一些现成的工具可以满足，但是在尝试之后，感觉都有点太重了，不够优雅。 我喜欢snipaste和listary的设计思路，不追求全能，就只专注核心功能，即开即用，用完不再打扰。虽然这两个软件最近更新通知有点多，但是还是很好用的。

先说说我遇到的问题

频繁切换网页，没法快速定位：

• 在工作中我会通过与AI沟通来探索需求设计的思路，在对话过程中会不断延伸出新的讨论点，我不希望一个对话的内容太过分散，需要新开一个对话进行新的讨论。
• 在同一网站上同时进行多轮对话，会排队，因此我选择换一个AI，开启新的讨论。
• kimi，deepseek，千问，秘塔，Gemini，免费使用确实香，但是手动切换起来比较麻烦。 我希望有一个页面，记录正在进行的对话，点击可以快速切换到对应的页面，自动选中输入框

重复输入太多：

• 除了探索性的讨论外，AI主要还用于解释代码/解释术语/解释报错/翻译文档/变量命名/写dify的python代码/写n8n的js代码/提取图片中的文字/生成架构图/生成next.js代码
• 这些场景通常都会带有一段固定的描述，每次手动复制粘贴，还有新建一个文档，不够优雅 我希望有一个页面，进入页面先获取剪贴板信息，然后列出常用场景，点击自动拼接固定描述，然后跳转到指定AI对话页面，自动粘贴文本

快速记录：

• 在AI的沟通过程中以及日常生活中，有一些东西我希望能够快速下来
• 最开始我使用的obsidian，但是遇到了多端同步的问题，用Self-hosted LiveSync能解决一部分问题，但是稳定性不是太好
• 然后准备换成飞书文档，通过API更新图片时遇到了一点点问题，但是打开网站页面再手动粘贴又有点傻 我希望有一个页面，进入页面先获取剪贴板信息，然后可以一键更新到飞书的现有文档中，文档按周命名，每周整理一次快速记录的信息

然后就是动手尝试

第一次尝试

我从quicker使用文档里，了解到autohotkey的存在，autohotkey支持一定的GUI。于是我开始考虑能不能用autohotkey脚本和python脚本来实现。借助AI实现了最基础的脚本，通过一个右键弹窗触发对应的脚本。但是这样太不优雅了，而且确实不好用，使用过程中要等待脚本执行。

• 打开kimi翻译用的对话（在对话中提前要求翻译成中文），先输入"翻译："然后自动粘贴并回车

#Requires AutoHotkey v2.0

Run("chrome.exe https://kimi.moonshot.cn/chat/cu9j3p72cre4...")

Sleep(3000) ; 等待浏览器打开

Send("翻译：")

Sleep(500) ; 等待输入完成

Send("^v") ; 触发粘贴操作

Sleep(500) ; 等待粘贴完成

Send("{Enter}") ; 回车

ExitApp

• 打开obsidian用于记录的文档，切换到文档底部，自动粘贴并回车

#Requires AutoHotkey v2.0

; 构建Obsidian URL

obsidianUrl := "obsidian://new?vault=obdoc&file=临时文件夹%2F今日临时文件&append"

; 使用Obsidian URL静默打开Obsidian

Run(obsidianUrl)

Sleep(500) ; 等待Obsidian打开

; 触发一次Tab键

Send("{Tab}")

Sleep(500) ; 等待Tab操作完成

; 在打开的Obsidian文档内触发粘贴操作

Send("^v") ; 触发粘贴操作

Sleep(500) ; 等待粘贴完成

; 输入换行符

Send("{Enter}")

; 结束脚本

ExitApp

第二次尝试

khoj有一个桌面端应用，除了同步本地文件到khoj知识库外，还提供了一个快捷对话的窗口。 复制文本或图片后，通过快捷键唤起窗口，窗口内会展示当前复制内容，内容可以修改，下方展示按钮，点击发送该信息开始对话 有点类似了，那么下一步基于这个开源应用改造改造就能满足我的需求吧。然后我就发现不太行，根本看不懂代码，无从下手。 还是一步步来，项目是electron的，那我先做个网页，然后再封装成桌面应用，大概也许可以。那就从做网页开始

1. 确定技术栈

• 前端：next.js，可以直接部署到vercel上
• 后端：python，本来是打算用python写后端服务的，结果实际尝试之后，直接用next.js写api，更好调试一点
• 数据库：supabase，还能把用户登录与认证+数据桶一起解决了

2. 创建项目

创建项目没啥好说的 npx create-next-app@latest 遇到1个点是，npx shadcn@latest init时要进入项目目录才行

3. 登录页面和用户状态获取

这一步最开始我没有理解客户端和服务端，要求AI用python封装supabase接口来实现登录鉴权，AI非常认可，但是就是调试不出来。后面自己看文档发现了问题，重新搭建很快就调通了。 AI不太会拒绝，要么你确定你的方案是正确的，要么不要给AI提供方案。质疑可能导致AI按照错误的思路开发

• 登录页面直接使用supabaseui提供的示例，包括登录状态回显、退出登录的逻辑也是直接复用 npx shadcn@latest add https://supabase.com/ui/r/password-based-auth-nextjs.json
• 登录状态获取
  1. 使用 createClient() 创建 Supabase 客户端
  2. 通过 supabase.auth.getSession() 获取当前会话
  3. 使用 onAuthStateChange 监听认证状态变化
  4. 将用户信息存储在 React 状态中

4. 创建工具列表页面和列表数据编辑页面

前期我不太希望将工具和内容直接开放访问，所以增加了用户体系。 登录后才能使用，每个用户可查看和编辑公开工具和自己创建的工具：基于supabase的RLS实现

在调试的过程中发现，AI对项目的目录结构不敏感，目录经常建错层级，或者在已有对应文件的情况下，自行新建一个类似功能的文件 因此我在readme中将完整目录结构写入，每次修改的时候都带上这个文件 同时next.js单页面是一个文件夹，AI提供的修改中，如果涉及到文件夹外的文件，我会让它给出完整方案和原因，然后去网页上粘贴给deepseek检查

5. 需求的拆解和简单验证

将需求拆解出了几个基础的能力，便于我进行前期验证

• 进入页面自动获取剪贴板内容，显示在页面上。支持图片和文本。在剪贴板内容下方展示功能按钮，可点击快速跳转网页
• 进入页面自动选中输入框，输入内容后回车保存。右侧展示保存的历史信息 在这过程中，增加了全局的header组件，用于标识登录状态和快速返回工具列表页面 简单调整了ui。后续需要找一套ui规范可以快速喂给ai，来优化页面效果 增加了示例页面，一些公共方法我添加到示例，便于后面给AI作为参考，避免AI自行发挥

6. vercel部署

部署时遇到了几个问题，感觉需要记录一下

1. 推送代码到github后，vercel部署失败。将提示喂给AI后，AI无法解决，后面kimi给了一个解决方案，尝试后莫名其妙解决了，感觉是代码格式的问题npx @next/codemod@canary next-async-request-api
2. 刚开始直接推送github，报错信息少，改完一个又有一个，后面发现可以本地模拟vercel部署vercel build，通过后再推送github