用 trae-cn辅助开发一款桌面图片压缩工具

案例与作品
,
1

:rocket: 用 AI 辅助开发一款桌面图片压缩工具

从 0 到 1，记录我与 AI 结对编程开发 IMG.COMPRESS 的完整过程

:light_bulb: 项目背景

最近需要处理大量图片压缩的需求，市面上的工具要么收费，要么功能不够灵活。于是决定自己动手开发一款桌面应用，顺便体验一下 AI 辅助开发 的效率。

技术选型思路：

  • 想要跨平台（Win/Mac/Linux）→ 排除原生开发
  • 想要原生性能 → Electron 体积太大
  • 最终选择 Tauri（Rust + Web 技术栈）

:robot: AI 协作开发流程

第一阶段：设计稿绘制（Pencil）

我的需求：

“帮我设计一个图片压缩工具的界面，有侧边栏和主内容区”

AI 使用 Pencil 工具绘制：

AI 直接在 Pencil 中创建了设计稿，包含：

  • 左侧深色侧边栏（Logo + 功能菜单 + 统计信息）
  • 右侧主内容区（拖拽区域 + 文件列表 + 操作按钮）
  • 压缩设置弹窗（质量滑块、尺寸调整、格式选择）

设计迭代过程：

  1. 初版设计

    • 侧边栏和主区域都是浅色
    • 按钮使用默认样式

  2. 优化调整

    • 我：“侧边栏用深色会不会更有设计感？”
    • AI：“建议侧边栏固定深色，主内容区跟随系统主题”
    • 修改后视觉效果提升明显

  3. 细节打磨

    • 调整卡片圆角、间距
    • 优化颜色对比度
    • 添加 hover 状态

我的收获：
用 Pencil 画设计稿比直接写代码快多了！可以直观看到效果，确定设计后再开始编码，避免了反复修改 CSS 的麻烦。

pencil设计稿

第二阶段：项目脚手架搭建

我的需求：

“帮我创建一个 Tauri + React + TypeScript 的项目，使用 Vite 作为构建工具”

AI 做的：

  • 初始化项目结构
  • 配置 Tailwind CSS
  • 设置路径别名
  • 创建基础目录结构

我的收获：
原来 Tauri 2.0 的配置和 1.0 有不少区别，AI 直接给了最新的配置方式，省去了翻文档的时间。

第三阶段：核心功能开发

1. 图片压缩逻辑（Rust 后端）

我的需求：

“需要在 Rust 中实现图片压缩功能，支持 JPG、PNG、WebP 格式，可以调节质量参数”

AI 写的核心代码：

// 使用 turbojpeg 进行硬件加速的 JPEG 压缩
pub fn compress_image(
    input_path: &str,
    output_path: &str,
    quality: u8,
    target_width: Option<u32>,
    target_height: Option<u32>,
) -> Result<CompressResult, String> {
    // 读取图片
    let img = image::open(input_path)
        .map_err(|e| format!("无法打开图片: {}", e))?;
    
    // 尺寸调整
    let img = if let Some(w) = target_width {
        img.resize(w, target_height.unwrap_or(w), Lanczos3)
    } else {
        img
    };
    
    // 根据格式选择编码器
    match format {
        "jpg" | "jpeg" => compress_jpeg(&img, output_path, quality),
        "png" => compress_png(&img, output_path, quality),
        "webp" => compress_webp(&img, output_path, quality),
        _ => Err("不支持的格式".to_string()),
    }
}

遇到的问题：

  • image 库自带的 resize 非常慢
  • AI 建议改用 fast_image_resize 库，性能更好
  • JPEG 编码使用 turbojpeg 库，利用硬件加速
  • 整体压缩速度提升了 3-5 倍

2. 前端状态管理

我的需求：

“设计一个文件列表的状态管理，需要支持添加文件、删除文件、更新压缩进度”

AI 设计的 Store 结构：

interface FileState {
  files: CompressFile[];
  addFiles: (files: File[]) => void;
  removeFile: (id: string) => void;
  updateProgress: (id: string, progress: number) => void;
  updateStatus: (id: string, status: FileStatus) => void;
}

export const useFileStore = create<FileState>((set) => ({
  files: [],
  addFiles: (files) => set((state) => ({
    files: [...state.files, ...files.map(f => ({ ... }))]
  })),
  // ...
}));

我的思考：
AI 直接选择了 Zustand 而不是 Redux，确实更适合中小型项目。代码简洁很多。
交互

第四阶段：UI 界面打磨

1. 主题系统

我的需求：

“实现深色/浅色主题切换，侧边栏固定深色，主内容区跟随主题”

AI 的方案：

  • 使用 CSS 变量定义颜色系统
  • 侧边栏使用固定深色变量
  • 主内容区使用 Tailwind 的 dark 模式
