我用 Claude Code + DeepSeek，花费3 块钱 Token 写了一个开源国际化翻译管理工具

前端练习生u
1 阅读5分钟

从「新建文件夹」到发布 npm 包，全程 AI 驱动，总计消费 ¥3.00。

痛点：当你面对 10 种语言的 locale 文件

前端做国际化，每新增一个 key，就要同时改 zh_CN.json、en_US.json、ja_JP.json、fr_FR.json…… 是不是很熟悉？

也有商业方案（Lokalise、Crowdin），但对个人/小团队来说：

  • 贵 — 按 seat / key 收费，项目一大肉疼
  • 还是要手动翻译 — 机器翻译质量堪忧，改起来比直接写还慢

于是就有了 Dict-App：一个开源的、基于大模型的全流程 i18n 管理工具。

它能做什么

flowchart LR
    Frontend["你的前端项目\n(locale/*.json)"] -->|dictapp upload| Server["Flask 服务端\n(Python + SQLite)"]
    Server -->|自动翻译| LLM["大模型\nOpenAI / Claude / DeepSeek"]
    LLM -->|翻译结果| Server
    Server -->|dictapp download| Frontend
    Web["Web 管理界面\n(React + Ant Design)"] <-->|可视化管理| Server

一句话总结

用一个 CLI 命令把 locale 文件推到服务端 → 在 Web 界面里让 AI 一键批量翻译 → 再一个命令把翻译结果拉回来。 嵌套结构自动扁平化、占位符自动保护，零心智开销。

核心功能一览

功能说明
📦CLI 工具dictapp upload / dictapp download 一键同步，已发布到 npm
🖥️Web 管理后台React 19 + Ant Design 5 搭建，可视化管理翻译 key 和任务
🤖多厂商大模型支持 OpenAI、Anthropic Claude、DeepSeek 及任何 OpenAI 兼容接口
🛡️占位符保护自动保护 {variable}、%s、{{interpolation}}、ICU 格式、HTML 标签
📊嵌套 JSON深层嵌套自动扁平化翻译，下载时还原结构
⏳任务队列后台异步翻译，实时进度追踪，失败自动重试
🪶轻量架构SQLite + Flask + Node.js CLI，零额外依赖

支持的 LLM

Provider推荐模型
OpenAIgpt-4.1, gpt-4o, gpt-4-turbo
Anthropic Claudeclaude-sonnet-4-6, claude-opus-4-7
DeepSeekdeepseek-chat, deepseek-reasoner
兼容 OpenAI 协议任何兼容端点（Ollama、vLLM 等）

使用体验

第一步：专属 CLI，一键上传下载

# 上传所有 locale 文件到服务端
npx dictapp upload
# 简写: npx dictapp -u

# 翻译完成后，下载回来
npx dictapp download
# 简写: npx dictapp -d

你的项目只需在 package.json 里配置：

{
  "dictapp": {
    "projectId": "c0ffee123",
    "apiKey": "sk-xxx",
    "serverUrl": "http://localhost:5050",
    "localeDir": "locale"
  }
}

第二步：可视化 Web 管理

部署好服务端后，浏览器打开 Web 界面：

页面能做什么
Projects创建/管理项目，获取 Project ID 和 API Key
Locales按语言浏览所有翻译 key，支持行内编辑、搜索
Translation Tasks创建批量翻译任务，实时进度监控
Task Detail逐条审查翻译结果，手动修正，失败重试
LLM Config配置大模型 Provider、API Key、模型名称，支持连接测试

第三步：AI 一键翻译

配置好 LLM → 选择源语言+目标语言 → 点击「Start Translation」→ 等几秒 → 翻译完成。下载回项目，locale 文件直接可用。

技术架构

