AI Coding 让我两天完成图像编辑器 Monica 的国际化与多主题

2025-10-01 17:41 tlnshuju 阅读(0) 评论(0) 收藏举报

一、引言

去年这个时候我对 AI Coding 的理解，更多停留在「写点代码补全」的层面。但是在前几个月我真正用起来才发现，它远不止于此。更像是和一位全天候的结对编程伙伴（也就是大家常说的 Vibe Coding）合作：我用自然语言描述需求，它帮我生成、重构甚至优化实现。

结果是显而易见的——原本至少需要一周才能完成的某款软件的国际化与多主题功能，我在不到两天的时间内就搞定了。

二、案例背景：Monica 图像编辑器

Monica(https://github.com/fengzhizi715/Monica) 是我正在开发的一款跨平台的桌面图像编辑软件。它不仅支持多种图像格式（包括相机 RAW），还集成了传统图像处理和基于深度学习的图像增强功能，提供可扩展、可二次开发的图像编辑体验。

在 Monica 的功能规划里，国际化（i18n）和多主题（暗黑模式 + 多种主题色）属于「非核心但必要」的部分：

国际化能让更多用户无障碍使用软件。
多主题能提升个性化体验，特别是暗黑模式已经成为现代应用的标配。

但问题是，如果靠传统开发方式，这两个功能都很「费工夫」：

国际化意味着要把界面里的所有文本抽取出来、管理语言资源、写切换逻辑，还得测试各种场景。
多主题则需要重构 UI 样式，提取颜色变量，实现亮/暗模式切换，还要保证兼容性。

它们都不是难到需要攻关的技术问题，而是典型的「不复杂但费时」功能。而正是这类功能，使用 AI Coding 可以带来效率的巨大提升。

三. 功能一：国际化（i18n）

3.1 传统做法

如果完全靠人工开发，一个图像编辑器的国际化流程大概是这样的：

先把界面中所有的文案找出来，逐个抽取成资源文件（比如 JSON、XML、properties 等）。
建立语言文件结构，至少要有 en 和 zh 两个版本。
改造 UI 代码，确保所有文本都能通过 key 动态加载，而不是硬编码。
编写语言切换逻辑，让应用可以在运行时切换语言。
测试每个界面，确保不同语言下不会出现 UI 溢出、编码问题。

这个过程听起来很常规，但细节特别多。就拿抽取字符串来说，一个几十个界面的应用可能要耗上两天时间才能完成，整个流程加起来至少 3–4 天。

3.2 AI Coding 做法（以 Cursor 为例）

我在 Cursor 里写了一个类似这样的需求描述：

帮我为项目加上国际化功能，至少支持中英文。
请把界面里的硬编码字符串提取出来，改成使用资源文件的方式。
同时实现一个语言切换逻辑，让用户可以在设置里选择语言。

当然有一个前提，Cursor 已经很熟悉当前的项目了。

Cursor 的处理方式让我挺惊喜的：

它会自动找出代码里所有硬编码的文本，并生成对应的资源文件。
自动修改 UI 绑定，把原来的 "打开本地图片" 改成LocalizationManager.getString("open_local_image")这样的写法。
还会补全一个语言切换函数，以及初始化配置逻辑。

我需要做的就是：

检查生成的 key 是否合理。
检查是否有需要国际化的地方遗漏了。
对照界面，微调一些翻译或 UI 细节。

整个流程差不多半天就完成了，而如果自己手动写，至少得花 3 天。Cursor 每次完成一项功能，都会进行总结以及写一个 readme 文档。

3.3 Cursor 使用技巧

在国际化这个场景里，我总结了几个实用技巧：

需求要分步骤给：不要一次性抛出「帮我做全局国际化」，可以先让 Cursor 提取字符串，再让它生成语言切换逻辑，最后加上配置界面。这样生成结果更可控。
善用“Explain”功能：Cursor 不只是写代码，还能解释它为什么要这样改。如果生成的 key 命名不合理，可以直接让它「重新生成更短的 key」。
对话式修正：如果有遗漏的地方，不用自己改代码，直接在对话里说「还有 XXX 文件里的文案没提取」就行，它会补全。
结合搜索：Cursor 有全局搜索，配合国际化这种「找硬编码」的需求特别好用，可以直接定位剩余未抽取的文本。

最后，我还让 Cursor 写了两个脚本，便于后续使用 Cursor 补全国际化功能时，使用起来更加方便。

string_manager.sh - 综合管理工具
- 清理重复项
- 检查缺失翻译
- 文件统计报告
- 自动修复功能
position_check.sh - 位置比对工具
- 检查中英文文件位置一致性
- 详细的位置差异分析
- 统计信息报告

四、多主题颜色切换：从繁琐到一键生成

在桌面软件中，多主题颜色切换（常见的“亮色模式 / 暗色模式”，甚至更多创意配色）已经成为用户体验的标配。

4.1 传统做法：手工维护庞大的样式表

如果按照传统方式来写，过程通常是这样的：

为每个 UI 元素（按钮、背景、文字、边框等）逐一定义颜色；
在 Kotlin Compose 中维护多份 ColorScheme，并反复检查它们的一致性；
每次调试时都要手动切换主题，生怕某个角落的颜色“没换过去”。

这种方式虽然可行，但工作量庞大，极其机械。随着组件数量增加，样式表会变得越来越臃肿，维护成本也随之上升。

4.2 AI Coding 做法：自动生成配色方案 + 一键改造

我在 Cursor 里直接输入了这样的提示：

帮我为图像编辑器生成两个主题（亮色 / 暗色），并写成可切换的 Compose 代码。
要求：风格简洁、颜色对比度足够、不要和已有按钮冲突。

几分钟后，Cursor 就生成了 ColorTheme.kt 和 ThemeManager.kt 文件，自动定义了 LIGHT 和 DARK 两套主题，并写好了切换逻辑。

更妙的是，我后来临时想加一个「高饱和度主题」，只需再输入一句：

再加一个强调色更多、适合设计师的主题。

Cursor 很快就生成了第三套方案，还帮我自动调整了关键组件的颜色引用。原本需要几天才能完成的主题扩展，如今只需要几分钟。

4.3 实用技巧：让 AI 记住「颜色命名规范」

如果不给约束，AI 往往会生成五花八门的命名（如 primaryLightBlue、mainOrange），长久来看难以维护。目前，我是这样做的：

在对话开始时就规定一套统一规则：比如 primary, secondary, background, surface, error；
让 AI 在所有后续生成中都遵循这套命名。

这样就能保证新增主题不会引入混乱，而是自然融入到既有的主题系统中。

五、效率对比与价值

如果没有 AI 帮助，这些功能对一个开发者来说，往往意味着至少一周的工作量：

国际化 → 翻译文本、管理语言文件、插入切换逻辑，逐个测试。
多主题切换 → 维护多份样式表，调试每个 UI 组件。

而在 Cursor 的协助下，我只花了两天时间就完成了这两个模块的开发与调试。

换句话说，AI Coding 帮我节省了约 70% 的时间成本，并且在很多细节上（例如颜色一致性、国际化 key 的规范化），它比我手写更可靠。

英文版界面示例

screenshot-en2.png

主题切换

ui-theme-dark.png

ui-theme-purple.png

除了时间成本的降低，价值还体现在：

思维负担的减轻：不需要记忆所有样式细节，把规则交给 AI 就好。
迭代速度的提升：想到一个新主题或新语言时，只需补充一句 prompt。
产品体验的提升：本来容易被拖延的功能（如国际化），现在可以提前上线。

六、我的思考与结尾

最近几个月，我尝试使用了多种 AI 编程工具，比如 Cursor、Qoder、Gemini CLI、v0 等等，让我对 AI Coding 有了更清晰的认知：

它不是替代，而是加速在现阶段 AI 不是取代开发者，而是帮我跳过那些「重复性劳动」。真正的设计思路、功能逻辑，依然需要我来把关。
越具体，越高效例如在 Cursor 里，prompt 越具体、规则越清晰，输出的代码越可直接使用。模糊的需求可能会得到华丽却不可控的结果。
养成“AI 优先”的习惯过去我遇到这些功能时，可能会选择“以后再做”。但现在我更倾向于先尝试让 AI 生成，再做针对性修改。或者遇到复杂的功能，让 ChatGPT 先出一个方案，然后丢给 AI 编程工具让它去实现。
长期价值：降低门槛 + 提高迭代力对于开发者来说，AI Coding 不仅是节省时间的工具，更是让产品能以更快的速度进入用户手中的神器。