【需求分析】基于 GPT-5.6 + Codex 开发个人工具箱 Personal Toolbox 项目
其实是第二个 AI 项目。但前一个项目因没有经验，搞得太乱，现在被卡在一半不想继续。
新的项目从需求分析开始，每一次功能更新/完成都会复盘一下。本次想法是给自己开发一个多功能工具箱，GitHub仓库。
1 前言
在日常使用 AI、浏览网页和处理学习、文字创作的过程中，经常会遇到一些零散的小需求。有些需求只在特定情境下偶尔出现，有些则会重复发生。
虽然尝试寻找现有工具，但经常遇到以下问题：
- 工具分散，需要每次重新搜索；
- 强制注册或登录；
- 完整功能需要付费；
- 产品功能过重，超出实际需要；
- 操作方式不符合个人习惯；
- 部分工具需要上传文件，令我对内容隐私有所顾虑。
随着 AI 辅助开发工具变得更加容易使用，我开始思考，与其每次花时间寻找并适应别人的工具，不如逐步建立一个自己的工具集合。每个工具只解决一个明确问题，保持独立、轻量，并尽量在本地完成处理。
2 产品用户
工具箱现阶段首先服务于我本人的真实需求，因此功能优先级、交互方式和技术选择都会以个人使用体验为核心。
当某些工具逐渐稳定，并且我确认它们也具有更普遍的使用价值后，会考虑公开部分工具，让其他用户体验，并根据反馈继续调整。
项目因此采取以下发展顺序：
个人需求驱动 → 自用验证 → 完善核心体验 → 选择性开放 → 根据反馈继续迭代
3 需求分析
3.1 核心需求
- 通过统一入口集中管理不同的小工具；
- 每个工具只处理一种明确任务；
- 工具之间保持相对独立；
- 优先支持不登录即可使用；
- 在不依赖服务端的情况下，尽可能在浏览器前端完成处理；
- 新增工具时不需要大规模修改现有工具；
- 页面结构和视觉语言保持基本统一；
- 保证个人可以长期阅读和维护代码。
3.2 非功能需求
- 轻量性：不引入当前不需要的框架和依赖；
- 隐私性：适合前端处理的内容尽量不发送至后端；
- 可维护性：统一技术栈和目录规范；
- 可扩展性：新增工具时沿用明确结构；
- 可测试性：核心算法和页面行为能够自动验证；
- 易用性：尽量减少技术术语和额外学习成本；
- 响应式：桌面和窄屏设备均能基本使用。
3.3 第一阶段范围
- 工具箱首页；
- 工具统一注册；
- 明确路由；
- 通用工具页布局；
- 404 页面；
- 至少一个完整可用的工具；
- 基础测试和构建流程。
3.4 当前不做
第一阶段暂不包括：
- 用户账户；
- 云端同步；
- 后端数据库；
- 跨设备历史记录；
- 在线协作；
- AI API；
- 插件系统；
- 第三方开发者接入；
- 复杂权限管理。
3.5 验收标准
工具箱第一阶段达到以下条件，即认为基础架构可用：
- 首页能够展示已注册工具；
- 每个工具具有独立路由；
- 不存在的网址能够进入 404 页面；
- 新工具可以按固定目录结构加入；
- 公共布局不依赖任何具体工具；
- 第一个工具能够完成完整的输入、处理和结果展示流程；
type-check、lint、test和build能够通过；- 不需要用户登录或连接后端；
- 不引入当前阶段不必要的框架。
4 技术展选择
本项目采用以下前端技术：
- Vue 3
- TypeScript
- Vite
- Vue Router
- Composition API
<script setup lang="ts">
同时使用：
- Vitest
- ESLint
- Prettier
- npm
- Git / GitHub
在此前的 AI 辅助技术选型中，React 经常被作为默认方案推荐。但这次我没有直接采用默认建议，而是根据项目规模、工具组织方式和个人维护成本，选择了 Vue 3。
工具箱当前规模较小，每个工具之间相对独立。Vue 的单文件组件、模板语法和渐进式组织方式，适合快速开发一个个独立的小型工具页面。对我当前的学习基础和项目规模而言，其代码结构更容易阅读和维护。
5 AI 协作方式
本项目采用 ChatGPT 5.6 与 Codex 分工协作的开发方式：
- ChatGPT用于讨论需求、梳理产品逻辑、分析技术方案并编写分阶段 Prompt；
- Codex负责读取实际仓库、修改代码、补充测试并执行验证；
- 我负责确认真实需求、提供测试文本、检查页面体验，以及决定是否接受每一轮实现。
为了减少 Codex 在长期开发过程中出现技术风格漂移，在项目根目录加入了AGENTS.md，用于记录持续生效的仓库规则，包括：
- 使用 Vue 3 和 TypeScript；
- 仅使用 Composition API；
- 组件采用
<script setup lang="ts">； - 禁止混入 Vue 2 或 Options API；
- 不得未经要求增加框架和依赖；
- 不进行无关的大规模重构。
AGENTS.md提供仓库级长期约束。
此外，每次开始新的 Codex 对话时，都会提供一段稳定上下文，用于再次强调当前任务必须遵守的技术边界：
这是一个 Vue 3 + TypeScript + Vite 项目。仅使用 Composition API 和
<script setup lang="ts">，禁止 Vue 2、Options API 和未经要求添加框架或依赖。