Agent 会改 SwiftUI 之后,我为什么还做了一层视觉工作流

0 阅读3分钟

用 Codex 或 Claude Code 改 iOS 项目,已经不算特别难了。

真正反复消耗时间的是另一件事:我看着 Simulator,知道某个间距、层级或者状态不对,但 Agent 看不到我正在看的东西。

我试过传截图。截图确实有用,不过它跟真实工程之间没有稳定关系。你还是得补充:这是哪个页面、什么状态、对应哪层 View、基于哪次构建,以及改完后应该跟哪个版本比较。

这也是我开始做 Monad Design 的原因。

The app is the canvas.

不再把运行中的 App 翻译成一段 prompt

Monad Design 不生成另一个 App,也不替代 coding agent。它只是把视觉反馈、源码修改和运行验收接在一起:

  1. 在 Simulator 里选中一块 UI
  2. 标注问题,或者直接描述想怎么改
  3. 把当前界面和选择范围交给现有 Agent
  4. Agent 修改原工程里的 SwiftUI 源码
  5. 重新构建 App
  6. 比较原版和几个变体,再决定保留哪个

在运行中的 App 里标注 UI

以前我会对 Agent 说「把这张卡片做得更紧凑一点」。问题是,「这张卡片」可能对应一个 View,也可能是几个 modifier 共同产生的结果;「更紧凑」也可能是 padding、字号、行距或布局优先级。

现在这句话是从被选中的真实 UI 上发出的。上下文不再只靠文字猜。

改的仍然是原来的工程

这一点对我很重要。

Monad Design 不是 mockup 工具,也不是「输入一句话,重新生成整个 App」的生成器。Xcode 工程、Git 历史、依赖和现有编码工具都不需要换。Codex、Claude Code 或 Cursor 仍然负责理解代码并完成修改。

Monad Design 处理的是中间这段原来很松散的循环:

运行中的 App → 选择 UI → 描述变化 → Agent 改源码 → 重新构建 → 比较 → 确认

比较多个 UI 变体

这种方式也意味着修改仍然可以正常 review。你能看到源码 diff,能放弃不满意的结果,也能继续用原来的测试和提交习惯。

为什么不是继续传截图

截图适合表达视觉结果,但它缺少几个关键关系:

  • 截图里的元素对应哪段源码
  • 当时处于什么运行状态
  • 修改发生在哪个构建版本上
  • 新结果应该跟哪个版本对比
  • 不满意时应该撤销哪些具体修改

如果只是一次性的 Demo,这些关系没有那么重要。但对一个已经存在、还会继续维护的 App 来说,它们决定了 Agent 的修改能不能进入正常开发流程。

现在能做什么

目前 Monad Design 主要用于本地 macOS 环境里的 Xcode 和 Expo iOS 项目。

可以从运行中的 Simulator 选择和标注 UI,把修改请求交给现有 coding agent,重新构建后查看结果,并在多个方案之间比较。Android 还不是当前重点,所以我不会把它写成已经完成的能力。

这里有一段完整演示:

watchclueso.com/embed/pio8j…

项目已经开源:

github.com/Monadix-AI/…

安装方式:

npx monad-design install

利益相关:我是 Monad Design 的开发者。

我比较想知道的是,大家用 Agent 改原生 UI 时,最费时间的是哪一步:描述画面、等待构建、比较方案,还是把不满意的修改安全地撤掉?