使用 opencode 和灵感写一个 mac App (实操版)

在此之前我已经使用 Opencode 编写代码有一段时间了, 一直都用于代码的重构, 逻辑的梳理, 技能的使用, 从来没有从 0 - 1 做一个应用

从现在的发展势头来说, miniMax 刚刚发布了 2.7 , 国产的设计工具也纷纷接入了 AI 体系, 可以体验下国产 Figma 的生态, 虽然生态还不完善, 我打算将之前的想法来进行测试, 实现一个从 0 - 1 的产品

目标和选型

目标

实现一个 gif 转 livephoto 的工具

工具

calicat.cn - 想法落定原型和设计的工具
- 支持 Mcp
- 支持需求管理和设计
- 当前免费
Opencode - 命令行编码工具, 开源且支持多模型协同的工具
Oh My OpenAgent - [前身:Oh My Opencode]支持想法转换成落地项目的多人协同Agent 的调用封装
CCSwitch - 支持可视化配置密钥和模型

模型配置

由于我平常使用的是 GPT 5.4 这个模型, 使用的是 RightCode 中转站, 通过此链接邀请注册, 可加赠 5% 额度, 他们家有很多套餐, 质量也还算稳定, 价格也比较便宜, 稍后我会根据实际使用再计算一下 token 和费用情况

模型清单如下

gpt-5.4
Ark-code-latest : 火山引擎 Coding Plan, 使用的是火山的默认自调度模型

流程

生成设计文件

我的需求是 : 设计一款 gif 转 livephoto的 mac 端工具

整个设计流程非常丝滑, 四个界面自上而下, 从左到右的绘制了出来, 整体非常丝滑顺畅, 还人性化的给画布的画板添加了名称

调用 Opencode 进行编程

初始化环境

初始化 git

为了代码方便管理, 这里我使用 git 初始化了文件夹, 方便代码的管理

csharp 复制代码

git init

或者使用 trae IDE 进行初始化

配置 Mcp

配置文档 : help.calicat.cn/aiAssistant...

perl 复制代码

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "calicat": {
      "command": ["npx", "-y", "mcp-remote@latest", "https://www.calicat.cn/mcp"],
      "enabled": true,
      "type": "local"
    }
  },
  "model": "rightcode-openai/gpt-5.4",
  "plugin": [
    "oh-my-opencode@latest"
  ],
}

配置 mcp 约定

配置 mcp 工具的调用引导, 是需要 opencode 知道在什么情况下可以调用 mcp

因为 opencode 可以兼容 Claude 老大哥的加载约定, 也支持 Trae, 我也有时候再 claude code 中写代码, 所以我这里再代码根目录下配置 CLAUDE.md, 配置内容:

diff 复制代码

[Calicat MCP 使用说明]
- 在收到 calicat.cn 域名的连接时，不要直接尝试访问，而是通过 Calicat MCP 相关工具的说明获取数据。
- get_meta_data 工具获取到的是大致的图层骨架结构，使用此工具可用较少的 Token 快速浏览页面设计、检索图层。get_meta_data 获取到的数据不能直接用作前端代码生成。
- get_design_data 工具用于获取指定图层的详细设计数据，在你开始实际的前端代码生成前，确保你通过 get_design_data 获取到了图层的详细设计数据，并以此为基础进行前端代码生成。

当前目录结构如下

objectivec 复制代码

.
└── CLAUDE.md

初始化 mcp

打开 opencode

ruby 复制代码

$ opencode

在首次打开的时候, 因为calicat 还没有被授权访问 mcp, 所以会首先打开 mcp 的授权地址, 我这里没来得及截图, 放一个官方的图片

在授权完毕之后重开 opencode , 否则 mcp 的授权无法加载到当前的终端中

Vibe Coding

编码

这里文件为了方便大家查阅, 我将此项目公开

arduino 复制代码

链接：https://www.calicat.cn/design/2034613697186635776
密码：2dWj

接下来就是编码, 我这里复制刚刚的 4个界面以及目标给到 opencode

ini 复制代码

在 mac 实现 Gif转Livephoto 功能, 使用 mcp calicat

主界面
https://www.calicat.cn/design/2034613697186635776?node-id=2034613697199218688&node-type=canvas&mode=design

转换预览界面 : 
https://www.calicat.cn/design/2034613697186635776?node-id=0b4e8611-88a3-46d1-b431-73229e9a995d&node-type=group&mode=design

转换中进度页面
https://www.calicat.cn/design/2034613697186635776?node-id=a3494cc4-99eb-40cf-b7f2-364523fd2ab4&node-type=group&mode=design

转换完成界面
https://www.calicat.cn/design/2034613697186635776?node-id=73d13648-ae24-4f4b-abec-4abdefff4c1c&node-type=group&mode=design

接下来就是 opencode 调用各种能力进行自编码的过程, 在这个过程中偶尔出现几次访问 rightcode 无效的情况, 关掉opencode 在重新启动当前的会话, 然后输入继续即可继续编码

在不太漫长的等待后 (21:30 - 10:30) 1小时左右

结果就可以输出了, 目录结构如下

markdown 复制代码

.
├── CLAUDE.md
├── Package.swift
└── Sources
    └── GifToLivePhoto
        ├── AppMain.swift
        ├── AppModels.swift
        ├── AppViewModel.swift
        ├── ContentView.swift
        ├── GIFDecoder.swift
        └── LivePhotoConverter.swift

代码提交

因为项目初始化未增加 .gitignore, 所以代码提交的时候会有很多 build 之后的编译文件, 这里我们使用 opencode 帮我们生成一份 .gitignore 文件

复制代码

这是一个mac swift 项目, 给项目增加一个 .gitignore 文件用来忽略项目中的编译文件

稍后根据需要生成了文件

我用 trae 进行了提交, 当然页可以告诉 opencode 让他自行提交, 下边我打开 xcode 运行下项目

结果运行

xcode 运行没有问题, 说明

项目整体经过校验, 代码逻辑层没有语法错误

项目运行来查看一下界面, 为了方便查验, 我们将多个图合并到一个图片上

测试结果对比

原图 : (Gif 图)

生成之后的图 : (为了对比, 我发布在了小红书)

www.xiaohongshu.com/explore/69b...

总结

当前结果

界面实现差异较大

给定的链接地址可能存在问题, 图片存在背景, 导致 AI 实现将背景一并实现

首页细节实现不到位

实现语言是英文

可能和模型默认的语言有关

功能实现正常, 需要进行细节调整

满意程度

基本实现了从 0 - 0.7 的实现, 暂时还没有通过简单的方式实现 0-1 还需要和模型斗志斗勇, 和工具来进行 debug 来满足快速对接

后续方向

$-\] 完成当前的UI层实现$
$-\] 增加后端服务$
仓库地址 : imvkmark/livephoto-converter
当前的实现打包成了 0.7.0 release, 大家可以自行测试或者与我讨论

由于我自己 ai 部分了解不够深入, 还请大家多多指教, 共同学习