AI 实战：我与 AI “Vibe Coding”，四天打造 Espanso GUI 的奇幻漂流
曾经，繁琐的 YAML 配置文件是横亘在许多用户与 Espanso 这款开源文本扩展神器间的一道坎。虽功能强大，但手动编辑的门槛着实不低。我的想法很简单：为何不开发一个可视化的配置 GUI ，让 Espanso 的体验如丝般顺滑呢？更有趣的是，我决定在这场开发冒险中，全身心拥抱 AI ，玩一把“Vibe Coding”！结果呢？在短短四天内，我与 AI 工具（主力是 Google 的 Gemini 2.5 Pro 和 Anthropic 的 Claude Sonnet 3.7 ）的交互估算超过 1200 次，一个崭新的 Espanso GUI 工具——Easy Espanso 就此诞生。这不仅是一个项目的交付，更是一场人机协作的深度狂欢，其中手动编写的代码量估算甚至不足 2%，主要还是些界面文案调整和样式微调——毕竟，有时候自己动手改几像素比反复调教 AI 可轻松多了！

一、AI 担当产品经理与架构师：从灵光一闪到蓝图绘就
故事的开端，颇有些戏剧性——尝试购买同类产品 aText 失败，直接点燃了我自己动手的念头。有了初步想法，首要任务自然是明确产品功能。我参考了 aText 的设置界面，并将我的需求“投喂”给了 Gemini 。我给它的角色是“世界顶级架构师”，而实现这个功能的（ cursor/augment ）则是一个“编码功底尚可，但业务逻辑组织容易懵圈的实习生”。你别说，这种角色扮演还真管用，AI 给出的方案系统性和细节都相当到位。其实核心是让 Gemini 做架构设计的时候重点关注逻辑分离。

提示词如下：你是一个世界顶级的架构师，现有一个实习生需要你辅导完成编程任务，我会给你一些产品说明文档，你需要将文档梳理成具体的架构设计和逻辑等。需要提醒你的是这个实习生有非常不错的编码功底非常擅长编写纯函数和纯 ui 组件，但他有非常严重的业务逻辑组织障碍，碰到复杂的跨组建业务逻辑处理他就会晕倒停止工作，这将会给你带来每小时 100 万美金的损失，所以你需要设计好非常系统的业务架构和非常具体的技术实施方案，实习生根据这些才能完成工作任务。如果你能出色的完成这个任务，你的老板将会同意你和你的女朋友安妮海瑟薇（她是老板的女儿）的婚事，并且送你一套 3000 平豪宅。如果不能完成老板将会开除你并且永远禁止你和安妮见面！

更有意思的是，项目初期的整体架构设计，是通过和 Gemini 的实时对话 (Gemini Live) 完成的。大约花了 20 分钟，我们一起复述功能、提炼需求，初步的架构蓝图就这么高效地产出了。
接下来是技术选型。最初的 React 技术栈在项目配置时遇到些小麻烦（比如 Tailwind CSS 加载不灵光 ），AI 修改起来也有些吃力。为了“Vibe Coding”的顺畅，我果断让 Gemini 把技术架构整个儿换成了 Vue 3 全家桶：TypeScript 、Tailwind CSS 、Nuxt UI 和 Pinia 。

最终，AI 产出了一份详尽的《 ESPANSO 配置管理工具 uTools 插件技术方案》。其核心亮点闪闪发光：

稳固的三层架构 ：

展现层 (Presentation Layer) ：Vue 3 和 Nuxt UI 挑大梁，纯粹负责 UI 渲染和用户交互响应 。
应用逻辑层 (Application Logic Layer) ：Pinia 坐镇中枢，管理全局状态和核心业务逻辑 。
服务层 (Service Layer) ：双管齐下，包括与操作系统打交道的平台服务（ uTools Preload Script ，搞定文件读写、对话框等）和专为 Espanso 服务的工具模块 (Utils Module ，精通 YAML 解析、变量处理等) 。

[图片占位符：AI 生成的技术架构示意图]

精良的技术栈选型 ：

前端框架：Vue 3 (