opencode8-桌面应用实战 3
本节目标
- 安装 superpowers 技能
- 实现 JSON 格式化功能
- 测试国产大模型 DeepSeek4
- 在 opencode 中使用 undo/redo 实现回滚和重做
写在前面
从 Stitch 画原型图、导入 AI Studio 生成前端代码、再到 Tauri 项目集成、最后用 opencode 实际开发——这一整套流程终于走到了最后一环。
正式开始编码之前，先安装一个当下非常火爆的技能包——superpowers。为啥一定要装它？因为对于能力相对没那么强的模型来说，superpowers的规范和引导作用会明显很多，像是给AI配上了一套清晰的行动指南。
项目最终可以在 github.com/mayuanfei/m… 下载到最新版本。
安装 superpowers 技能
如果普通的 Skill 只是把“瑞士军刀”——能切个水果、开个瓶盖——那 Superpowers 就是一套“资深架构师的标准化作业流程”。本质上，它还是一系列的 Skill，但目标已经不在“转换个时间戳”这种鸡毛蒜皮的小事上，而是约束和规范 AI 的行为，让它按照人类顶级程序员的最佳实践去思考和行动。
说白了，Superpowers 就是给 AI 戴上的 紧箍咒 加 武功秘籍。
它在 GitHub 上已经收获了 170K star，受欢迎程度可见一斑。GitHub 地址是 github.com/obra/superp…，readme 里介绍了在 opencode 中的安装方式——只要把下面这段指令告诉 opencode：
Fetch and follow instructions from https://raw.githubusercontent.com/obra/superpowers/refs/heads/main/.opencode/INSTALL.md配置 DeepSeek 模型
平时习惯用 Github Copilot 或者 Gemini 的套餐，这次 DeepSeek4 刚发布，正好拿来试试国产大模型的成色。考虑到不同模型的能力差异，安装 superpowers 来约束控制就更有必要了。
先看一眼 DeepSeek 的余额，后面开发完 JSON 格式化功能后再比较一下还剩多少。
配置 DeepSeek 最简单的方式，是通过 opencode 直接修改全局配置。或者手动加上如下的配置：
{
"$schema": "https://opencode.ai/config.json",
"plugin": ["superpowers@git+https://github.com/obra/superpowers.git"],
"provider": {
"deepseek": {
"models": {
"deepseek-v4-flash": { "name": "DeepSeek V4 Flash" },
"deepseek-v4-pro": { "name": "DeepSeek V4 Pro" }
},
"npm": "@ai-sdk/openai-compatible",
"options": {
"apiKey": "your api key",
"baseURL": "https://api.deepseek.com"
}
}
}
}实现 JSON 格式化需求
上一篇文章里，我们通过 /init 给 mtool 项目生成了 AGENTS.md 项目说明文档。现在用 opencode 打开 mtool 目录——因为上次遇到了一些页面黑屏无法正确显示的问题，所以这里执行 /new 开启一个新的 session。
提示词如下：
根据现在项目src目录中页面JsonFormatter的内容，实现 rust 后端代码。仅仅实现 json 格式化的功能，具体要求如下：
1. 在 RAW INPUT 框中输入原始 json 字符串。通过点击右上角的 format JSON 按钮后，在 FORMATTED OUTPUT 框中输出格式化的 json。
2. 输出的格式化 json，成对的大括号采用同一种颜色；而不同层级的大括号是不同的颜色。
3. 点击minify按钮则使 json 字符串进行压缩显示：也就是去掉所有回车、空格等空白字符。使之紧凑排列。
4. 点击 clear 按钮清空所有输入输出的 json 字符串。
5. 在输出框右上角有个 COPY 按钮，点击可以拷贝到剪切板中。验证生成的代码
询问如何验证结果
直接问 opencode 怎么验证。
首次运行
npm run tauri dev需要下载 391 个依赖，这个过程确实有点慢，得有点耐心。
验证效果
经过漫长的等待，界面终于出来了。说实话，总体效果相当不错，基本一次就“全垒打”了——当然，也可能是因为功能本身比较简单。
- 正常 json 的效果
- 错误 json 的反馈
提交代码到仓库
考虑到国内的网络环境，这次把代码提交到 Gitee 上。
在 Gitee 上新建仓库
让 opencode 提交代码
提示词：
你帮我把项目提交到：https://gitee.com/mayuanfei/mtool.git仓库中启用工作区
此时能看到当前项目所处的分支了，而且会随着切换分支实时变化。
撤销更改
有了版本控制之后，就能对更改的文件进行回滚操作了。先做一个简单的修改，再回滚，看看在 opencode 中的具体操作。
一个微小的改动
去掉 JSON Formatter 后面的 v2.0.4 版本号显示。观察改变
进行回滚
执行 /undo 命令。这个 /undo 命令也可以通过页面直接操作。
后悔回滚
如果发现回滚后后悔了，可以用 /redo 恢复代码。
DeepSeek 模型花费
总结
- ：经过前两篇的原型设计、前端代码生成和项目环境搭建，本篇借助 opencode 顺利实现了跨平台桌面应用的业务逻辑，完成了从编码、测试到代码入库的完整闭环开发。
完整闭环达成
- ：引入 superpowers 这样的技能包，相当于给 AI 装上了“顶级程序员的思维引擎”。它能有效规范和约束 AI 的行为，提高代码的工程质量，尤其是在模型能力有限或逻辑复杂时更是关键。不过，凡事都有两面性——对于智商很高的大模型，反而可能限制它的发挥和想象力。
技能的威力
- ：这次实测了 DeepSeek V4，整体表现相当亮眼。处理类似 JSON 格式化的常规逻辑和前后端交互时，基本能“一次全垒打”，性价比确实不错。
国产大模型的崛起
- ：利用 opencode 提供的
AI 时代的版本控制
/undo、/redo指令以及与 Git 的无缝集成，咱们可以在与 AI 结对编程时大胆试错、随时回滚，不用担心破坏现有代码的基准。 - ：至此，“MTOOL 桌面工具箱”从零到一的实战系列告一段落。这套包含了“Stitch 原型设计 → AI Studio 前端生成 → Tauri 跨平台架构 → opencode 核心开发”的现代化 AI 编程工作流，展现了个人开发者极强的潜力，希望能为你的日常开发插上腾飞的翅膀！
实战寄语
