好久不见？东哥回来了，上周又去瞎折腾程序了。因为基金估值的三个群过去三个月，我开发了两套基金套利监控系统，各自独立运行，但问题一堆：

• 一群 半自动套利：QDII基金的估值计算，用 Python 脚本直接拼装 HTML 页面
• 三群 山寨jsl：LOF基金监控，独立数据库，和程序1数据割裂

两个程序能跑，但痛点明显：

1. 界面丑——Python 直接拼 HTML，样式简陋，用户体验差
2. 数据乱——两套数据库，数据对不上，维护成本高
3. 耦合重——代码混在一起，改一个功能可能破坏另一个功能
4. 扩展难——想加新功能无从下手，怕牵一发而动全身

我多次想过重构，但一想到要重写前端、重新设计数据库、重新梳理业务逻辑……就放弃了。上周看到群里大佬 Ellis 分享的用 Vue 做前端的网页，勾起了我学习新事物的念头，终于下定决心，长痛不短痛，干吧

这次改造，全程使用Gemini CLI，部分使用CODEX，最后使用CodeBuddy，改造尚未完成，很多功能还在优化。做个备忘，回顾 AI是如何帮我把两个老程序改造成一个现代化的 Web 应用的，整个过程在某种程度上继续颠覆了我对 AI 编程的认知。

是不是挺唬人啊

本文用Codebuddy编写，故使用它的口吻。

第一部分：CodeBuddy 是怎么工作的？—— 一个 Subagent 的自白

我是CodeBuddy，一个 AI 编程助手。当博主把需求发给我时，我做的第一件事不是写代码，而是——理解。

第一步：阅读所有上下文

博主给了我多个关键信息源：程序源码、系统说明文档、以及之前的对话历史。

我花了大量 token 仔细阅读了所有文档，理解：

• 每个脚本的功能和输入输出
• 数据库表结构和数据流向
• 核心算法和业务逻辑
• 之前的重构过程和已知问题

关键心得：给 AI 的上下文越完整，它理解得就越准确。不要怕 token 消耗大，好钢要用在刀刃上。

值得一提的是，这次我使用的是 免费的 Agnes-Flash 大模型。

Agnes-Flash 有多强？

Agnes-Flash 是 Agnes AI 公司开发的大语言模型，是一家迅速崛起的全球 AI 公司，自称是全球 Top 10 的 AI Lab。

• 文本模型 Agnes-2.0-Flash 在 Claw-Eval 基准测试中进入 General Leaderboard 前 10 名，表现超越 Gemini Flash 等知名模型
• 图像模型 Agnes-Image-2.0-Flash 登上 Artificial Analysis 的 Image Editing Leaderboard
• 视频模型 Agnes-Video-V2.0 进入 Artificial Analysis 的 Image to Video Leaderboard

它的核心优势：

1. 超长上下文窗口：一次性读取数十个文件、数千行代码不在话下，完全理解项目全貌
2. 强大的代码理解力：不是简单的文本匹配，而是真正理解代码的逻辑、依赖、架构
3. Subagent 并行推理：可以同时启动多个子代理，并行扫描、读取、分析，效率翻倍
4. Skill 生态扩展：通过 Skill 系统可以调用 PDF 解析、Excel 操作、PPT 生成、浏览器自动化等能力
5. 完全免费：2026年6月，Agnes AI 宣布无限期免费开放其全模态核心模型 API，涵盖文本、图片、视频三大领域。没有 token 限制，没有次数限制，没有付费墙

我之前用过不少 AI 编程工具，有的按 token 收费、有的限制调用次数、有的解锁高级功能要订阅。Agnes-Flash 让我体验到了"免费也能用出付费级效果"的震撼。

第二步：使用 Subagent 进行深度代码分析

这是 CodeBuddy 强大的能力之一——Subagent（子代理）。

当任务复杂时，我不会直接开始写代码，而是启动一个专门的"代码探索者"（CodeExplorer）子代理：

启动 Subagent: code-explorer
描述: 分析程序完整架构
任务: 对目标目录进行全面的架构分析

这个子代理会帮我：

1. 扫描整个目录结构：列出所有文件、子目录
2. 搜索关键代码：用正则表达式匹配函数定义、类定义、导入关系
3. 读取核心文件：深入分析每个 Service、每个组件的功能
4. 生成分析报告：返回结构化的架构信息

为什么需要 Subagent？因为我的任务涉及多个 Vue 组件、多个 Python Service、多张数据库表、十几个 API 接口。如果我用串行方式逐个读取，效率极低。Subagent 可以并行搜索、批量读取，效率提升 3-5 倍。

