是什么： 基于 Electron + Vue 3 的桌面端 AI 智能作业平台（配套 SaaS 管理后台、双模智能网关、跨端小程序四端架构），采用创新四栏 IDE 式布局，为财税服务人员提供 AI 驱动的一站式作业环境。
面向谁： 中小型财税服务企业（代账公司）的一线会计/出纳、财务主管、企业老板，以及被服务的中小企业客户。
主要功能
| 功能 | 说明 |
|---|---|
 AI 智能对话驱动 |
8 个专业财税 Agent（记账/税务/工商/合同/审计/客服/管理/风险），自然语言指令触发业务操作，结果实时展示在编辑区 |
 九大业务模块 |
税务、工商、银行、合同、客户服务、客户配置、统一凭证、资料管理、系统配置，覆盖财税服务全业务链路 |
 双模式主题系统 |
亮色/暗色无缝切换，WCAG 2.1 AA 级对比度合规，支持系统偏好自动跟随与 localStorage 持久化 |
 MCP 工具生态 |
24 个 MCP 工具对接税务/银行/工商/海关等系统，工作流引擎支持暂停/恢复/回退 |
技术栈： Electron 42 · Vue 3.5 · TypeScript 5.9 · Tailwind CSS · LangGraph · OpenCode SDK · SQLite · NestJS 11 · Prisma 7 · PostgreSQL
5× 单人账务处理能力提升（30-50 家 → 150-200 家/月）
Demo 创作思路
灵感来源
在深入接触本地多家财税服务企业后，我发现代账行业普遍处于 “人工 + Excel” 的原始作业状态。面对数百客户的代账、开票、报税业务，财务人员每天 80% 时间消耗在重复性事务上：微信群催收资料、手工录入凭证、逐户登录电子税务局申报、人工核对发票备注栏规则。TRAE 强大的 AI 辅助开发能力让我看到了快速验证产品构想的可能。
想解决的问题
资料催收低效 — 报税期前人工逐户催收流水、发票，微信群混乱，平均每家客户耗时 15-30 分钟- 做账重复性高 — 手工录入凭证，单人每月最多处理 30-50 家，效率瓶颈明显
- 开票容易出错 — 出口退税/货代场景备注栏规则复杂，人工填写错误率高，红冲重做影响客户体验
- 报税流程繁琐 — 多税种多账户切换登录，政策更新不及时存在合规风险
- 客户服务响应慢 — 常见财税咨询重复量大，员工被基础问题占据大量时间
为什么做这个方向
① 行业痛点真实且刚性 — 全国在册代账公司超 10 万家，服务中小企业超 2000 万家，智能化升级需求迫切，但市面上缺乏专门针对代账场景的一体化 AI 作业平台
② AI 适配度高 — 财税领域规则明确、数据结构化程度高、流程标准化，是 AI 自动化落地的绝佳场景
③ TRAE 开发效率加持 — TRAE 的 AI 辅助编程、自动规划、代码生成能力让我能够在短时间内完成从架构设计到原型验证的全流程
④ 可复制性强 — 模块化设计支持独立部署，可快速在行业内复制，具备 SaaS 平台扩张潜力
Demo 体验地址
桌面端高保真原型采用纯 HTML/CSS/JS 实现，零依赖、零后端，直接双击 pages/desktop-main.html 即可在浏览器中完整体验。
desktop-prototype.zip (161.3 KB)
启动方式：
- 解压 Zip 包
- 进入
demo/desktop-prototype/目录 - 双击
open-prototype.bat或直接用浏览器打开pages/desktop-main.html - 在html的设置页面切换主题
包含的交互演示：
| 模块 | 交互内容 |
|---|---|
| 四栏布局 | 全局信息栏 + AI 对话栏 + 业务编辑栏 + 资源侧栏 |
| 联动交互 | 企业切换、任务点击联动、Tab 路由切换 |
| AI 对话 | 发送消息 + 模拟打字回复 + 结果卡片确认动画 |
| 模态框 | 账户设置/安全中心/搜索/历史对话/网关连接等 |
| 通知系统 | Toast 通知（成功/错误/信息提示） |
| 资源管理 | 资源树展开/折叠/点击联动第三栏 |
| 筛选系统 | 状态过滤、搜索过滤、任务高亮 |
| 主题切换 | 亮色/暗色双模式主题切换 |
| 终端面板 | 终端面板折叠/清空 |
TRAE 实践过程
从 2026 年 6 月中旬到 7 月初，历时约 3 周，我使用 TRAE 完成了从需求梳理、架构设计、六端代码实现、UI 原型打磨、代码审计、测试覆盖到配色系统重构的完整创作流程。整个过程中，TRAE 不仅是代码编辑器，更是我的 架构师、UI 设计师、测试工程师和文档撰写者。
Phase 1 — 需求梳理与架构设计
通过自然语言对话，TRAE 协助我完成了产品需求文档（Spec）、详细设计文档、UI 设计文档、数据库设计、API 设计等全套设计文档的撰写与评审。六端架构（Desktop / SaaS Server / SaaS Web / Gateway Server / Gateway Web / MiniApp）在 TRAE 的规划下逐步清晰。
docs/Spec.md · docs/Architecture.md · docs/DetailedDesign.md · docs/DatabaseDesign.md
Phase 2 — 六端项目脚手架搭建
TRAE 自动生成了 NestJS + Vue 3 + Electron + Taro 四技术栈的项目骨架，包括配置文件、目录结构、依赖安装、构建脚本等。建立了统一的设计令牌系统（Design Tokens），定义了色彩/间距/字体/圆角/阴影等基础设计变量。
design-tokens/ · package.json · tsconfig 配置
Phase 3 — Desktop 端核心架构实现
完成 Electron 主进程/预加载/渲染进程三层分层架构，实现 IPC 通信桥接、8 个业务 Agent 系统（基于 OpenCode SDK + LangGraph 编排）、24 个 MCP 工具注册、Workflow 引擎（6 种节点类型支持暂停/恢复/回退）、加密凭证管理、SQLite 本地缓存等核心能力。
desktop/src/main/ · desktop/src/preload/ · desktop/src/renderer/
Phase 4 — 四栏布局 UI 实现
实现创新的四栏布局：Column1Global（全局信息/企业切换/任务列表）、Column2Chat（AI 对话）、Column3Editor（业务编辑区 + 10 个 TAB）、Column4Sidebar（资源树/插件/网关）。使用 Pinia 状态管理实现单向数据流（Column1 → Column2 → Column3）。
docs/UI Design - Desktop.md · desktop/src/renderer/components/columns/
Phase 5 — 高保真 HTML 原型开发
为了快速展示效果，TRAE 帮我在 demo/desktop-prototype/ 下创建了纯 HTML/CSS/JS 的高保真交互原型。从最初只有静态样式，到逐步接入共享工具库（DMModal / DMToast / DMTabRouter / DMChat 等），实现了 85+ 个可交互元素的完整行为，消除了所有死端交互。
.trae/documents/desktop-prototype-interactive-demo-plan.md · demo/desktop-prototype/
Phase 6 — 全面代码审计与修复
TRAE 对六端代码进行了多轮全面审计：架构分层审查、API 契约完整性检查、数据库设计规范校验、错误码表完整度、安全审计、性能优化等。每轮审计都输出详细的问题清单和修复计划，然后由 TRAE 自动执行修复。
.trae/documents/desktop-全面代码审计报告-20260621.md · .trae/specs/audit-desktop-comprehensive-review/
Phase 7 — 双模式配色系统重构
这是印象最深刻的环节。发现原 dark-only 配色存在三级文本对比度不达标（仅 3.1:1，违反 WCAG AA）的问题后，TRAE 协助我：
① 调研 VS Code / GitHub / Slack / Notion / Linear 五款竞品配色
② 设计亮色/暗色双模式色板（含 RGB / HEX / HSL 三种格式），品牌主色从绿色调整为更专业的蓝色系
③ 完成全量 WCAG 2.1 对比度验证
④ 清理所有硬编码颜色为 CSS 变量
⑤ 实现 DMTheme 主题切换工具 + localStorage 持久化 + 系统偏好自动跟随
docs/desktop-prototype-color-scheme.md · .trae/documents/desktop-prototype-color-scheme-finalize-plan.md
Phase 8 — Tailwind 清理与离线可用
发现原型依赖 Tailwind CDN 导致 file:// 协议直接打开主题错乱（FOUC + 颜色错误），TRAE 自动完成：移除 Tailwind CDN 依赖、删除 @tailwindcss 专有 at-rule、将 @layer base 中的样式提升为原生 CSS、删除僵尸文件 project-shell.html、同步更新所有文档引用。最终原型可离线双击打开，第一帧即显示正确主题色。
.trae/documents/desktop-prototype-tailwind-shell-cleanup-plan.md
Phase 9 — 测试体系建立
TRAE 按照项目规范（P01-P16）建立了完整的测试体系：自建 test-harness 测试框架（CHECK / PASS / FAIL 宏）、双通道输出（控制台 + 报告文件）、TC-{CATEGORY}-{NN} 命名规范、Doxygen 文件头规范。完成了 11+ 个测试套件的编写，覆盖 UI 规范、业务模块、端到端流程等。
desktop/tests/test-harness.ts · desktop/tests/run-all-tests.ts
TRAE 开发心得
规划先行 — TRAE 的 Plan 模式让我在写代码前先想清楚架构、拆分任务、识别风险，每个阶段都有明确的验收标准，避免盲目编码。
文档-代码闭环 — 设计文档先行，代码实现后自动审计文档-代码一致性，确保不偏离设计。
小步快跑 — 将大任务拆分为可独立验证的小步骤，每完成一步就验证，及时发现问题，避免后期大规模返工。
AI 不是替代而是增强 — TRAE 帮我处理了大量重复性工作（写 CRUD、写配置、写测试、改样式、查文档），让我能专注于产品逻辑和架构决策。
敢于重构 — 有 TRAE 协助，配色系统重构、Tailwind 依赖移除这类"动大手术"的工作变得可控，AI 能精确执行大规模代码变更并验证。
开发关键步骤截图
以下截图展示了使用 TRAE 进行开发的关键步骤（发帖时请在此处插入截图，不少于 3 张）：
① 架构规划阶段 — TRAE Plan 模式输出设计文档
② 原型开发阶段 — TRAE 辅助生成高保真交互原型
③ 配色重构阶段 — TRAE 执行 WCAG 对比度验证与颜色清理
关键任务 Session ID
| Session | 任务 | 说明 |
|---|---|---|
| .696418907466087:c7ff9a1560def2d5a85887e9725083a9_6a3814020ab1705493f59968.6a3814420ab1705493f59973.6a381442486fc40908e8a34b:Trae CN.T(2026/6/22 00:41:38) | 六端架构设计与项目初始化 | 完成整体架构设计文档、六端项目脚手架搭建、依赖安装、基础配置 |
| .696418907466087:fc0eb470faf5f39599419ad7ddcfc6ef_6a3a926f424218d00aecb22d.6a3a92ac424218d00aecb250.6a3a92ab28c30a3725b182ac:Trae CN.T(2026/6/23 22:05:32) | Desktop 端核心架构实现 | 主进程 Agent/MCP/Workflow 系统、预加载 IPC 桥接、渲染进程四栏布局骨架 |
| 696418907466087:b117d59eccd5a1ae47c32c164c4c2375_6a45b62c335d2a6eccf07ff6.6a45bc1a335d2a6eccf080ae.6a45bc1a335d2a6eccf080ac:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/2 09:17:14) | 高保真 HTML 原型交互完整性 | 创建 shared-utils.js/shared-styles.css、为 85+ 交互元素接入行为、消除死端 |
| .696418907466087:f2f530b211c047c368c6b20798500702_6a4c584e7b4b37ac76cfc292.6a4c5ca27b4b37ac76cfc294.6a4c5ca20ca464cfd3f7473a:Trae CN.T(2026/7/7 09:55:46) | 双模式配色系统设计与落地 | 竞品配色调研、WCAG 对比度验证、双模式色板实现、硬编码颜色清理 |
| .696418907466087:fa5283e97c5d11c6495edfb92589ce9e_6a429b644ec693bc5eea8096.6a429b834ec693bc5eea809f.6a429b82cbda990a674c98d6:Trae CN.T(2026/6/30 00:21:23) | 全面代码审计与问题修复 | 六端代码审计、API 契约完整性检查、问题清单生成、自动修复执行 |
| .696418907466087:b539f00fb979a472c062992f170a0cb1_6a4cd5cac980627cd1eae32e.6a4cd5e0c980627cd1eae330.6a4cd5e0a14e62ceb088d8fc:Trae CN.T(2026/7/7 18:33:04) | Tailwind 依赖移除与离线优化 | 移除 CDN 依赖、修复 file:// 主题错乱、删除僵尸文件、文档引用同步 |
Session ID 获取方式：在 TRAE 对话历史中找到对应任务对话，双击对话即可复制完整 Session ID。
项目产出物
| 维度 | 数据 |
|---|---|
| 端应用 | 6 个（Desktop / SaaS Server / SaaS Web / Gateway Server / Gateway Web / MiniApp） |
| 设计文档 | 50+ 篇 |
| 业务 Agent | 8 个 |
| MCP 工具 | 24 个 |
| 主题模式 | 2 种（亮色 / 暗色） |
| WCAG 合规 | 100% AA 级 |
报名帖链接
【学习工作赛道】小专快财务AI智能管家——面向中小财税服务企业的一体化智能作业平台 - TRAE AI 创造力大赛 / 【大赛报名专区】 - TRAE 官方中文社区
从一个模糊的产品构想到一套完整的六端架构 + 高保真可交互原型，TRAE 陪伴我走完了全程。AI 辅助编程不是未来，它已经在改变我们创造软件的方式。
© 2026 BZI · 作者：Gemsea · jiaoyuhai@foxmail.com