:root {
  /* 浅色主题 */
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --primary: 180 78% 24%;
}

.dark {
  /* 深色主题 */
  --background: 220 13% 11%;
  --foreground: 210 20% 96%;
  --primary: 180 60% 45%;
}

/* 侧边栏固定深色 */
--sidebar-bg: 220 13% 11%;
--sidebar-selected: 180 60% 45%;

迭代过程：

  1. 一开始侧边栏也跟随主题 → 浅色模式下不好看
  2. AI 建议侧边栏固定深色 → 更有设计感
  3. 调整了多次颜色对比度，确保可访问性

2. 国际化适配

交互2

我的需求：

“支持中英文切换，所有文案需要可配置”

AI 的实施：

  • 使用 react-i18next
  • 创建 zh-CN.json 和 en-US.json
  • 所有组件使用 t() 函数

遇到的问题：
变量插值 {count} 不生效，后来发现需要配置插值前缀后缀：

interpolation: {
  prefix: '{{',
  suffix: '}}',
}

然后改成 {{count}} 格式就正常了。

第五阶段：细节优化

交互3

1. 代码规范

AI 主动发现的问题：

  • “sidebar 里面有很多 [18px] 这样的数组写法，建议使用 Tailwind 标准变量”
  • 改成 w-4.5 h-4.5 更规范

2. 边界情况处理

AI 提醒的场景：

  • 空列表状态
  • 压缩失败重试
  • 文件重复添加
  • 磁盘空间不足

3. 性能优化

AI 的建议：

  • 图片处理使用 Rayon 并行
  • 前端使用虚拟列表（文件多时）
  • 压缩进度使用 throttle 节流

:bar_chart: 开发效率对比

环节 传统开发 AI 辅助 提升
脚手架搭建 2 小时 10 分钟 12x
核心功能开发 2 天 4 小时 12x
UI 界面实现 1 天 3 小时 8x
调试优化 1 天 2 小时 12x
总计 4 天+ 1 天 4x+

:bullseye: AI 辅助开发的最佳实践

1. 需求描述要清晰

:cross_mark: 不好的描述：

“帮我做个图片压缩功能”

:white_check_mark: 好的描述：

“需要在 Rust 后端实现图片压缩，支持 JPG/PNG/WebP 格式，可调节 1-100 质量，可选尺寸调整，返回压缩前后文件大小”

2. 分步骤迭代

不要一次性让 AI 写完整功能，而是：

  1. 先写核心逻辑
  2. 再写错误处理
  3. 最后写边界情况

3. 及时验证和反馈

  • AI 写的代码要立即测试
  • 有问题马上指出，AI 会快速修正
  • 形成 “写代码 → 测试 → 反馈 → 修正” 的闭环

4. 保持代码审查意识

AI 也会犯错：

  • 变量命名不规范
  • 忘记处理错误边界
  • 性能考虑不周

需要人工审查后再合并。

:speech_balloon: 有趣的对话片段

我： “深色模式的样式有点看不太清楚了，要调整一下”

AI： “参考 GitHub Dark 和 VS Code Dark+ 的配色方案，我调整了以下颜色…”

我： “侧边栏和主区域需要边框分割”

AI： “添加了边框，但发现侧边栏卡片之间的边框太丑了，建议去掉”

我： “算了侧边栏还是深色模式好看一点，不要跟随了”

AI： “已修改，侧边栏固定深色，按钮使用主题色”

这种灵活的调整，如果是传统开发，改来改去会很烦躁，但 AI 瞬间就能完成。

:crystal_ball: 总结与展望

这次开发的收获

  1. Tauri 确实轻量 - 安装包只有几 MB，比 Electron 小太多
  2. Rust 性能真的强 - 图片压缩速度比 Node.js 快数倍
  3. AI 是效率倍增器 - 特别是样板代码和调试环节

给想尝试的同学

如果你也想用 AI 辅助开发：

  1. 先想清楚需求，越详细越好
  2. 从小功能开始，逐步迭代
  3. 不要完全依赖 AI，保持技术判断
  4. 多和 AI 对话，它越了解你的项目，建议越精准

intel芯片和M1,M2，M3可以安装体验
https://huanlianapp-1301879400.cos.ap-guangzhou.myqcloud.com/mac_app/img-compress-app_0.1.0_x64.dmg

2 个赞
2

先不管ui，建议恒心功能再好好打磨下

2 个赞
3

什么时候出一个Windows的

1 个赞
4

哈哈哈，我只是抛砖引玉，不是真的要做好产品，玩玩还挺有意思的

1 个赞
5

项目是支持跨平台的，打包Windows应该问题不大，手边现在没Windows电脑，没法打包调试，哈哈

1 个赞