opencode8-桌面应用实战 3

本节目标

安装 superpowers技能
实现 JSON 格式化功能
测试下国产大模型 DeepSeek4
opencode 中使用 undo、redo 实现回滚和重做

写在前面

复制代码

Stitch 画原型图  →  导入 AI Studio  →  生成前端代码  →  Tauri 项目集成  →  opencode 实际开发

终于来到了这个流程的最后一环。不过在进行编码之前，先来安装一个非常受欢迎的技能包------superpowers。安装它是因为：对于能力相对较弱的模型，它的规范和引导作用会更加明显。

项目最终可以到：github.com/mayuanfei/m... 下载最新版本使用。

安装 superpowers 技能

如果说普通的 Skill 是一把"瑞士军刀"（能切水果、能开瓶盖），那么 Superpowers 就是一套"资深架构师的标准化作业流程（SOP）"。它本质上也是一系列的 Skill，但它的目标不是为了帮你完成"转换个时间戳"这种鸡毛蒜皮的小事，而是为了约束和规范 AI 的行为，让它按照人类顶级程序员的最佳实践去思考和行动。

简单来说：Superpowers 就是给 AI 戴上的紧箍咒加武功秘籍。

它现在在 GitHub 上 star 已经 170K 了。可见其受欢迎的程度！

GitHub 地址：github.com/obra/superp...

在这个 GitHub 地址的 readme 中，介绍了在 opencode 中安装它的方式。只要把下面这段话告诉 opencode 即可：

ruby 复制代码

Fetch and follow instructions from https://raw.githubusercontent.com/obra/superpowers/refs/heads/main/.opencode/INSTALL.md

说明：

superpowers 技能是自动触发的------当你提出任务时，我会自动判断是否有匹配的技能并加载。你不需要手动调用。几个使用场景举例：

"帮我设计一个登录页面" → 自动加载 frontend-design

"帮我修复这个 bug" → 自动加载 systematic-debugging

"润色这封邮件" → 自动加载 email-polisher

"帮我写个实施计划" → 自动加载 brainstorming + writing-plans

配置 DeepSeek 模型

平时我都是用 Github Copilot 或者 gemini 的套餐。最近 DeepSeek4 发布了，这里也试试国产大模型的能力。因为考虑到不同模型能力的差异，所以咱们也安装 superpowers 进行约束控制。先来看看我的 DeepSeek 余额：

我们来看看开发完 JSON 格式化这个功能后，金额还剩下多少。配置 DeepSeek 最简单的方式，是通过 opencode 直接修改全局配置。或者你也可以手动加上如下的 deepseek 配置：

perl 复制代码

{
    "$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。

提示词如下：

arduino 复制代码

根据现在项目src目录中页面JsonFormatter的内容，实现 rust 后端代码。
仅仅实现 json 格式化的功能，具体要求如下：
1.在 RAW INPUT框中输入原始 json 字符串。通过点击右上角的 format JSON 按钮后，在 FORMATTED OUTPUT 框中输出格式化的 json。
2.输出的格式化 json，成对的大括号采用同一种颜色；而不同层级的大括号是不同的颜色。
3.点击minify按钮则使 json 字符串进行压缩显示：也就是去掉所有回车、空格等空白字符。使之紧凑排列。
4.点击 clear 按钮清空所有输入输出的 json 字符串。
5.在输出框右上角有个 COPY 按钮，点击可以拷贝到剪切板中。

上面这些描述，我是对着页面，总结的需求

验证生成的代码

询问如何验证结果

首次运行

arduino 复制代码

npm run tauri dev

要下载 391 个依赖。这里我截取了一张中间过程的图，这个过程的确有点慢，得有点耐心！

验证效果

经过漫长的等待，终于出现界面了。说实话，总体效果还是很不错的。基本一次就"全垒打"了。当然也有可能是功能太过简单的缘故。

正常的 json
错误的 json

提交代码到仓库

考虑到国内的网络环境，我们把代码提交到 Gitee 上吧。

在 gitee 上新建仓库

这里注意别选初始化仓库。就创建一个干干净净的仓库。

让 opencode 提交代码

提示词：

arduino 复制代码

你帮我把项目提交到：https://gitee.com/mayuanfei/mtool.git仓库中

在 gitee 上也能看到把代码提交到 master 分支了。

启用工作区

此时能看到当前项目所处的分支了。

注意：这里会随着你切换分支实时变化的。

撤销更改

有了版本控制后，我们就能对更改的文件进行回滚了。这里我们先做个简单的修改，然后回滚，看看在 opencode 中是如何操作的。

一个微小的改动

javascript 复制代码

去掉 JSON Formatter 后面的 v2.0.4 版本号显示。

观察改变

进行回滚

执行/undo 命令

这个/undo命令也可以通过页面上进行操作。

后悔回滚

如果发现回滚代码后，后悔了。这里可以使用/redo恢复代码。

DeepSeek 模型花费

这个小功能花费 4 毛 6 分。还不错！

总结

完整闭环达成：经过前两篇的原型设计、前端代码生成和项目环境搭建，本篇借助 opencode 顺利实现了跨平台桌面应用的业务逻辑，完成了从编码、测试到代码入库（Gitee）的完整闭环开发。
技能（Skills）的威力：引入 superpowers 这样广受欢迎的技能包，就像给 AI 装上了"顶级程序员的思维引擎"。它能有效规范和约束 AI 的行为，提高代码的工程质量，这在面对复杂逻辑或模型能力有局限时尤为重要。但是凡事都有两面性，对于智商高的大模型其实反而限制了大模型的发挥和想象力。
国产大模型的崛起：本次实战测试了 DeepSeek V4，整体表现非常亮眼。在处理类似 JSON 格式化的常规逻辑和前后端交互时，基本能做到"一次全垒打"，性价比蛮高的。
AI 时代的版本控制：利用 opencode 提供的 /undo、/redo 指令以及与 Git 的无缝集成，我们可以在与 AI 结对编程时大胆试错，随时回滚，无需担心破坏现有的代码基准。
实战寄语：至此，"MTOOL 桌面工具箱"从零到一的实战系列告一段落。这套涵盖了"Stitch 原型设计 → AI Studio 前端生成 → Tauri 跨平台架构 → opencode 核心开发"的现代化 AI 编程工作流，展现了个人开发者极大的潜能，希望也能为你的日常开发插上腾飞的翅膀！