news 2026/8/4 5:37:38

【需求分析】基于 GPT-5.6 + Codex 开发个人工具箱 Personal Toolbox 项目

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
【需求分析】基于 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-checklinttestbuild能够通过;
  • 不需要用户登录或连接后端;
  • 不引入当前阶段不必要的框架。

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 和未经要求添加框架或依赖。

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/8/4 5:31:35

C# WinForm TCP Socket

一、基础定义Socket&#xff08;套接字&#xff09; 网络通信端点&#xff0c;负责程序之间的数据传输&#xff1b;IP地址&#xff08;定位设备&#xff09; 端口号&#xff08;定位程序&#xff09; SocketTCP 协议 面向连接、可靠传输&#xff1b;通信前建立连接&#xff0…

作者头像 李华
网站建设 2026/8/4 5:30:50

智能英文名生成系统:基于谐音匹配与知识图谱的命名算法实践

1. 项目概述&#xff1a;一个名字背后的文化与技术你有没有想过&#xff0c;你的英文名可能正在悄悄“出卖”你&#xff1f;我说的不是隐私&#xff0c;而是你的文化背景、个人偏好&#xff0c;甚至是你起名时那份微妙的心理。一个叫“Cherry”的女孩&#xff0c;可能希望自己甜…

作者头像 李华
网站建设 2026/8/4 5:28:40

C/C++头文件守卫:从#ifndef到#pragma once的编译保护机制

1. 从一次编译错误说起&#xff1a;为什么需要“守卫” 那天下午&#xff0c;我正在调试一个规模不小的C项目。代码编译了几十次都没问题&#xff0c;但当我尝试将两个独立的模块合并&#xff0c;并引入一个新的公共头文件时&#xff0c;编译器突然报出了一连串令人困惑的错误&…

作者头像 李华
网站建设 2026/8/4 5:27:33

MATLAB Control System Tuner:自动化控制系统调参实战

1. 控制调谐器工具概述Control System Tuner是MATLAB控制工具箱中的一款交互式应用程序&#xff0c;专门用于调节SISO和MIMO控制系统的参数。这个工具通过图形化界面简化了传统控制系统的调试流程&#xff0c;特别适合处理多变量控制系统和复杂PID结构的调参问题。我第一次接触…

作者头像 李华
网站建设 2026/8/4 5:26:09

投票制作平台哪个好用?2026投票活动场景分类指南

组织一场线上投票活动&#xff0c;选对工具往往比想象中更重要。市面上以“免费”为亮点的投票工具不少&#xff0c;但真正能做到全程无广告、功能齐全的其实不多。本文基于多轮实测&#xff0c;从不同活动场景出发&#xff0c;梳理四款主流投票平台的核心特点与适用方向。 一、…

作者头像 李华
网站建设 2026/8/4 5:24:32

React Native与鸿蒙适配的技术挑战与解决方案

1. React Native与鸿蒙适配的技术背景解析2026年React Native官方路线图中对鸿蒙系统的适配支持引发了广泛讨论。作为一名经历过多次跨平台框架迁移的移动端开发者&#xff0c;我认为这次适配之所以成本高昂&#xff0c;核心原因在于两种技术栈在设计理念和底层架构上的根本性差…

作者头像 李华