AI First 编程：一款工具软件的完整实践

前言

在 AI 时代，编程方式正在发生深刻变革。传统的”代码优先”模式正在被”AI 优先”模式取代。本文将通过我最近开发的 ToolHub 项目，分享一个完整的 AI First 编程实践案例。

ToolHub 是一款基于 Electron 的桌面应用，它将 7 个主流 AI 聊天平台（ChatGPT、Gemini、DeepSeek、Kimi、Grok、Perplexity、LMArena）和 20+ 开发者工具整合在一个统一的工作空间中。这个项目从构思到第一版发布，几乎全程由 AI 辅助完成。

ToolHub 主界面

一、项目背景：为什么要做 ToolHub？

痛点

痛点其实一直都有，早些年的时候主要是需要时间戳、json编解码工具。总是在google浏览器上面开一些书签，内心其实还是觉得有些麻烦的。进入了llm时代后，不断的llm都会出来，这个时候也都要去体验，也是在浏览器上搞了一堆书签。还有一些其余的诉求吧。

在多个 AI 平台之间切换（ChatGPT 写代码，Gemini 搜资料，DeepSeek 看架构…）
频繁使用各种在线工具（JSON 格式化、Base64 编解码、JWT 解析…）
管理多个数据库连接（MySQL、Redis、MongoDB…）
频繁在不同工具间切换，既低效又容易分散注意力。

2025 年下半年感觉是 vibe-coding奇点来临的时候，所以就想自己用ai做一款开发辅助软件，它拥有我日常开发中需要用到的所有工具。

解决方案

ToolHub 的核心理念：一个应用，满足开发者的所有日常需求。

二、AI First 编程的实践

2.1 需求分析阶段

传统方式：花几天时间梳理需求文档、画原型图、设计技术架构。

AI First 方式：

用自然语言描述产品构想
AI 帮助细化需求，提出可能遗漏的场景
快速生成技术选型方案

1 2	我：我想做一个 Electron 应用，集成多个 AI 聊天平台和开发工具 AI：建议使用 webview 方式集成 AI 平台，用 TypeScript 开发提高代码质量...

2.2 技术栈选择

最终确定的技术栈：

框架：Electron 28（跨平台桌面应用）
语言：TypeScript 5.4（类型安全）
数据库：better-sqlite3（本地数据存储）
数据库驱动：mysql2、pg、mongodb、ioredis（多数据库支持）
构建：electron-builder（应用打包）

这些选择都是通过与 AI 讨论得出的最优方案。

2.3 架构设计

ToolHub/
├── src/
│   ├── main/          # Electron 主进程
│   ├── preload.ts     # 预加载脚本
│   ├── renderer/      # 渲染进程（UI）
│   └── shared/        # 共享代码
├── assets/            # 资源文件
├── scripts/           # 构建脚本
└── dist/              # 编译输出

AI 帮我设计了清晰的分层架构，主进程处理系统级操作，渲染进程负责 UI 展示，通过 IPC 通信。

2.4 核心功能实现

1. AI 平台集成

使用 Electron 的 webview 标签，为每个 AI 平台创建独立的浏览环境：

// AI 平台配置
const aiPlatforms = [
  { name: 'ChatGPT', url: 'https://chat.openai.com' },
  { name: 'Gemini', url: 'https://gemini.google.com' },
  { name: 'DeepSeek', url: 'https://chat.deepseek.com' },
  // ...
];

关键特性：

会话持久化：利用 Electron 的 session 管理，保留登录状态和聊天记录
独立沙箱：每个平台运行在独立环境中，互不干扰

2. 开发工具集成

内置 20+ 常用工具，主要分类：

编码转换

Base64 编解码
URL 编解码
Unicode 转换
JWT 解析

加密解密

MD5/SHA 哈希
AES/DES 加解密

数据处理

JSON 格式化与验证
Diff 文本对比
正则表达式测试

数据库客户端

MySQL
PostgreSQL
SQLite
Redis
MongoDB

每个工具都是一个独立的 HTML 页面，通过简洁的接口完成特定任务。

3. 自定义网站

允许用户添加任意网站，实现个性化工作流：

interface CustomWebsite {
  name: string;
  url: string;
  icon: string;
  category: string;
}

2.5 UI/UX 设计

采用霓虹暗黑风格，主要考虑：

护眼：长时间使用不会过于刺眼
科技感：符合开发者审美
高对比度：信息层次清晰

配色方案：

背景：#0d1114
主色：霓虹蓝 #00d9ff
辅助色：霓虹紫 #bd00ff

2.6 开发过程中的 AI 协作

典型的开发流程：

功能开发

1
2
3

我：帮我实现一个 JSON 格式化工具
AI：生成完整的 HTML + JavaScript 代码
我：测试、调整、集成

Bug 修复

1
2
3

我：webview 无法保存登录状态
AI：建议使用 partition 参数设置持久化 session
我：应用方案，问题解决

性能优化

1
2
3

我：应用启动较慢
AI：建议使用懒加载、优化依赖、启用 asar 打包
我：逐步优化，启动速度提升 60%

2.7 测试与发布

测试：

使用 Vitest 进行单元测试
覆盖率达到核心功能的 80%+

构建与发布：

{
  "scripts": {
    "dist:mac": "npm run build && electron-builder --mac dmg zip",
    "dist:win": "npm run build && electron-builder --win",
    "dist:linux": "npm run build && electron-builder --linux"
  }
}

目前已发布 macOS 版本。

三、关键技术点

3.1 Electron 主进程与渲染进程通信

使用 contextBridge 暴露安全的 API：

// preload.ts
contextBridge.exposeInMainWorld('electronAPI', {
  openDatabase: (config) => ipcRenderer.invoke('db:connect', config),
  executeQuery: (sql) => ipcRenderer.invoke('db:query', sql),
  // ...
});

3.2 数据库多客户端支持

统一的数据库接口，支持多种数据库：

interface DatabaseClient {
  connect(config: DbConfig): Promise<void>;
  query(sql: string): Promise<any>;
  disconnect(): Promise<void>;
}

class MySQLClient implements DatabaseClient { /* ... */ }
class RedisClient implements DatabaseClient { /* ... */ }
// ...

3.3 会话持久化

利用 Electron 的 session 和 partition：

1
2
3

const webview = document.createElement('webview');
webview.partition = 'persist:chatgpt'; // 持久化会话
webview.src = 'https://chat.openai.com';

3.4 跨平台打包

electron-builder 配置：

{
  "build": {
    "mac": { "target": ["dmg", "zip"] },
    "win": { "target": ["nsis", "zip"] },
    "linux": { "target": ["AppImage", "deb"] }
  }
}

四、经验总结

vibe-coding趋势很明显，超级个人的时代真的要来了。建议大家都试一试。

七、未来展望

ToolHub 还在持续迭代中，计划加入：

插件系统：允许用户自定义工具
云端同步：跨设备同步配置和数据
AI 助手集成：直接在工具内调用 AI
团队协作：分享配置和工具集

结语

AI First 编程不是替代程序员，而是让程序员从繁琐的重复劳动中解放出来，专注于更有价值的创新和思考。

ToolHub 项目让我看到了 AI 时代编程的新可能：更快的迭代、更低的门槛、更专注的思考。

如果你也在探索 AI 辅助编程，欢迎交流！

项目地址：https://github.com/idonkeyliu/ToolHub