┌─────────────────┐     ┌──────────────────┐     ┌─────────────────┐
│  CLI (dictapp)  │────▶│   Flask 服务端     │◀────│  Web 管理界面   │
│  Node.js / npm  │     │  Python / SQLite   │     │  React / Antd   │
│                 │◀────│                    │     │                 │
└─────────────────┘     └────────┬───────────┘     └─────────────────┘
                                 │
                                 ▼
                        ┌──────────────────┐
                        │   大模型 Providers │
                        │  OpenAI/Claude/   │
                        │  DeepSeek/兼容    │
                        └──────────────────┘

技术栈

层级技术选型
CLINode.js、Commander、Axios
后端Python 3、Flask、SQLAlchemy、SQLite
前端React 19、Ant Design 5、React Router 7、Vite 6
LLM SDKOpenAI Python SDK、Anthropic Python SDK

代码量

语言行数
Python（后端）~1,100
JavaScript（CLI）~240
React（前端）~810
合计~2,150

最精彩的部分：怎么在 3 块钱 Token 内写完的

整个项目用 Claude Code + DeepSeek-v4-pro 协作完成，工作流程如下：

阶段做了什么AI 工具Token 花费
1. 项目初始化搭建 monorepo 结构、配置依赖Claude Code~¥0.40
2. 后端开发Flask API、数据模型、业务逻辑Claude Code~¥0.80
3. CLI 开发Commander 脚手架、上传下载逻辑、扁平化Claude Code~¥0.50
4. 前端开发React 页面、Antd 组件、状态管理Claude Code~¥0.70
5. LLM 集成Provider 抽象层、多厂商适配、占位符保护Claude Code~¥0.40
6. Demo & 文档示例项目、README、npm 发布Claude Code~¥0.20
合计≈ ¥3.00

几个 AI 协作中的高光时刻

  • Provider 抽象层：提了一句「我要支持 OpenAI / Claude / DeepSeek，还得兼容 OpenAI 协议的其他模型」，Claude Code 直接给出了工厂模式 + 抽象基类的架构，5 个 Provider 文件编写过程几乎零返工。
  • 占位符保护：翻译时如何防止 {name} 被模型改写成 ｛name｝？Claude Code 在 prompt 模板里做了约束，再加上翻译后的校验和恢复逻辑，实际测试中日语、韩语、阿拉伯语都没掉过链子。
  • 嵌套 JSON → 扁平化 → 还原：这个双向转换是 CLI 的核心逻辑，用 DeepSeek-v4-pro 讨论了边界情况，再用 Claude Code 落实到代码，来回 cost 不到 ¥0.30。
  • React 前端：Ant Design 的表格、表单、选择器，5 个完整页面，Claude Code 一气呵成，样式和交互逻辑基本无 bug。

一行命令安装

# 全局安装 CLI 工具
npm install -g dictapp

# 克隆完整项目
git clone https://github.com/wangyuanxing/dict-app.git
cd dict-app && npm install

适用场景 & 后续规划

适合谁用：

  • 个人开发者 or 小团队，前端项目需要多语言支持
  • 不想花钱买 Lokalise / Crowdin 订阅
  • 已在使用大模型 API，想打通翻译自动化最后一公里

后续计划（欢迎 PR 👏）：

  • Docker 一键部署
  • GitHub Actions 集成的 CI/CD 翻译流水线
  • 翻译记忆库（TM）复用已翻译过的相同内容
  • 更多 i18n 格式支持（YAML、XLIFF、Android XML）

写在最后

3 块钱写一个从前端到底层 LLM 集成的完整项目，这在一年前是很难想象的。Claude Code 的代码生成质量 + DeepSeek 的超低 API 价格，让「创意到产品」的门槛降到了前所未有的程度。

核心不是省钱，而是省时间——从想法到 npm publish，整个项目从开工到发布不到 24 小时。

如果觉得有用，欢迎 Star ⭐ 和试用，提 Issue / PR 都可以。

最后的最后，以上所有内容，都是我使用 Claude code + DeepSeek生成的，如有错误，请怪AI。下附花费截图，大概是在余额¥9.5的时候开始的项目

image.png

开源协议：MIT License

avatar
文章
阅读
粉丝