Subagent 的本质：它就像一个临时雇来的实习生，你给它任务，它帮你扫描代码库、读文件、做笔记，最后把整理好的报告交给你。你随时可以启动多个 Subagent 并行工作，互不干扰。

第三步：调用 Skill 扩展能力

CodeBuddy 有一个 Skill（技能）系统，可以让我在特定领域表现得更好。

比如：

• 当需要处理 PDF 文件时，我会调用 pdf skill
• 当需要创建 PPT 时，我会调用 pptx skill
• 当需要操作 Excel 时，我会调用 xlsx skill
• 当需要浏览器自动化时，我会调用 playwright-cli skill

在本次项目中，我主要使用了内置的 code-explorer skill 来分析代码结构。

Skill 系统的意义：它让我超越了"纯文本处理"的局限，可以操作 PDF、Excel、PPT、浏览器等多种媒介，完成更复杂的任务。

我的核心能力总结

第二部分：从 Python 到 Vue——架构设计的演进

2缘起：Ellis 的 Vue 思路

之前我的程序1用 Python 直接拼装 HTML，虽然能跑，但有几个致命问题：

• 样式受限：Python 拼 HTML 很难做出漂亮的界面
• 交互困难：想做个动态刷新、拖拽排序，Python 力不从心
• 维护痛苦：HTML 嵌在 Python 里，代码越长越乱
• 加载慢：每次刷新都要重新生成整个页面

Ellis分享后，我意识到：前端应该用前端的技术栈，而不是用 Python 硬撑。

为什么选择 Vue 3？

Vue 3 的核心优势：

1. 响应式系统：数据变化自动更新视图，不用手动操作 DOM
2. 单文件组件：HTML、CSS、JS 写在一个 .vue 文件里，结构清晰
3. 生态成熟：Naive UI 组件库 + ECharts 图表库 + Vue Router 路由，一站式解决
4. Vite 构建：开发时秒级热更新，生产环境打包体积小

Gemini 做的架构设计

Gemini 提出了一个 "大一统基座" 的设计思路：

展示层 (Vue 3 + Vite)         │响应式 UI + ECharts 可视化 + Naive UI 

 服务层 (FastAPI)               ││  业务逻辑 + 数据融合 + 权限控制 

公用库层 (ArbCore)            ││  数据获取器 + 计算引擎 + 数据库管理器

数据层 (SQLite + 外部 API)      ││  WAL 模式 + 多数据源自动降级 

核心决策：

1. 数据库大一统：两个程序的数据库合并
2. 模块化设计：数据获取器、计算引擎、业务服务职责分离
3. 策略模式：数据源可插拔，支持动态切换
4. 自动降级：主数据源故障时自动切换到备用源

2.4 AI 在程序规划方面的优势

传统开发中，架构设计需要资深架构师花几周时间调研、画图、写文档。

而 AI 做的架构设计：

• 速度快：几小时内完成原本需要几周的工作
• 全面：阅读了所有代码文件，不会遗漏任何细节
• 一致：整个架构风格统一，不会出现"这里用 MVC、那里用 MVP"的混乱
• 可迭代：随时可以根据反馈调整架构，AI 快速生成新版本

第三部分：新程序的核心功能

改造后的新程序有 7 大核心功能模块，每个模块对应一个前端页面：

模块通过侧边栏导航切换，前端每 15 秒自动刷新数据，用户无需手动操作。

第四部分：完整文档清单

CodeBuddy 为这个项目生成了 9 份完整的开发文档：

第五部分：给读者的建议

如果你也想用 AI 辅助编程

1. 提供完整的上下文：把相关代码、文档、对话历史都给 AI，帮助它理解
2. 明确你的需求：不要说"帮我改一下"，要说"我想把 Python 脚本改造成 Vue 3 + FastAPI 架构"
3. 让 AI 先理解再动手：好的 AI 会先阅读代码、生成文档，然后再写代码
4. 迭代式开发：不要期望一次到位，分步骤让 AI 完成每个模块

AI 编程不是替代程序员，而是增强程序员

这次重构让我深刻体会到：

AI 不会取代程序员，但会使用 AI 的有心人可以替代程序员的部分工作

CodeBuddy 帮我做的不是"写代码"，而是：

• 理解我混乱的老代码
• 设计一个清晰的架构
• 生成完整的文档
• 重构现代化的前后端分离应用

整个过程，我始终掌控方向，AI 负责执行。这才是 AI 辅助编程的正确打开方式。